May 1, 2012

Published on with


[Add Twitter buttons into blog, twitter buttons for website, twitter for marketing, twitter for personal development, twitter for networking, twitter for business, guide to add twitter button, twitter share button for blog]

Purpose of this Tutorial

Twitter is a social networking and micro blogging service which has currently 140 millions of users who generates 300+ millions of tweets (that's what a post on twitter is called) everyday together with more than one billion of search query.With this many of users, surely it is a place where blog writers can find and eventually gain a group of loyal reader for their blog posts. If you have a group of "followers" in Twitter, then all you need is a Twitter button in your blog so that your followers can follow your blog/post on twitter.

In this "how to" post, I will guide you to put your very own and customized twitter button into your blog or website. 

Intended Reader of This Guide

This post is for those persons who want to know how to insert customized Twitter icons for their blogs or websites. If you have already created your customized twitter button, then you would like to check the "Recommended Readings to Gain from Twitter" section below.

Various Tweet Buttons

There are 4 different types of twitter buttons that you can use to be appeared in your blog or site. They are:
  • Share button
  • Follow button
  • Hashtag button
  • Mention button

How to Add Twitter Buttons to Blog/Website

Now we are in the main business! To add twitter button to your blog or website you need only 2 main steps to follow:

1.  HTML Codes for Different Buttons

First step is to get the HTML codes for your desired buttons. Following I tabled 4 above-mentioned twitter buttons' HTML codes and their previews with user as me.

NOTE

Replace YOUR_TWITTER_USERNAME string
in the codes with your real twitter username.

1.1  Share Button

Preview


HTML code

<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check it out and let me know your comment" data-via="YOUR_TWITTER_USERNAME" data-size="large" data-hashtags="blog,guide,tips">Tweet</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>

1.2  Follow Button

Preview


HTML Code

<a href="https://twitter.com/YOUR_TWITTER_USERNAME" class="twitter-follow-button" data-show-count="false">Follow @YOUR_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>

1.3  Hashtag Button

Preview



HTML Code

<a href="https://twitter.com/intent/tweet?button_hashtag=TwitterStories" class="twitter-hashtag-button" data-related="YOUR_TWITTER_USERNAME">Tweet #TwitterStories</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.insYOUR_TWITTER_USERNAMEertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

1.4  Mention Button

Preview


HTML Code

<a href="https://twitter.com/intent/tweet?screen_name=YOUR_TWITTER_USERNAME" class="twitter-mention-button" data-related="YOUR_TWITTER_USERNAME">Tweet to @YOUR_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>


2.  Copy-Paste the desired HTML Code/s in HTML Gadget 

Now as you have decided which button you want to use, follow the following steps to integrate the button/s:
  • Copy the HTML code/s from any of the above table/s.
  • Go to your blog/website.
  • From design option, add a HTML gadget.
  • Paste the copied code into the gadget body.
  • Save the configuration and exit.
 You Are Ready for Tweets

Your blog or site now should have your chosen Twitter button. Obviously there are always other ways to integrate twitter buttons in you sites, but I just wanted to show you one of the easiest methods to do it. Now you're ready to do tweeting from your blog directly and share your posts to your followers.

Few Tips Reading on How Twitter Can Be Road To Your Success

Do you know social media like Twitter can be the most powerful business and personal networking platform, if used in proper way. Remember, you have 140 characters to get attention of people from a single tweet. Therefore you really need to learn and know the best marketing strategy needed to be used in Twitter. 

Connect Me via Twitter

You can always connect with me in Twitter, just press the follow button ->

If you find this post useful and informative, why not to share and like. I would also be glad to know if you have any comments or any problem integrating twitter button the way I have mentioned.

0 comments:

Post a Comment