Twitter is a well known social networking & micro blogging website in virtual world. It allows users to post short messages on the website, which is also called as a “Tweets“. Many famous celebrities prefers twitter as a social platform for engaging with the virtual audience. Twitter popularity prompts users to follow each other on the website to stay updated with each other updates. However, this article also explains that how any start-up, small business, enterprise business or an individual can integrate and customize twitter follow button on their blog/website.
What is Twitter Follow Button
Twitter Follow Button is a small widget which allows users or developers to integrate Follow Button on his/her blog or website. With advance twitter API’s one can easily embed twitter follow button on their blog and website.
Work Flow of Twitter(Follow Button)
Twitter follow button is specially designed for entrepreneurs, small and big businesses and other individual’s who wants to integrate follow button to convert website visitors into their followers. For this, Follow Button follows two types of work flow such as:
a) Without Sign in: Users need to login into their account before following any user in this flow. A username and password dialog will be prompted by twitter, if user is not login into his/her account prior to following any user at twitter.
b) With Signed in: This work flow is very easy and simple to understand, as it allows any logged in twitter user to follow any individual at twitter.
How to add twitter follow button on website or blog
We can add twitter follow button in two ways such as:
i) With JavaScript
ii) With iFrame
First Way
i) Adding twitter follow button with JavaScript
This is the easiest way to add twitter follow button in any website or blog. In this method, we need to embed an html anchor tag with few required data attributes and a small predefined code of JavaScript. There are various properties associated with the follow button to complete its user interaction or its work flow. We can also customize follow button with these properties. So let’s understand few important properties, which we need to embed with our html anchor tag.
a) Show Screen Name:
This property shows user screen name(for eg: @87android) on the small widget. By default it is shown on small widget. We can also switch off screen name as per our requirement by assigning “false” value to “data-show-screen-name” attribute. For example: data-show-screen-name = “false”
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-lang="en">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore
(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
b) Followers count display:
This attribute displays followers count along-with the follow button. If we want to show followers count with the follow button, then we have to implement this feature with html anchor tag by using “data-show-count” attribute. By default it’s value is “false“. For example: data-show-count = “true”
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-lang="en">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
c) Language:
Twitter allows users to use various languages with this attribute such as: Korean(kr), French (fr), Italian(it), Spanish(es), English(en), Japanese(ja). We can use this attribute by using language code(en) with “lang” attribute. For example: data-lang = “en”
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
d) Button Size:
We can use this attribute to change the size of the follow widget. By default follow button renders in “medium” size. We can only assign ‘medium‘ and ‘large‘ value to this attribute. For example: data-size = “large”.
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
e) Align and Width of the follow widget:
With “data-align” attribute we can adjust the follow widget to the left or right of the page. For example: data-align = “left”.
We can also use “width” attribute to increase or decrease the width of the follow widget. For example: width = “500px”
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="true" data-lang="en" data-align = "left" width = "500px">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
f) Opt-Out:
Twitter buttons on the websites or blog helps us to tailor content and suggestions for twitter users. We can opt out from this feature by assigning “true” value to “data-dnt” attribute. For example: data-dnt = “true”
Sample Code:
<a href="https://twitter.com/87android" class="twitter-follow-button" data-show-count="false" data-lang="en" data-dnt = "true">Follow @87android</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Output:
Second Way
i) Adding twitter follow button with iFrame
We can also add twitter follow button with the help of iFrame. But for this, we need to use query string parameters for the http://platform.twitter.com/widgets/follow_button.html URL to configure the Follow Button behavior. For example:
Sample Code:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=87android& data-show-count="true" style="width:300px; height:20px;"></iframe>
Output:
We can use below mentioned attributes with iFrame such as:
| Attribute name | Query String parameter | Sample Example |
|---|---|---|
| Followers count display | screen_name | screen_name=87android |
| Language | lang | lang=en |
| Show Screen Name | show_screen_name | show_screen_name=true |
| Opt Out | dnt | dnt=true |
Note: Twitter changes its attributes and their behavior very frequently so readers are advised to stay updated with Twitter Follow Button API’s.
Uploaded by: Author