Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add the Tumblr Share Button in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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.

Tumblr Share Button in WordPress

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('http://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('http://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('http://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('http://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?


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Jason Li says:

    Thanks for laying that out nice and clean! Super helpful.

  2. Stephen says:

    ‘function my_scripts_method() {
    if (is_single() || wp_attachment_is_image()) {
    wp_deregister_script( ‘tumblr’ );
    wp_register_script( ‘tumblr’, ‘http://platform.tumblr.com/v1/share.js’);
    wp_enqueue_script( ‘tumblr’ );
    }
    }
    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);’

    I made an enqueue script that only loads for singles and attachment images.

  3. Iz Zulkarnain says:

    May I know, how to integrate Tumblr button with facebook like and tweet button? I want all three buttons shows in my blog as well. Thanks!

  4. rsny says:

    Hi

    You have missed Tumblr Photo button, after a small research I manage how to extract clean IMG src with the help of google:)
    Here is my small post how to install Tumblr Photo Share button on WordPress
    http://designcollector.net/tumblr-share-button-for-wordpress-with-photo/

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.