How to create social share buttons with custom icons

Over the years, social media has become one of those inevitable elements in our lives that you just can’t escape, even if you wanted to. I am sure that I am not the only one who feels at times, that there is just too much of it. I remember those days that whenever there was a new social network, I felt the urge to go ahead and sign up. After a while, it just became either hard to track each and one of them, or just simply lost interest in it because not many of my friends were using, or something else.

Nowadays, I just stick to few of them to maintain my sanity level, as I am trying to have a life that doesn’t involve me being glued to my phone. Ok, I lied. My phone and I, we are inseparable. Anyway. Now to the nitty griddy stuff.

I don’t know how many times I have been asked to add social share links to client’s site, and I am sure you did too. There are so many free and easy-to-use services out there for us to use, like AddThis, ShareThis and many others. They are all great for a quick implementation, but the front-end developer side of me sort of hates the markup being outputted, as well as the pre-defined icons that you are stuck with. Not to mention, they all are dependent on JavaScript. So, whenever I can do anything without using any of it, I am a very happy camper.

I have sort of assumed that it just can’t be done, and if does, it may be complicated because any of the social services don’t seem to stick to one syntax when it comes to URL submission method. I don’t know how many times a designer came to me with completely custom design treatment for any of the icons, and I just told him that it can’t be done. Well, I did some research and found out that in fact you can have social share links with custom icons and it’s not all that hard to do.

Twitter

http://twitter.com/intent/tweet?status=[TITLE]+[URL]

Pinterest

http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]

Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

According to Frédéric, supposedly the URL syntax above for Facebook has been deprecated, even though so far it seems to be still working for me, but just in case here is the new one for future reference.

http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]

Google+

https://plus.google.com/share?url=[URL]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]&notes=[DESCRIPTION]

Digg

https://digg.com/submit?url=[URL]&title=[TITLE]

Tapiture

http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]

StumbleUpon

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]

Posterous

http://posterous.com/share?linkto=[URL]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Google Bookmarks

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Friendfeed

http://www.friendfeed.com/share?url=[URL]&title=[TITLE]

This a great list listing most popular social services but I have struggled finding what the syntax for an email button should be like. If you are a developer, you are most likely familiar with syntax for an email link. What you need to accomplish the desired outcome, your markup should looks something along these lines:

<a href="mailto:?subject=[TITLE]&body=Check out this site I came across [URL]">[EMAIL]</a>

Follow Buttons

I’ve been just recently asked if I knew about a way to create a “follow” buttons without any plugin. So far I’ve only looked into Twitter’s syntax for a follow button and this is what I got:

<a href="https://twitter.com/intent/follow?original_referer=[URL]/&region=follow_link&screen_name=[YOUR TWITTER HANDLE]&tw_p=followbutton" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://twitter.com/intent/follow?original_referer=[URL]/&region=follow_link&screen_name=[YOUR TWITTER HANDLE]&tw_p=followbutton', 'Follow @[YOUR TWITTER HANDLE]']);">Follow @[YOUR TWITTER HANDLE]</a>

Having this site in WordPress, I wanted to test it of course. Using WordPress codex functions, all I had to do was to substitute the [TITLE] with:

<?php print(urlencode(the_title())); ?>

…and [URL] with:

<?php print(urlencode(get_permalink())); ?>

I hope you find this information helpful for creating social media buttons with custom icons. Feel free to let me know in comments below or hit me up on Twitter about what you think, or if you have come across any other approaches that were helpful to you.

  • how dis you do that working? I tryed but the images are noat displayed. can you tel me if is necessary additional javascript?

    • Sebastian, my icons are being displayed with help of font icons from Symbolset. So, yes, there is additional JS needed, as well as you need license for any of their fonts of your own choosing. Hopefully this helps answering your question. 🙂

  • David

    Hello, thank you so much for this. I have a client that wants custom icons for their social sharing buttons but their website is static (html only). Would these social url’s work on a static site? Thank you!

    David

    • David, it depends on what you mean by “static”. Short answer is “yes” but with way more maintenance. Meaning, for as long as you educate your client or whoever will be adding new content/pages, will follow the needed syntax for each social media of their choice and updates URLs and title in each link as my examples demonstrate, you should be then good to go.

  • Hi Petra,
    Thanks for this useful list!
    I think you can update the facebook one with :
    > https://www.facebook.com/sharer/sharer.php?u=%5BURL%5D

    The one you listed is depreciated.

  • Redetra

    These links aren’t for creating custom shares at all. You might want to check them.

  • Thank u for these tips 🙂

  • Matt

    Incredible collection. Saved me so much time. In hopes of giving back a little, Digg is another one I use quite a bit and it’s easy as well: https://digg.com/submit?url=%5BURL%5D

  • Loganatan

    Nice thanks

  • Mony

    Does anyone know how to apply these options on a DNN (DotNetNuke) page/skin?

    • If you know how to dynamically generate a title with a link to a page (like when you have a feed of blog posts), you just use the same “formula” for [tile] and [url] and plug them in as recommended in my examples for all the different social media icons. Hope this helps. Sorry, I can’t provide actual examples, as I don’t have much insight into DNN but maybe someone else does.

      • Mony

        Thank you so much for replying. I’m trying to get a simple code as the PHP one but couldn’t find it. Still in the search.

      • Muhammad Arif

        Help me please ?

  • I’ve created my own set of custom share buttons that I’d like to put on the bottom of each post in blogger. I understand where to insert the html code in the template.
    What I can’t figure out is what changes do I need to make to the above referenced codes so that when a person clicks on my “facebook” icon for example it will show them the option to share that particular post on their timeline?
    I can get the facebook window to pop up; but it just says “invalid.invalid” The actual post to share isn’t there.
    I’m sure it’s a simple permalink code that I’m missing…but I just can’t figure it out!

    Thanks so much for your help.

  • addzies

    The one for twitter should be updated to this:

    http://twitter.com/intent/tweet?status=%5BTITLE%5D+%5BURL%5D

    That ensures that it will work on mobile browsers : )

  • Pingback: Custom Social Share Buttons With Author Information()

  • davidrtrainguy

    Bit of a noob, need some help with syntax, for example, how do you dynamically set TITLE and URL in the following? http://twitter.com/intent/tweet?status=%5BTITLE%5D+%5BURL%5D

    • Not sure which CMS you are working with but whatever it is, you need to just replace either TITLE and URL what the correct codex function that will then dynamically pull in the correct data. At the end, I posted an example what I do in WordPress. To be more specific, this is my exact code snippet to create my Twitter icon: <a href="http://twitter.com/intent/tweet?status=+” rel=”me” class=”ss-icon ss-social-regular”>Twitter

      Hope this helps. 🙂

      • Muhammad Arif

        please provide instagram share link ?

  • curious

    Anyone any luck on using this for linkedin with a dynamically generated url? I only seem to get it to work with a static url :/

  • Dana

    Perfect! Thank you!

  • Soundar

    All the share links are working fine, but i need to get the (shared) count. Except Google +, i can able to get all the count for others. Can you please let me know how to get the shared count of Google +.

  • Thanks for this resource. Do you have a share URL for Whatsapp? And with Pinterest, what would be the WordPress code for [Media]?

    • Oliveira

      I’m using the post thumbnail.

      ID) ); ?>

  • Youngsuk Kwak

    Thanks you! >_<

  • Thank You!! The first reliable way on how to do this, after an hour of searching. And wordpress integration! Much appreciated.

  • Thank you man, really helped me a lot 😉

  • UK Swimwear

    Great post! Really useful to customise our buttons. Thanks!

  • Ashish Goyal

    Can we open this sharing in window popup, and after successfully shared can i close this popup?

    • Most likely with some JavaScript you can achieve that. In my examples, I was trying to stay away from relying on any use of JS, just pure HTML and CSS.

      • Amit Saha

        Hi Petra
        Can you help me out with sharing. We are not able to share our hashtag link via whatsapp

    • Nicole J. Patten

      Adding class “popup” to each link and the following jquery works for me

      $(‘.popup’).click(function (event) {
      event.preventDefault();
      window.open($(this).attr(“href”), “popupWindow”, “width=600,height=600,scrollbars=yes”);
      });

  • THANKS FOR THE REFERENCE!!! SAVED MY LIFE!

  • Thank you very much for this useful tutorial.

  • How can I use hash tags and follow symbols within the [TITLE] part of the URL? Namely, I can’t use the # and @ symbols inside. Whenever I use any of those symbols, the text gets cut off.

  • Lucy Dixon

    Hi

    Thanks for this but I’m really struggling to get it to work. So far I’m just trying to create a button to share on twitter, but when I test it, on clicking it brings up a twitter page with a status reading ‘<?php print(urlencode(the_title()))'
    I can't seem to get the codex functions to work. Anyone know where I'm going wrong? Do I need to add something to my functions.php file to make them work?

    Sorry for all the questions, I'm new to this..

    • This is what my implementation looks like, hope this helps: <a href:"http://twitter.com/intent/tweet?status=<?php print(urlencode(the_title())); ?>+<?php print(urlencode(get_permalink())); ?>" rel="me" class="ss-icon ss-social-regular">Twitter</a>

      What I am doing there is displaying the post title with its url within a new Twitter status update.

      • Lucy Dixon

        Even if I use exactly that, my twitter status reads: ?php print(urlencode(the_title())) instead of pulling the title etc. Very strange! Where are you putting the code? I’m adding it as a widget within the genesis framework, so maybe thats the problem?

  • Very poorly named article. This is just a listing of social API URI’s with some params. Gives nothing whatsoever toward “How to Create”.

  • Nnamdi CöölBreeze Wakwe

    This is excellent! I had even considered scrapping the sharing feature on the project cause i wanted to use my specific icons.

  • Dave Winter

    Hi, thanks for posting this! Is there a way to control what image is shared on Facebook (or what size image is shared)?

    • This should help you, https://developers.facebook.com/docs/plugins/checklist, as it’s separate from what I was showing here.

      • Dave Winter

        Thanks Petra. I still can’t get the Title to post when I share on Twitter or Facebook, I can get the URL to share just fine on both. Do you have any tips on getting Facebook and Twitter code to not only share a URL but also a custom hashtag?

        • Dave Winter

          Update, I got this to work with Twitter, but not with Facebook yet.

  • This post helped a ton when we were trying to build our own social icons for a client. Thanks for the in-depth tutorial!

    • You are more than welcome. Happy to hear you’ve found it helpful. 🙂

  • Pingback: How to Add StumbleUpon Button to JetPack | It's All a Matter of Perspective | It's All a Matter of Perspective()

  • Stu Durning

    This is superb thanks! Does anybody know the links for WordPress and Blogger? The only 2 i’m missing!

  • Stu Durning

    Thanks this is great! Just missing the ones for WordPress and Blogger if anybody can help? Thanks!

  • Pingback: How to create social share buttons with custom icons | PHP Infinite()

  • Juanfer

    I love you Petra for this post. Thank you very much!.

  • Attilio D’Alberto

    Thanks!

  • MJ

    Hi, first of all thankyou for your work. I would ask you how to set follow button for Facebook, Twitter and G+ , with custom icons, cause i tried only your twitter code but it doesn’t work for me. I would use 3 icons for each social, but i don’t know how link it for the follow. Thankyou.

    • Mnet

      I’d like to know myself. I can’t find anything anywhere and this is the closest I’ve come to finding an answer.

  • Google Plus is not work working is there any update in that as well ? and does WhatsApp provide any such feature ?
    Thanks 🙂

  • Pingback: Building quality backlinks – best & worst techniques review of 2015 | rockpapercopy()

  • carlosperalta88

    Thank you petra! but I have a question, right now whenever I use linkedin link or facebook I get a full page redirection instead of a popup, how could I fix that?

  • Victor Borah

    Hi, I stumbled upon this while I was Googling for exactly the same thing ! This saved my day, Thanks a lot for the help !

  • Pingback: Hover Social Sharing Blockquotes on WordPress – Designed by Ross()

  • TY This is a great resource, I have used these to create share links for my perch cms driven website.

  • Игорь

    Such approach doesn’t work any more with Facebook, unfortunately. Any other ideas?

    • Not sure what you mean. It does still work for me. Just try the Facebook button I have after this post, above these comments.

    • Works for me also on my site?

  • Found what i was looking for, very nice article, thank you

  • NaNi Ram

    In linkedin what is [SOURCE/DOMAIN]

    • That would be the home URL of the site you are sharing the page from. So, for instance on my site, for a specific post, the source/domain would be called with: <?php get_home_url(); ?> Which would return http://www.petragregorova.com. Hope this answers your question. 🙂

      • Germán Villalobos

        Lifesaver Miss! Thanks a lot!

  • I have just tried it on my iPhone 6 in Chrome and Safari, and it does open Twitter in a new tab with generated tweet with name of the post and link to it.

  • NaNi Ram

    Thank you!!

  • Nikita Khrushev

    Petra, let’s marry and have lots of children. You just saved me & my project.

    • Haha! Glad you’ve found it helpful! 🙂

      • Nikita Khrushev

        I’m serious … dump your boyfriend and let’s elope to Bermuda.

  • Awesome, added to my Pocket!

  • bubbbleglass

    Petra! Thank you so much!! This is amazing!!! I have a quick question, is there a way to include an image in shared posts for LinkedIn and Facebook?

  • Gireesh Goudar

    Thank you for the help. And in twitter only link is displaying, post will not aooear like facebook share??

  • Ryana Andhini

    Hello. How to include image from the page I want to share? I’ve tried the facebook syntax and only got page title and the link. Thanks

  • This is gold. Thank you so much for sharing this valuable resource! 🙂

  • These are awesome,thanks, are you aware of an SMS message share button code?

  • Those are awesome thanks, are you aware of SMS message code? thanks,f

  • is there a way to choose what image fb posts from URL one is sharing? it seems to randomly choose any image from a page, despite whether it gets cropped or not?thanks again?

  • Andrew Walsh

    This made my life a billion times easier. Awesome!

  • Jone Boaz

    hi

  • So amazing! Congratulations and Thanks so much! “Obrigado” from Brazil!

  • Dave

    The font on this site is terrible.

  • Thank you so much. I used this code on my website. Making my own custom share buttons.