How to Add Official Tweet Button to Blog

How to add Tweet Button on Blogger blog?
How to add Tweet Button on Blogspot blog?
How to add official Tweet Button on Blogger blog?
How to add official Tweet Button on Blogspot blog?

You want to add the official Tweet Button at the end (or at the top) of each of your blog post, here's how.


Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Tweet Button.

<div style='align:left;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='simpleblogrtips' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </div>

Take note that the code is different from the code generated on Twitter Tweet Button page because it is modified for better performance.

---

Where to add Tweet Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Tweet Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Tweet Button?

1) To change button style, change "horizontal" to "vertical" or "none".


vertical


horizontal


none

2) To change via Twitter account, change "simpleblogrtips" to your preferred Twitter account.

That's all for now!

Tweet