How to Add Tweet and Facebook Like Buttons to Tumblr
The Twitter "Tweet" button and the Facebook "Like" button are simple pieces of code that make it easy for your readers to share content from your Tumblr blog on their preferred social network with a single mouse click. By default, the code for both buttons is not optimized for Tumblr -- but you can easily update the code to ensure that the correct post title and Web address are passed though to Twitter or Facebook when the button is used.
Other People Are Reading
Instructions
-
Tweet Button
-
1
Navigate to twitter.com/about and click "Tweet Button" in the "Resources" section.
-
2
Select your preferred Tweet button orientation by clicking the appropriate radio button in the "Button" tab.
-
-
3
Select the "Tweet Text" tab and click the radio button beside "Enter some other text." Type "{Title}" in the text box.
-
4
Select the "URL" tab and click the radio button beside "Enter another URL." Type "{permalink}" in the text box.
-
5
Copy the HTML code from the Tweet button text box.
-
6
Navigate to tumblr.com and sign in to your account. If you have multiple Tumblr blogs, select the blog on which you want to add a Tweet button.
-
7
Click "Customize Appearance."
-
8
Select the "Theme" tab and then click "Use Custom HTML."
-
9
Paste the HTML code after the "{block:Posts}" tag but before the "{block:Text}" tag. Click "Update Preview" to view a preview of your blog before publishing the changes and modify the placement of the Tweet button as needed.
-
10
Click "Save + Close."
Facebook Like Button
-
11
Navigate to developers.facebook.com and click "Like Button" in the "Build for Websites" section.
-
12
Type "{permalink}" in the "URL to Like" text box.
-
13
Customize the appearance of your Facebook Like button including layout, width, color, font and verb choice.
-
14
Click "Get Code."
-
15
Copy the HTML code from the "Like button" text box.
-
16
Navigate to Tumblr and sign in to your account. If you have multiple Tumblr blogs, select the blog on which you want to add a Tweet button.
-
17
Click "Customize Appearance."
-
18
Select the "Theme" tab and then click "Use Custom HTML."
-
19
Paste the HTML code after the "{block:Posts}" tag but before the "{block:Text}" tag. Click "Update Preview" to view a preview of your blog before publishing the changes and modify the placement of the Tweet button as needed.
-
20
Add "<meta property="og:title" content="{block:PostTitle}{PostTitle}{/block:PostTitle}"/> <meta property="og:site_name" content="{Title}"/>" before the "</head>" tag. Click "Update Preview" to preview your blog before publishing the updated theme and adjust the location of the Facebook Like button as needed.
-
21
Click "Save + Close."
-
1
