Template Faerie

Add-on: Easy Tweet Box for Your Blog Posts

Published on Friday, May 13, 2011
By Sarah Payne
I'm always looking for interesting ways to encourage retweets on my articles, and when I saw Ana's How to Entice Your Readers to Retweet Your Content article on Traffic Generation Cafe, I loved the idea for the tweet box. But, I was disappointed when I discovered that it was a Wordpress plugin, so I set to work on figuring out how the same could be done with Blogger. If you're a Wordpress user, head over to Ana's blog—but if you use Blogger, here's how you can add a tweet box to your blog.
tweet box preview

The first tutorial I came across on how to add the tweet box to Blogger was on Blogger Plugins, which automatically retrieves the post title and URL and inserts it into the text box. But this causes problems when the title and URL are longer than 140 characters.

I use a different technique, which gives you control over the tweet box title and text. The disadvantage is that unlike the add-on on Blogger Plugins, you have to add it to each post. Fortunately, there's an easy way to do this, which I'll explain later.

Step 1

Register an @Anywhere Application for your blog. If you have no idea what that is, why you should do it, and how to do it, don't worry. Just fill in your blog's information, like I have for my blog in the preview below. Be sure to select "Read & Write".

@Anywhere Application preview

Step 2

Once you register your application, you'll be given some javascript code. For the tweet box, you only need the first script, as shown below.

tweet box javascript

Step 3

Under the Design tab in your Blogger dashboard, click on Edit HTML. Using your browser's search function (command + F for Macs, or control + F for PCs) search for </head> in your blog's template code.

Directly above that, paste your javascript code. It should look something like this now:

tweet box javascript

Obviously, you'll need to save your template.

Step 4

Below is the code that you need for the tweet box. Just copy and paste it directly into your post.

<div id='bp_tweetBox'>
</div>
<script type='text/javascript'>
twttr.anywhere(function (T) {
T("#bp_tweetBox").tweetBox({
width: 560,
label: "Tweet Box Title",
defaultContent: "RT @TemplateFaerie Your Post Title http://bit.ly/jQtXt2"
});
});
</script>

A few tips

  • Depending on how wide your blog is, you may want to change the width of the text box to a more suitable size.

  • The label is the caption that appears over the top of the text box. Be sure to choose something catchy that will encourage readers to retweet your post.

  • The defaultContent is the text that will be tweeted. Change it to include your Twitter username, and your post title and URL. Obviously, you'll need to publish your post before you know your URL. Use bit.ly, or any other site you prefer, to shorten your link, then edit your post and add the URL to your tweet box.

  • It can be a hassle to add the tweet box code every time you create a post. So, instead of wasting time, just head over to your blog's Settings tab and click on the Formatting section. At the bottom of the page, you'll find the Post Template. Paste your tweet box code in this text box, and it will automatically be added to all new posts you create, saving you the time of adding it manually.

Adding a tweet box to your blog posts is a great way to encourage your readers to retweet, because it grabs their attention, and it's easy to use. What do you think of this idea? How well is it working for you?

By the way, if you need any help installing it, let me know!

About the Author

I'm Sarah Payne, the author of this blog. I'm an amateur writer and template designer, an avid Blogger-user, and a reptile lover. One way or another, I ended up creating TF to show people that blogs don't have to be ugly and to share my unavoidably opinionated rants. You can also find me on Twitter and Google+.