How to Integrate official tweet button to wordpress (no plugin)?

Posted on by
 

Few hours ago, @twitter has officially released their brand new tweet button for content publishers to share their content through twitter. @TweetMeme has Retweet button integration with a number of blogging platform which was also used previously in this website. Now codereflect.com is integrated with brand new tweet button to share the content.

image

Twitter supports 3 different kind of buttons so far which contains a tweet button and also a retweet count linked to a twitter search page, which can display the reteweets on this same URL.

The steps for creating the reteweet button is quite easy. With simple 3 steps your retweet button will be ready.

Head to http://twitter.com/tweetbutton

Choose your button type

image

The biggest advantage of twitter share option is, you can add a set of twitter account suggest to follow.

image

You’re done.

Now You’ve created a typical button for your website. But now let’s see how to integrate this to wordpress. The default tweet button can’t work with the dynamic post contents in the blog. But it has options to specify the felids to control all parameters associated with the tweet button and share window eventually appears on clicking it.

Head to Developer page to get more information about tweet button http://dev.twitter.com/pages/tweet_button

Here I’m talking about the javascript version of the tweet button. The parameters which can be passed to script are listed below

Data Source

Share query string

data- attribute of anchor tag

rel= attribute of a link tag

Default

Priority

1

2

3

4

URL to Tweet

url

data-url

rel="canonical"

HTTP Referrer

via user

via

data-via

rel="me"

  

Tweet text

text

data-text

  

Content of the <title> tag

Recommended accounts

related

data-related

    

Count box position

count

data-count

  

horizontal

Language

lang

data-lang

  

en

In addition to the default button HTML code generated, we may have to add some more parameters to enable it in wordpress hosted blog

Modify Index.php from Appearance->Editor option

image

Copy the generated HTML code between the iteration to display the post. The screenshot is attached above. You may have to add data-url and data-text parameter to enable tweet button specfically for each post in the blog post. You can simply call the php call to get the title and and link the URL

Modify the Singlepost.php from Apperance->Editor Menu

image

This is also done in the same fashion for PHP.

Finally the share window appear as follows. 

image

I’m not covered all the parameters listed for the tweet option. Please check the documentation it’s simple as it’s. There may be a better way for doing these things. I’m not an expert web programmer. Please share if you’ve any comments. Hope you enjoy this

 
  • http://0xtc.com/ Tanin

    Here’s the WP Tweet Button plugin. http://bit.ly/bwWzvq

  • http://www.facebook.com/csarath Sarath Nair

    Thanks buddy. This is really flexible. I’ve upgraded my theme yesterday but I found it’s hard to edit because the theme doesn’t follow the standard simple way of doing it. So it was a bit hard to convert the script code to PHP code and embed in it. I found another plugins too but this seems really flexible. Once again thanks

  • http://pagerankcaffeine.com/ increase Google pagerank

    Twitter is a great place for marketing if your a business. It allows you to keep in touch with all of your clients as well as make new ones. We have used Twitter since it first came out and we are glad we did.

  • http://twitter.com/rageshctech Ragesh C

    Cool post! They also implemented a quick integration of Tweet Button for WordPress.com!