Look! The official Twitter tweet button is here! Get the official Twitter Tweet Code. Ah, but it’s not quite so straight forward for a WordPress site.
Twitter Tweet Button code generator makes life easy... but modification is required for WordPress sites.
Adding the official button to WordPress (like on this site) takes a little more. The code you get from using the Twitter generator I linked to above looks like this:
|
1 2 3 4 |
<a href="http://twitter.com/share" data-count="vertical" data-via="SEOHolistically">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
That works perfectly well for static pages. But the index page of a WordPress blog contains more than one blog post. Inserting the above code into your index page will only tweet the title of your index page and that url. We need to make some adjustments to the code….
|
1 2 3 4 5 6 7 |
<a href="http://twitter.com/share" data-count="vertical" <strong>data-via="SEOHolistically"</strong><strong><code> data-related=</code><code>"copyblogger"</code></strong><strong> data-url="<?php the_permalink(); ?>"</strong><strong> data-text="<?php the_title(); ?>"</strong>>Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
Lets take a look at these changes.
- data-via=”SEOholistically” was generated by the generator at stage two “Recommend People to Follow (optional). It will add in “via @SEOholistically” at the end of the tweet message, so don’t forget to change it to your own twitter account (not that I would mind if you didn’t).
- data-related=”copyblogger” I have just added in. It would be generated automatically if I had filled in the second field of the “Recommend People to Follow (optional)” section. Coppyblogger is nothing to do with me… but you should follow them anyway… good advice! Again, unless you want coppyblogger to be offered as a follow suggestion to everybody who uses the button, change it!
- data-url=”<?php the_permalink(); ?>” This is where we get into WordPress specific stuff. This tells twitter to take the url as being the individual blog post url rather than the page url.
- data-text=”<?php the_title(); ?>” This tells twitter to make the WordPress post title the content of the twitter post.
That is all there is to the code for the twitter tweet button if you are adding it to a WordPress blog.
So where do you put the Twitter code in WordPress?
You should add it to index.php and single.php. In this blog it looks like this (facebook button code removed for simplicity)
Single.php
|
1 2 3 4 5 6 7 8 |
<div class="entry"> <!--Twitter Tweet button--> <div style='width:100%;'> <a href="http://twitter.com/share" data-count="horizontal" data-via="SEOHolistically" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><!-- end width - 100% --> <!-- end tweet button --> |
… so just search for <div class=’entry’> and put it in directly below that.
index.php
Do exactly the same thing as for single.php.
Why use the official Twitter Tweet Button?
You could use Tweetmeme or some other button… but the official button has a big seller for me. Every time somebody uses it, it will offer up two suggestions of people to follow…. the two suggestions you provide using the data-via and data-related options. It makes it much easier to gain more followers. That can’t be a bad thing!
Pingback: Tweets that mention Official Twitter Tweet Button: Adding it to Wordpress » SEO Training -- Topsy.com