Skip to main content

How to add Twitter Follow button to your HTML website

hi, how are you today

Hi,hows u all? Earlier I shared How to add Google Search Tab to your HTML website and today I am going to share an mind blowing thing with you guys that I believe is definitely a requirement of a web developer or organization, to mention on website to increase the list of followers. Today I will show you how you can add a simple twitter follower button to your html site, so any one can follow you directly from your website.First I will share with you the code and after that will show you how to edit for different different looks of the button.

So I am going to share the code with pics and effects after editing too. What you have to do is simply copy and have to paste the code to the area where you want to show that button.

CODE of the TWITTER FOLLOW button
<a href="https://twitter.com/Er_Mandeep55" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Twitter</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


So guys you have to copy paste the above code directly to the area where you want to show the button for viewers, and it will give you the exac button shown in the image above but before that you have to edit a few things else your viewers will start follow me rather than you, he he!

Before proceeding for editing, let me inform you that editing will take place in first line only.

<a href="https://twitter.com/Er_Mandeep55" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Twitter</a>

First of all you have to edit your username. So above where I mentioned  "Er_Mandeep55", there you have to enter your username of twitter.

If you want to show your username on follow button :

<a href="https://twitter.com/Er_Mandeep55" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Twitter</a>


So here if you want to show your username on follow tab then simply change data-show-screen-name from false to true and button will look like as shown below

If you want to show your followers with follow button :

<a href="https://twitter.com/Er_Mandeep55" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Twitter</a>
So here if you want to show your followers with follow tab then simply change data-show-count
from false to true and data-show-screen-name from true to false and button will look like as shown below

If you want to show both :

<a href="https://twitter.com/Er_Mandeep55" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Twitter</a>


So here if you want to show both with follow tab then simply change data-show-count
from false to true and button will look like as shown below

So now its up to you what type of look you want to give to your follow button but do not forget to change my username with yours and then enjoy it and give a chance to your viewers to follow you directly.

Hope you all like this post and I wish this proves useful to you.
Keep sharing & give your views about post mentioned below the post.
Comments are always welcomed for better improvement.

Thanks :

Comments

Translate to your language

Popular posts from this blog

Different Stages of I2C communication

Different Stages Of I2C

How to import Pygame in pycharm

hi, how are you today

Working demonstration of UART communication using 2 8051 uController on Proteus with Embedded C code.

Here we are going to use 2 at89c51 uControllers just to understand UART communication in 8051.