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.
http://twitter.com/intent/tweet?original_referer=[URL]&text=[TITLE]&url=[URL]http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]Google+
https://plus.google.com/share?url=[URL]http://www.reddit.com/submit?url=[URL]&title=[TITLE]Delicious
http://del.icio.us/post?url=[URL]&title=[TITLE]¬es=[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]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]/®ion=follow_link&screen_name=[YOUR TWITTER HANDLE]&tw_p=followbutton" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://twitter.com/intent/follow?original_referer=[URL]/®ion=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. 🙂
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.
These links aren’t for creating custom shares at all. You might want to check them.
I am pretty sure they are as I am using them on this site.
Thank u for these tips 🙂
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
Nice thanks
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.
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.
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.
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 : )
Thank you for the tip. It’s now updated. 🙂
Custom Social Share Buttons With Author Information
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. 🙂
please provide instagram share link ?
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 :/
Perfect! Thank you!
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]?
I’m using the post thumbnail.
ID) ); ?>
whatsapp://send?text=[your title / URL]
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 😉
Great post! Really useful to customise our buttons. Thanks!
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.
Hi Petra
Can you help me out with sharing. We are not able to share our hashtag link via whatsapp
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.
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.
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”.
This is excellent! I had even considered scrapping the sharing feature on the project cause i wanted to use my specific icons.
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.
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?
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. 🙂
[…] 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 […]
This is superb thanks! Does anybody know the links for WordPress and Blogger? The only 2 i’m missing!
Thanks this is great! Just missing the ones for WordPress and Blogger if anybody can help? Thanks!
[…] Article Original Share Here […]
I love you Petra for this post. Thank you very much!.
Thanks!
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.
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 🙂
[…] 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 […]
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?
Hi, I stumbled upon this while I was Googling for exactly the same thing ! This saved my day, Thanks a lot for the help !
[…] 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 […]
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
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. 🙂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.
Thank you!!
Petra, let’s marry and have lots of children. You just saved me & my project.
Haha! Glad you’ve found it helpful! 🙂
I’m serious … dump your boyfriend and let’s elope to Bermuda.
Awesome, added to my Pocket!
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?
Thank you for the help. And in twitter only link is displaying, post will not aooear like facebook share??
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?
This made my life a billion times easier. Awesome!
hi
So amazing! Congratulations and Thanks so much! “Obrigado” from Brazil!
The font on this site is terrible.
Thank you so much. I used this code on my website. Making my own custom share buttons.
None of the Facebook options are working.
Does anyone know what the Skype share url would be? I am having a real tough time finding it.
Having no luck with the Tumblr one. 🙁
But otherwise, awesome.
Huge thank you Petra!