You may have engaged in many social networks to reach more users to stay connected and share interesting updates. Are you managing a blog or website? As you engage in social media and willing reach more users, promoting your content on social media is another way to gain more exposure to your content. Your readers will be much preferable to receive updates on social networks they are on and it helps them to stay connected with your site. When we talk about social media, Twitter is a popular social network and a place where users follow interesting fellows to receive updates. So if you have Twitter profile where you share updates, you can add link back to your Twitter profile on your site. So readers can view your profile and follow you after navigating to your profile. But isn't it nice if you can let interested users to follow you on Twitter without leaving your blog or website?
Yeah, Twitter offers set of plugins for their users to use on blogs or websites. The Follow button is one of popular plugins of Twitter. It allows site visitors to easily follow a Twitter account while they are exploring content on the site. So users don't need to leave your site and they can follow your account instantly. As it allows users to follow a Twitter account, it can display how many followers that Twitter account holds too. In addition, it supports customization options and you can customize the button to comply with your site background. Let's see how to customize and add Twitter Follow button.
Steps:
You just need to add below Twitter Follow button code snippet to your website where you want it to appear.
Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.
<a href="https://twitter.com/[Twitter Username]" class="twitter-follow-button" data-show-count="[Enable/Disable Count]" data-width="[Width]" data-align="[Alignment]" data-lang="[Language]" data-show-screen-name="[Enable/Disable Screen Name]" data-size="large">Follow @[Twitter Username]</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>
<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>
Color Indication Information
- Your Twitter Username
Add your exact Twitter username here without @ sign.
- Enable/Disable Followers Count
Set value true here if you need to show your followers count along with your Follow button. Else specify false.
- Button Width
Here you can specify width of the follow button in pixels or using percentage.
- Button Alignment
If you would like to align your Twitter Follow button to right, then specify right here. Else you can left align your button specifying left here.
- Enable/Disable Screen Name
You can either show your Twitter name on follow button by specifying true here or else specify false to add up no Twitter name.
- Button Size
Here this code snippet will display large Twitter follow button. Remove this parameter if you wanna show standard sized follow button.
- Twitter Script
If you have already implemented Twitter tweet button on your blog, you don't need to add up this script with this button. If so you better remove this code.
- Button Language
Twitter Follow button is available in few languages. Specify the language code of your preferred language you wanna use. The language code formed with two letters and displayed correspond to the each language below.
English - en
French - fr
German - de
Italian - it
Spanish - es
Korean - ko
Japanese - ja
Enjoy :-)
great posts.. thanks for sharing!