How to Customize the Twitter Tweet Button for WordPress Blogs

Twitter recently came out with a button similar to Facebook’s “Like button” (move over Facebook).

The Tweet Button is “a small widget which allows users to easily share your website with their followers.” (Twitter dev page)

A user clicks on the Tweet Button and is prompted with a login to enter Twitter login info. If a user is new to Twitter, he/she can create an account, The Share box will appear with information on the item to be tweeted about. This usually will include a short subject, link to the article/site and the twitter account associated with the article or site.

The tweet is submitted and users are offered a chance to follow the twitter account of the person who owns the website or whom created the article.

Twitter is offering a number of ways to you can add the Tweet Button to your website. The most direct way is just copying and pasting some javascript code into your html:

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

You can also use an iframe or you can build your own.

Here’s an example for building the Twitter Tweet Button into your website, specifically your PHP based WordPress blog.

You’ll need to open up two php files:

single.php
index.php

Both of these files should be the php files in your template folder, not in the main WordPress folder.

You’ll have to locate the ideal place for your your Tweet Button. In the index.php page locate the <?php if ( have_posts() ) : ?>. Your code should be placed within the loop that follows. Here’s sample code:

<a href="http://twitter.com/share" class="twitter-share-button" 
data-url="<?php the_permalink(); ?>" data-via="steffanlv" data-text="<?
php the_title(); ?>" data-related="steffan haeberle: web design & seo consultant" 
data-count="horizontal">Tweet</a><script type="text/javascript" 
src="http://platform.twitter.com/widgets.js"></script>

The code above contains the standard Tweet Button as well as five other variables to complete the Tweet Button functionality.

• data-url=”<?php the_permalink(); ?>”
• data-via=”steffanlv”
• data-text=”<?php the_title(); ?>”
• data-related=”steffan haeberle: web design & seo consultant”
• data-count=”horizontal”

data-url=”<?php the_permalink(); ?>” – “the_permalink” will use the textual link to the article you will use.

data-via=”steffanlv” – “data-via” is the name of the Twitter account associated with the article or website.

data-text=”<?php the_title(); ?> – “data-text” is the textual title you want to use.

data-related=”steffan haeberle: web design & seo consultant” – “data-related” is the title of the Twitter account that the user will see when he/she is prompted to Follow the originator of the website or article.

data-count=”horizontal” – “Vertical” or “Horizontal” is the format the Tweet Button count will show, either above the button or beside it.

Here’s a screenshot layout for each variable:

Feel free to copy and paste the code, change the variables to your like and integrate it into your own WordPress site. Got any questions or comments feel free to leave them below or contact Steffan.