How to Add Twitter Share Button to Blog Posts? – Blogger Blogspot Guide

Twitter is very popular nowadays, and its popularity increasing day by day. You can sign up for Twitter to tweet what you have in your mind from your desktop or mobile app.

In this article, our objective is to add a Twitter share button to Blogger blog posts and pages. This button is also known as the Twitter tweet button, which helps blog audiences to share articles on their social media accounts.

Generally when you add the Twitter share button to a Blogger blog and have more than one post on the home page then it shares your home page rather than sharing an individual post.

How to add Twitter share button to a Blogger Blogspot blog

If you want to share the individual post from your home page and want to see the actual post sharing count on the home page, then you should have to do certain changes to the original Twitter share button code to get appropriate results.

How to Get the Original Twitter Share Button Code

You can get the default Twitter share button or tweet button code from Twitter Publish.

Access the page directly from the following link:
<a href="https://publish.twitter.com/?buttonType=TweetButton&amp;widget=Button" target="_blank" rel="noopener noreferrer">https://publish.twitter.com/?buttonType=TweetButton&amp;widget=Button</a>

Select Twitter share button to get the code

Click on the Share Button to get the code.

<a href='https://twitter.com/share' class='twitter-share-button' data-show-count='false' data-via='techprevue'>Tweet</a><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>

Customized Twitter Share Button Code

<a class='twitter-share-button' data-show-count='false' data-via='userid' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share' rel='canonical'>Tweet</a>

Important notes:

› Highlighted code in light yellow color above is an extra part added to default code to get complete our objective.

› Must change userid highlighted in green with your Twitter handle. For e.g. our twitter handle is @techprevue. So, we are using techprevue here. You need to use your Twitter handle.

› If you wish to display the share count, then the value of data-show-count should be true instead of false.

How to Add Twitter Share Button to Blogger Theme

1. Go to Blogger Dashboard › Select a blog › Switch to Theme tab

2. Click on the Customize button › Edit HTML

2. Now search the theme for <data:post.body/>

3. If you want to place the Twitter share button above the post then insert the given code above <data:post.body/> or if you want to place the Twitter share button below the post then insert the code below <data:post.body/>

4. Paste the following script just above </body> tag in your theme-

<script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>

OR

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>

5. Click on the floppy icon to save the changes

Final Words

After completing all steps explained above, you can find that the Twitter share button works perfectly for each post on your home page and show the count per post.

› Other important
Learn how to edit a Blogger theme

6 thoughts on “How to Add Twitter Share Button to Blog Posts? – Blogger Blogspot Guide”

  1. Excellent, you explained it so clearly that I could do it quickly, thanks. Now the Twitter tween button appears at the bottom of my post. Tell me, can it also appear on the sidebar, which will show total tweets. One more thing, my tweet button had been lying dead on the sidebar for a long. Will it show all the old tweets too?
    Thanks a lot, Vinay.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top