Browse By

[How to] Add Twitter's Official Tweet Button on WordPress Blogs

Twitter, a Social Networking and micro-blogging service, owned and operated by Twitter Inc., has finally taken one more step ahead by introducing its new feature. Twitter introduced much awaited official Tweet button earlier today and almost all famous bloggers have added. We can say “a 5 year old Twitter gave birth to Tweet button today”:-P

Earlier today readwriteweb wrote “The button has gone live on a number of major websites, including entire the entire WordPress blogging network, sharing widget ShareThis and YouTube, and the company expects that “more than a few sites will join the above in the hours to come.”

Tech Tip: Twitter is in partnership with Tweetmeme, the company responsible for the majority of retweet buttons on the Web for the past year and a half.

Today I am going to tell you how to add Twitter’s official Tweet button on WordPress . WordPress, a major blogging platform has two kinds of blogs:

  1. Self-Hosted blogs : These are the blogs which must be installed and maintained separately in your own server through your Web Hosting.
  2. Free-Hosted blogs: These blogs are hosted and maintained by WordPress itself and can be created at WordPress.com

1. Browse to Twitter’s Tweet button page

2. There are 3 display options among which you have to chose one as shown below

3. After choosing the preferred button , move to the next option that is the “Recommended people to Follow

As you can see above there are two fields and surprisingly  both should be filled with twitter user id’s.

The 1st field must have twitter id which will be mentioned in the tweet and the 2nd field needs to be filled with another twitter id of whom you would recommend  to twitter users to follow after they have share the tweet with few words of description.

To understand this much better have a look at below image :

4. After filling the twitter id fields , now move towards the next option where we can see the preview of the button and the code as well.

5. Copy the code which is shown in the previous image.

6. Now go to your WordPress Dashboard->Appearance->Editor-> Select single.php file and paste the below code as shown below :

  • Search for “<div class=”entry content>” [without quotes] within the single.php file and paste the copied code

7. Finally you could see a Tweet Share button exactly below the Post-title and above the post content.

One of our techie friend “Harsh Agarwal” has explained how to add Twitter Share Button to free WordPress Blogs.

Have a check here =>Free WordPress.com blogs added Tweet Button

You can also have a look at this below by Twitter which demonstrates the use of Twitter’s Tweet Button

=====================================================

So friends how did you like our tutorial ? 🙂 Share it with others if you like it and do comment If you get stuck anywhere 🙂

Happy Blogging 🙂 Thanks for reading 😀

Advertisements

15 thoughts on “[How to] Add Twitter's Official Tweet Button on WordPress Blogs”

  1. Pablo Lara H says:

    Thank you for the sharing Sunil.

  2. bloggcandy says:

    this only shows twitterbutton on postpage and not on homepage and if i add this code on index.php in post it will only tweet homepage link and not post link

    1. CoderPlus says:

      yes, you will need to further edit the code for that to work on non-post pages. Or you can use my plugin which will auto insert the button on all your blog posts(or manually as per your requirements) – http://coderplus.com/2010/08/twitter-tweet-button

    2. Bishwajeet says:

      If you want to add Twitter Button on homepage for your blog in the post is tweeted check this, I have written about it on my blog "how to add official twitter button on wordpress blogger homepage"

  3. Jay Philips says:

    I don't see why someone would want to switch from the Tweetmeme button to this? Or do you recommend someone using both?

  4. Ygam Retuta says:

    Cool! It's nice to see that there's an immediate topic on this knowing that the official Twitter button just came out a few hours ago. Thanks a lot!

  5. Mani Viswanathan says:

    Awesome tutorial. A newbie will understand better with these pics. 🙂

  6. Rahul says:

    I found this tutorial better than the one provided on mashable 🙂 good work and keep it up 🙂

  7. Tecrux says:

    Thanks for the detailed tutorial. The new button looks like a good replacement for tweetmeme.

  8. Tuan says:

    Great, thanks you for this article

  9. Alvin Lim says:

    Great tutorial. The official Twitter button is nice. Going to add this later 🙂

    Notice that there is mysql_connect() error message after the twitter button at the right floating bar of your blog.

  10. Gojeg says:

    This tweet button is so nice, and also easy to embed on popular blogging platforms.

  11. Vishal Gaba says:

    Will install this right away…thanks man 🙂

  12. Tanmay says:

    Nice tutorial buddy. Thanks for sharing

  13. raybak says:

    Hi Sunil, can you please let me know what widget you are using for subscription (Newsltter, FB, Twitter?).

Leave a Reply