Talk to us today 0845 86 22 122

Blog.

13th August 2010 |  Written by Dave Ashworth

How To Set Up The New Twitter “Tweet This” Button on WordPress

The new official Tweet This button has been launched, though setting up wasn’t as straightforward as we thought it would be and there are still one or two issues for us.

Most people, I expect, will go here for the easiest way to get the code:

http://twitter.com/goodies/tweetbutton

Here, you can select:

  • Layout
  • Tweet Text (either the page title or something you decide on)
  • URL to tweet (the page the URL is on, or one of your choice)
  • Language
  • Recommend people to follow

And once you have done this, you are presented with the code you should implement on your web page – however, this is static code that won’t work correctly if you place it within the WordPress blog post layout.

For example, the code for taking the page title and URL you are on looks like:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="returnondigital">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

We found that placing this within each blog post in the index.php file means that when you visit, for example:

http://www.returnondigital.com/blog/

The Tweet now button within each post will actually tweet the above URL and page title “Digital Marketing Blog”.

Instead, the following iframe code can be used to get the permalink and correct page title:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo urlencode(get_permalink($post->ID)); ?>&via=returnondigital&text=<?php the_title(); ?>&count=horizontal" style="width:110px;height:20px;"></iframe>

The only issue that remains, which was also apparent with Tweetmeme, is that it doesn’t archive too far back when viewing details of who has tweeted the page.  For example, it tells us that 5 people Tweeted our recent blog post:

21-07-10: Google Looking Pretty In Pink
http://www.returnondigital.com/blog/google-looking-pretty-in-pink

But when we click for more details, there are none:

http://twitter.com/#search?q=http%3A%2F%2Fwww.returnondigital.com%2Fblog%2Fgoogle-looking-pretty-in-pink

Other than that, it’s good to go.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>