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?original_referer=[URL]&text=[TITLE]&url=[URL]

Pinterest

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

Facebook


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.

Comments

  1. Sebastian says:

    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. 🙂

  2. David says:

    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.

  3. Frédéric says:

    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.

  4. Redetra says:

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

  5. Thank u for these tips 🙂

  6. Matt says:

    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

  7. Loganatan says:

    Nice thanks

  8. Mony says:

    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.

  9. Dori says:

    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.

  10. addzies says:

    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 : )

  11. Custom Social Share Buttons With Author Information

  12. davidrtrainguy says:

    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. 🙂

  13. curious says:

    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 :/

  14. Dana says:

    Perfect! Thank you!

  15. Soundar says:

    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 +.

  16. Ian Douglas says:

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

  17. Youngsuk Kwak says:

    Thanks you! >_<

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

  19. Milan says:

    Thank you man, really helped me a lot 😉

  20. UK Swimwear says:

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

  21. Ashish Goyal says:

    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.

    • Nicole J. Patten says:

      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”);
      });

  22. Lim Mingji says:

    THANKS FOR THE REFERENCE!!! SAVED MY LIFE!

  23. Thank you very much for this useful tutorial.

  24. Zlate says:

    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.

  25. Lucy Dixon says:

    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 says:

        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?

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

  27. Nnamdi CöölBreeze Wakwe says:

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

  28. Dave Winter says:

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

  29. Kevin Dench says:

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

  30. […] That only made me more determined to do it. Fortunately for me, I finally hit on the right search terms and unearthed this gem: How to create social share buttons with custom icons […]

  31. Stu Durning says:

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

  32. Stu Durning says:

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

  33. Juanfer says:

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

  34. Attilio D'Alberto says:

    Thanks!

  35. MJ says:

    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 says:

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

  36. Rita Patel says:

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

  37. […] too. Create simple plugins on your site, design attractive Infographics (see point 7) or custom social share buttons. The more attractive the design, the more people are likely to share […]

  38. carlosperalta88 says:

    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?

  39. Victor Borah says:

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

  40. […] content and should help increase the chance of being shared on social media. You will notice that Social media URL submission methods have been used to share to both Facebook and Twitter, rather than the heavy SDKs and APIs. This is […]

  41. Mike Hamblin says:

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

  42. Игорь says:

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

  43. Dipu Raj says:

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

  44. NaNi Ram says:

    In linkedin what is [SOURCE/DOMAIN]

  45. 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.

  46. NaNi Ram says:

    Thank you!!

  47. Nikita Khrushev says:

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

  48. Awesome, added to my Pocket!

  49. bubbbleglass says:

    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?

  50. Gireesh Goudar says:

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

  51. Ryana Andhini says:

    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

  52. Luis Paredes says:

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

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

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

  55. 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?

  56. Andrew Walsh says:

    This made my life a billion times easier. Awesome!

  57. Jone Boaz says:

    hi

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

  59. Dave says:

    The font on this site is terrible.

  60. Nirmal Kumar says:

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

  61. Roberts Ozolins says:

    None of the Facebook options are working.

  62. Elijah says:

    Does anyone know what the Skype share url would be? I am having a real tough time finding it.

  63. rose says:

    Having no luck with the Tumblr one. 🙁
    But otherwise, awesome.

  64. Jacek Wojcik says:

    Huge thank you Petra!

  1. Required
  2. Required, but never shared