Add a Twitter Tab on Tumblr
Tumblr and Twitter are two great ways to share your thoughts and content with a large network of people. Using tools available on Twitter, you can integrate the two so that viewers of your Tumblr page can easily share your content on Twitter. Read on to learn how.
Steps
- Sign in to both your Tumblr and Twitter accounts in separate tabs.
- Go to the "Tweet Button" code site at Twitter.com. You can do this by clicking Resources > Buttons on the Twitter homepage or simply by clicking here.
- Choose which Twitter button you want on your Tumblr page. You can choose from 4 different options. It is possible to have all 4 buttons on your page, but you must add the buttons separately, as they each require a different code.
- Share a link lets users easily send a tweet to their followers with a link to your Tumblr.
- Follow lets visitors to your Tumblr page easily follow your Twitter.
- Hashtag prompts users to compose a tweet that includes the hashtag of your choosing.
- Mention prompts users to tweet at you.
- Customize your button options. After you choose what type of button you want to embed on your Tumblr, you have a number of different options for customizing your button. You can change both the appearance of the button and the content of the tweet that will be created when someone clicks on your button.
- Preview your button options. When you edit the options that change the appearance of your button, the changes will automatically be previewed under "Preview and code". In order to see the results of your edits to the content options, click on the sample button. A tweet box will appear showing what users will see when they click your button.
- Copy the HTML code for your button. This unique HTML code appears in the box under the sample button and changes every time you edit one of the options. So copy this only after you are finished customizing.
- Click "Customize theme" on your Tumblr page. There is an icon of a wrench next to it. If you cannot find the button, this is a direct link.
- Click "Edit HTML" in the sidebar on the following page. In the sidebar, you will now see the HTML text for your Tumblr page.
- Scroll down until you find "<body>". This may be several hundred lines down. You can press Ctrl+f or Cmnd+f to find it quickly.
- Paste the HTML code for your button. You must paste the code between "<body>" and "</body>" in order for the button to show up on your page. If you want the button to appear at the top of your page, paste the code right after "<body>". If you want it near the bottom, paste the code near the bottom, close to "</body>".
- Press the "Preview" button to see where you have placed the Twitter button/tab.
- After you have inserted any buttons that you want to, click "Appearance" at the top of the sidebar. This will take you back to the "Theme" sidebar. Click "Save" and then "Close". Go to your blog to see your buttons in action.
Tips
- To add a Twitter tab to a particular post, paste the post's URL in the Twitter Buttons page. This will generate the code you need. Return and edit your post. Click "HTML" in the post formatting bar. This page will be very similar to the HTML code for your theme. Follow similar instructions as you did to post the Twitter tab to your page. Look for the code that starts with "<body>" again and paste the button code either near the start or end of the code, before "body\" which signals the end of the code.
Related Articles
- Add a Bio on Tumblr
- Add Tumblr to Wordpress
