How to add Twitter Follow button to your Blog.

Recently I was just going through my website to check if there is anything missing, then I noticed I did not have an easy way for people to follow me us twitter. Also I did not have a widget even, so I decided to place a Twitter Follower button and a Tweet's widget.

Here is the screenshot of the "follow button" widget on my blog.

I searched for how to add "Twitter follow button " and found that this was very easy to do.

You can find more about Twitter widgets on Developers page.
The Follow button is a small widget which allow user to follow a twitter account from any page.
Below is the code you can use to show different follow buttons.

To add Twitter follow button to your blog , just follow the given steps :

• Go to blogger Dashboard then go to Template and click on Edit HTML.
• Just paste these given codes anywhere in your coding where your wanna display the Follow button. 

FOLLOW BUTTON WITH COUNT : 

<a href="https://twitter.com/Hackersfall"
class="twitter-follow-button"
data-show-count="true"
data-size="large">Follow @Hackersfall</a>
<script>!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>

If you dont want to Display follow Counts then just change

data-show-count="true"...... to .....data-show-count="false"

<a href="https://twitter.com/Hackersfall"
class="twitter-follow-button"
data-show-count="false"
data-size="large">Follow @Hackersfall</a>
<script>
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id))
{
js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>

Configure your Follow Button : 
Just change Hackersfall to your Twitter username.

There are some properties which allow you to configure the Follow Button and display. Use data-attributes for the Javascript version:

Followers count display : data-show-count
Language : data-lang
Width : data-width
Alignment : data-align
Size : data-size

If you have any queries related to any of our post, you can comment below or contact us here.

For more tips and tricks and more, follow us onFacebook , Twitter andG+.

Thank you , Keep visiting Hackersfall.

Browse More Articles

Tweet

Written by Ashish Gahlawat

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.