First off, in case you are wondering, yes this is a sports blog, but when I was creating this blog yesterday, I was looking for a way to add a Tweet This button to each of my blog posts without a plugin. I came across plenty of articles that cover how to do that, but everyone of them was adding the Tweet this button to only the individual blog post. I liked that, but I wanted the button to be on the home page of the blog and still link to an individual article’s permalink…not the home page of the blog itself. I spent hours trying to find a way to do that on Google, still not using a plug-in. I found people asking for the same thing, but no answers…so I took matters into my own hand, and I looked at the code (I am no php expert) and I finally figured it out. So even though this is a sports blog, I figured I would try to help anyone else who had the same question.
Now some might say, why go through all of the trouble if its on the single page that will be good enough, but I didn’t want to show summaries on my blog home page in case no-one clicks the title. I am sure that you have read a blog from the home page at some point in your blog reading days.
Well, here the tutorial is:
It has bit.ly URL shortening built in, I like bit.ly because of the live tracking of the shortened URLs.
The first code you have to add is this:
<?php { ?>
<script type="text/javascript" charset="utf-8"
src="http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523"></script>
<script type="text/javascript" charset="utf-8"
src="http://s.bit.ly/TweetAndTrack.js?v=1.01"></script>
<?php } ?>
Now, if you have a free account with bit.ly, change where it says “login=tweettrackjs” with “login=(username)” and replace “apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523” with “apiKey=(your API key)”
You add that code right in front of the tag in header.php which is located in your theme’s folder.
The next piece of code is to add it to the individual blog page (because someone might click the title and you want it to be there)
<!--Add Tweet this-->
<div align="right"><a href="#" target="_blank" onclick="return TweetAndTrack.open(this, '<?php echo get_permalink();?>');"><span style="display:none;">« <?php the_title();?></span><img src=(your image location)" alt="Tweet This" /> Tweet This</a></div>
<!--End Tweet this-->
Now, if you want there to be an image with the link change <img src=”(your image location)” alt=”Tweet This” /> and where it says (your image location), insert the location of the image you want to use (be sure to upload the image to your server if it is your image. Feel free to save the image below and use that if you want. If you don’t want an image just delete <img src=”(your image location)” alt=”Tweet This” /> and it will be a text link that says “Tweet This”
Now you add that code to the single.php page which is also located in your theme’s folder, add it right below:
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
Now for the tricky part to add it to the home page for each post and still have it link to the actual blog post, not the home page. To do this you have to find this code in the index.php page which is also located in the your theme’s folder.
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
Replace the above code with the following code:
<p class="postmetadata"> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> | <!--Add Tweet this--><a href="#" target="_blank" onclick="return TweetAndTrack.open(this, '<?php echo get_permalink();?>');"><span style="display:none;">« <?php the_title();?></span><img src="(your image location)" alt="Tweet This" /> Tweet This</a><!--End Tweet this--><br /><?php the_tags('Tags: ', ', ', '<br />'); ?></p>
Be sure to add your image location to the designated area –> <img src=”(your image location)” alt=”Tweet This” />
Now you save and upload everything to your server and you’re done.
When the link is clicked, Twitter will open with the Tweet box filled in with:
(the bit.ly link) « (your article title)
If you have any questions, please feel free to comment this post and I will answer all questions.
Hope you find this tutorial useful and check out the MikesPickz: Sports Section for articles on anything and everything related to Sports.
As always, be sure to follow me on Twitter, @ MikesPickz for continuous news from the world of Sports, Music and Movies.
