How to Put Social Media Buttons on a Tumblr Blog

1
Sign Up to Create a Tumblr Blog

Sign Up for Tumblr
Sign Up for Tumblr. Photo © Tumblr

If you haven't already created a Tumblr blog, the very first thing you need to do is visit Tumblr.com where you will be asked to enter your email address, password and desired blog URL to get started.

Anyone with a Tumblr account can share content with other users by pressing the “Like” button or the “Reblog” button on a particular blog post. These built-in buttons allow anyone to share content within the virtual walls of the Tumblr network; however they don’t give you the flexibility of sharing content on any other major social media sites like Facebook, Twitter, Google+ or StumbleUpon.

If you want to add additional share buttons to your Tumblr blog, you need to copy and paste some code into your Tumblr blog template. Adding just one strip of code in the right section of your theme’s HTML documents will automatically place social media buttons under each previously published blog post and all future blog posts.

2
Choose Your Social Media Buttons

Social Media Buttons
Social Media Buttons. Photo © iStockPhoto

The most common social media buttons to place on a blog include the Facebook “Like” button and the official Twitter “Tweet” button, but you can also include others like the Digg button, the Reddit button, the StumbleUpon button, the Google+ button, the Delicious button or any other social media buttons of your choice.

Refrain from including too many buttons on your blog since it could cause the appearance of your posts to look cluttered and confusing for readers who may want to share your content. Consider placing a maximum of five or six social media buttons beneath each blog post.

3
Find and Customize the Code for Each Button

Twitter Code
Twitter Code. Photo © Twitter

Most social networks have a particular page dedicated to showing their users how to install and customize their own share button on a blog or website. If you have trouble finding what you’re looking for, try typing “[social network name] button code” into your preferred search engine to locate it and replace [social network name] with the name of the site. For instance, by searching for “Twitter button code,” one of the first results to pop up should be the official Tweet button page from the Twitter website.

Some social networks will allow you to make customizations to their buttons, including alterations of the button size, additional title text, URL structure, share count option and language settings. Not all social networks include customizable button creation but for those that do, the snippet of code will change according to how you set it up.

4
Access Your Tumblr Theme Documents

Tumblr Theme Documents
Tumblr Theme Documents. Photo © Tumblr

On the Tumblr dashboard, there is an option in the header named “Theme,” which displays the theme code when you click to open it. If you don't see a bunch of code displayed right away after clicking on it, click the "Use Custom HTML" button at the bottom of the window.

Individuals who are inexperienced in working with HTML, PHP, JavaScript and other computer code may feel intimidated by looking at this section. The important thing to remember is that you won’t be writing any new code at all. All you have to do is place the button code inside the theme documents.

5
Search Through the Theme Documents

Tumblr Theme Code
Tumblr Theme Code. Photo © Tumblr

The only line of code you need to find is the line that reads: {/block:Posts}, which represents the end of the blog post and can usually be found near the bottom section of the theme documents, depending on which Tumblr theme you are using. If you have difficulty finding this line of code just by browsing through it, you can try to use the Ctrl+F finder function.

Press the Control button and the letter “F” button on your keyboard at the same time to bring up the finder input. Enter “{/block:Posts}” and hit search to quickly locate the line of code.

6
Paste the Button Code into the Theme Documents

Twitter Code
Twitter Code. Photo © Twitter

Copy the customized button code you created and paste it directly before the line of code that reads:

{/block:Posts}

. This tells the blog theme to display the social media buttons at the bottom of every single blog post.

7
Test Your Tumblr Blog

Tumblr with Social Media Buttons
Tumblr with Social Media Buttons. Photo © Tumblr

You've made it to the fun part. If you have correctly placed the button code inside your theme documents, your Tumblr blog should display the share buttons of your choice at the bottom of each individual post. Click on them to easily share your Tumblr posts on other social media networks.

Tips:

  • Paste the button code inside your theme documents every time you change your blog theme to a brand new theme. Changing the theme will not transfer previously pasted code into the new theme documents.
  • When placing more than one social media button on your blog, make sure that there are no spaces or new lines between two different snippets of button code. This will ensure that multiple buttons are displayed horizontally beside one another as opposed to being displayed vertically on different lines.