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]
http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]
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]
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:
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:
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.