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.
<a href="https://twitter.com/RivalsHub"
class="twitter-follow-button"
data-show-count="true"
data-size="large">Follow @RivalsHub</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/RivalsHub"
class="twitter-follow-button"
data-show-count="false"
data-size="large">Follow @RivalsHub</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 RivalsHub 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:
Thank you for your support.
Followers count display : data-show-count
Language : data-lang
Width : data-width
Alignment : data-align
Size : data-size
Thank you for your support.
If you have any queries related to any of our post, you can comment below or contact us here.
We will be happy to assist you.
Post a Comment