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.

By: Ashish Gahlawat On Friday, January 09, 2015

Continue Reading