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.
Below, I am going to offer you the various services URL’s and teach you how to use them on your site.
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]
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.