How to Add Official X (Twitter) Follow Button to Blogger

Adding an official X (Twitter) Follow Button to your Blogger site is a quick way to let visitors follow you with one click. It helps you grow your followers and stay connected with your audience. In this guide I will show you how to add the button directly to your blog.

---

Copy and Paste This Code

Here is the code you need. Replace YourHandle with your actual X/Twitter username (without the @ sign).

<a href="https://twitter.com/YourHandle"
   class="twitter-follow-button"
   data-show-screen-name="true"
   data-show-count="false"
   data-size="large">
  Follow @YourHandle
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Tip: You only need the script line once per page. If your template already has it, you can remove the last line.

Note: This follow button code is not limited to Blogger. You can also use the same code on any other website, such as WordPress, static HTML pages, or custom CMS platforms. Just paste it into your site’s HTML and it will work the same way.

---

Method A: Add the Button with a Gadget

1. Log in to Blogger and go to Layout.
2. Click Add a Gadget → HTML/JavaScript.
3. Paste the code shown above.
4. Click Save.

The button will now appear in the sidebar, footer or any gadget area you choose.

---

Method B: Add the Button in Your Theme

Important: Make a backup of your theme first (Theme → Backup). Blogger templates can be different, so check carefully before editing.

1. Go to Theme → Edit HTML.
2. Search for <b:includable id='post' var='post'>. Inside this block you will see <data:post.body/>.
3. Paste the same follow button code just before <data:post.body/>.

This will make the button appear at the top of every blog post.

If you want the button to be aligned to the right, wrap it with a simple <div> like this:

<div style="float:right; margin:6px 0 10px 10px;">
  <!-- Follow button code goes here -->
</div>

---

Customize the Button

• Show or hide username: Change data-show-screen-name to true or false.
• Show or hide follower count: Change data-show-count to true or false.
• Button size: Add data-size="large" for a bigger button or remove it for the default size.
• Position: Use a wrapper <div> and add CSS such as float:right; or margin.

---

Fixing Common Problems

• Button shows only as a link: Make sure the script line is included once per page: <script async src="https://platform.twitter.com/widgets.js"></script>
• Button does not appear in posts: Check that you pasted the code inside <b:includable id='post' var='post'> and before <data:post.body/>.
• Button loads twice: Remove extra copies of the script so only one remains.
• Wrong account: Double check that you replaced YourHandle with your own username.

---

That’s it. Now your Blogger site has a working X (Twitter) Follow Button and visitors can follow you instantly. Happy blogging!