October 29, 2011

Add Twitter Follow Button to Your Website

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.


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 BloggerElse 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>

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 :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Category, , , , , ,


* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

Muhammad Rafik Bakhtshiren said...

great posts.. thanks for sharing!