How to Put Social Media Buttons on a Tumblr Blog

An image of social media icons on computer keyboard keys.

Photo © pressureUA / Getty Images

 Anyone with a Tumblr account can share content with other users by pressing the Like button the, Reblog button or the Send button on a particular blog post within the Tumblr dashboard.

These built-in buttons allow you to share content within the virtual walls of the Tumblr network; however they don’t give you the flexibility of sharing content from a web-based Tumblr blog (sat BlogName.Tumblr.com) on any other major social media sites like Facebook, Twitter, Google+ or other places.

If you want to add additional share buttons to your Tumblr blog so that it looks like a real blog, you can either pay for a premium theme that comes equipped with buttons or do the work yourself by copying and pasting 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.

Don't worry, it's easier than you think. Here's how to do it.

01
of 07

Sign Up or Log Into Your Tumblr Account to Create or Access Your Blog

A screenshot of Tumblr.com.
Tumblr.com.

If you haven't already created a Tumblr blog or even signed up for an account, 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.

If you do already have an account and a blog, simply sign in.

02
of 07

Choose Your Social Media Buttons

A screenshot of Twitter.com.
Twitter.com.

Do a Google search for the social network share buttons you want to put on your Tumblr blog. Most (if not all) major social networks have dedicated help pages that show you how to set it up.

For your convenience, here are a few official share button pages for some of the most popular social networks:

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 will let you do this but for those that do, the snippet of code will change according to how you set it up.

Try to 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, but fewer is probably better.

03
of 07

Customize Your Buttons and Grab the Code

A screenshot of Twitter.com.
Twitter.com.

Follow the instructions on the social network's share button page to customize your button if needed. Once finished, you should be given a string of code that you'll need for your Tumblr blog.

Copy this and paste it into a blank word or text document. Do it for all the buttons you want so that you have each button's string of code ready to go.

04
of 07

Access Your Tumblr Theme Code

A screenshot of Tumblr.com.
Tumblr.com.

Go back to your Tumblr dashboard. Click the person icon in the top right menu and then click Edit appearance in the dropdown menu for the corresponding blog (if you have multiple blogs).

On the following page, click the Edit theme button. Your blog will open in preview mode on the right side of the screen with an editor to the left.

Click Edit HTML in the editor on the left underneath the Custom theme label. The editor will expand to show you all of your theme's code.

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, which you'll be shown how to do in the next sections.

05
of 07

Search Through Your Theme Code

A screenshot of Tumblr.com.
Tumblr.com.

The only line of code you need to find is the line that reads: {/block:Posts}.

This 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/Cmd+F keyboard shortcut or alternatively click the gear icon in the top left corner of the screen, click Find and replace and then type {/block:Posts} into the Search for field.

The search function will automatically find and highlight {/block:Posts} in your theme code.

06
of 07

Paste the Button Code into Your Theme Code

A screenshot of Tumblr.com.
Tumblr.com.

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.

Click Update Preview and then click the blue Save button at the top of the editor.

07
of 07

Test Your Tumblr Blog to See Your New Social Share Buttons

A screenshot of Tumblr.com.
Tumblr.com.

You've made it to the fun part. If you have correctly placed the button code inside your theme code, your Tumblr blog should display the share buttons of your choice at the bottom of each individual post and also on each post shown on the main feed.

You can 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.
  • Experiment with placing the code snippets for the social buttons before other {/block: elements too. Depending on your theme, you might notice that the buttons show up at the very bottom of the blog page, after all the notes from other Tumblr users.