For those of you that follow me, you are probably already know that I recently redesigned my post footer. For those that don’t know a post footer is the area just below this post with the “Share It!” and “Related Post” sections. I took it on myself to create a completely custom footer area with share links to many of the popular social services available today. I like my blog to be different from the other gazillion out there, so I choose to minimize my plugin use and create custom solutions.
Most of the popular social service out there offer pre-made javascript buttons that allow you share your pages or articles on their service. While this does make it easy, there is one problem with using their code generating methods; you are stuck with their styles and icons. I wanted to use a custom style with a different set of icons. To accomplish this, I had to take advantage of the services various “URL” submission methods. All the services offer this method, but most of them are poorly documented and are hard to find details on. After spending hours browsing the web for the various “URL” submission methods, I decided that once I finished I would post them all together in one place so people can easily find them and create their own custom share buttons.
Below, I am going to offer you the various services URL’s and teach you how to use them on your site.
http://twitter.com/home?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]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]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]Those are the URL's you need to know, now, I know some of you are say what do I do with them? These are the URL you link your social icons too. Replace [TITLE] with the title of the page or article. Replace [URL] with the link back to the page or article. Both of these values need to be URL in encoded for the submissions to process correctly. If you are using php, you can easily URL encode anything with:
<?PHP echo urlencode("VARIBLE"); ?>If you are using WordPress, you can easily substitue the [URL] and [TITLE] values with WordPress codex functions. Below is the code you can use to replace the [TITLE] value:
<?php print(urlencode(the_title())); ?>Now, the the code to replace the [URL] value:
<?php print(urlencode(get_permalink())); ?>Now, lets take a look at it all put together for a general page with a "Share on Twitter" button:
<a href="http://twitter.com/home?status=This is the blog title.+http%3A%2F%2Fatlchris.com%2F1656%2Flink-to-page">
<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
</a>Now, a wordpress example. This example substitutes the [TITLE] and [URL] values automatically with the current articles information with URL encoding:
<a href="http://twitter.com/home?status=<?php print(urlencode(get_permalink())); ?>+<?php print(urlencode(the_title())); ?>">
<img src="http://atlchris.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" />
</a>I hope this helps to you create your very own custom share buttons. If you have any questions, please ask them below and I will answer them to the best of my ability. If I missed a service that you would like me to add, please leave a comment below.