Easy Step To Add Twitter Follow Button in WordPress

Easy Step To Add Twitter Follow Button

You can go to the Follow Button page and generate a code for you. Or you can simply copy the code below:

1 <a href="http://twitter.com/wayansuwas" class="twitter-follow-button" data-show-count="true">Follow @wpbeginner
2 <script src="http://platform.twitter.com/widgets.js"type="text/javascript"></script>

Note: Make sure to change the username with your own.

If you are using the official tweet button, then you do not need to paste the script twice. So your code will look like this:

1 <a href="http://twitter.com/wayansuwas" class="twitter-follow-button" data-show-count="true">Follow @wpbeginner

Now you can paste the code anywhere you like in your WordPress theme. Most folks will put such code in their sidebar.php file. However, if you don’t feel comfortable editing a theme file, then you can utilize WordPress theme widgets as well. All good themes come with widget-ready sidebars. So all you would have to do is go to Appearence &raquo Widgets tab. Then add a text widget to your appropriate sidebar. Lastly, paste the code above, and you are done. Look in the screenshot below for the example:

Twitter Follow Button Widget

There is really no need to add a plugin to do something as simple as this.




This section is for designers and developers who want to customize this button further to match their site’s color scheme etc. Twitter lets you customize the button color, text color, link color, language, widget, and alignment of the plugin.

Available variables in the JavaScript version that we are using:

  • data-show-count (true or false)
  • data-button (blue or grey)
  • data-text-color (hex code)
  • data-link-color (hex code)
  • data-lang (en, fr, de, es) – uses the two letter ISO-639-1 language code
  • data-width – (300px)
  • data-align – (right)

If you want to specify it in the a code it would look something like this:

1 <a href="http://twitter.com/wayansuwas" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#ffa24f" data-show-count="true">Follow @wpbeginner</a>

All done.


Ayo sobat kasi komentarnya biar admin lebih semangat lagi buat ngasi tips menarik.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: