How to Add the Tumblr Share Button in WordPress
Just like Facebook’s Like Button, Send Button, Twitter’s Retweet Button, LinkedIn’s Share Button, Tumblr, a micro-blogging service, has launched their very own share button. The whole point of this button is to make it effortless for more than 16 million Tumblr bloggers to promote your content on their blogs. This share widget lets Tumblr users easily “Reblog” the content found all over the web rather than just on Tumblr. This reblog option is one of the key features behind the huge social aspect of Tumblr. In this article, we will show you how to add the Tumblr Share Button in WordPress.
Previously, when we wrote about WordPress Post Formats that added micro-blogging functionalities into WordPress, we further elaborated on how this can actually allow WordPress to replace Tumblr for those users who want more control. We were bashed by email from various users saying “WordPress doesn’t let you have the social aspect that Tumblr does because it has a community of bloggers re-blogging your thing”. Well, now you can have that feature in your WordPress posts.
First open up your footer.php file, and paste this code right above the </body> tag:
<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>
If you are using a framework, and you do not have access to the footer.php file, then add this code in your functions.php file or custom functions area:
function insert_tumblr_script() { echo '<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>'; } add_action('wp_footer', 'insert_tumblr_script');
Once you have done that, lets take a look at how you can add the code inside your posts:
Basic Version
To add the very basic version of the script which will suffice for most users, all you have to do is paste this code where you want in your loop which can be found in (single.php, index.php, page.php, loop.php etc):
<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>
You can have various versions of the share image which can be found on the official Tumblr Button page. You can basically select the image you want, and then paste the code from the basics. Alternatively, you can also put your own image for the share by replacing the background: css in the code above.
Advanced Customization
Now as you know with the use of WordPress Post Formats, we are now seeing releases of Micro-Blogging Themes for WordPress. Well, in the basic version for Tumblr button that we discussed above, it pulls the content dynamically. This may cause errors like wrong title appearing, wrong description etc. Also in the basic version, it doesn’t pick the format (link, text, image, quote, video etc) for the Tumblr blogger unlike the Re-Blog function that is used in the Tumblr community.
So the Tumblr share button made sure to built-in advanced functionalities that lets you specify the format of your post by default, specify the pre-filled description, a specific pull quote (complete with attribution) and even specific paragraphs from an article page. So here is an example of how you will add in your loop.php file utilizing the post formats in WordPress:
if ( has_post_format( 'link' ) { ?> <a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&name=<?php echo urlencode(get_the_title()) ?>&description=<?php echo urlencode(the_excerpt()) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a> <?php } else if (has_post_format('quote')) { ?> <a href="http://www.tumblr.com/share/quote?quote=<?php echo urlencode(get_the_content()) ?>&source=<?php echo urlencode(get_the_title()) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a> <?php }else { <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a> }
To read more about Customizations refer to the Official Tumblr Button Page.
Will you be adding this button in your WordPress site?
