How to Add Yahoo Buzz Buttons to WordPress

Yahoo Buzz is a new player in the social news industry but I believe it will become a huge force to be reckoned with just because it is a Yahoo web site.

On Yahoo Buzz’s buttons page, it has 5 tips to get more votes:

1. Put Yahoo! Buzz buttons on everything you publish.
2. Consider adding two buttons for each story you publish: one at the top and one at the bottom.
3. We highly recommend the larger buttons with vote count.
4. Encourage your visitors to buzz up your stories and send them to friends.
5. See the bottom of this page for advanced button options.

Since Yahoo recommends that we use the larger buttons with vote count, let’s use the “Square Button” of the “Buttons with Vote Count” list of buttons.

Here’s How the Yahoo Button Will Look on Your Web Site…

If your blog post has been submitted to Yahoo, you should see a Yahoo button with the number of votes only if there has been more than 1 vote for your post.

Most of the time, you should see something like the button above on your web site.

Yahoo Buzz’s Integration Code

1

<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square">ARTICLEURL</script>

There are other advanced options like:

1
2
3
4
5

yahooBuzzArticleHeadline = "Enter Story Headline Here"
yahooBuzzArticleSummary = "Enter Story Summary Here"
yahooBuzzArticleCategory = "Enter Story Category Here"
yahooBuzzArticleType = "Enter Media Type Here"
yahooBuzzArticleId = window.location.href

WordPress Default Theme’s single.php Template

1
2
3

<p class="postmetadata alt">
....................
</p>

Although you may add this code to your index.php and archive.php templates, I would advice against it because it increases your page load times.

What We Need to Do

We need to delete “ARTICLEURL” and use the advanced codes “yahooBuzzArticleHeadline” and “yahooBuzzArticleId” and insert the Yahoo code somewhere within the WordPress Loop.

Yahoo Buzz Integration with WordPress with HTML and CSS

1
2
3
4
5
6
7
8
9

<p class="postmetadata alt">
....................
</p>
 
<div class="social_news">
<script type="text/javascript">yahooBuzzArticleHeadline = "<?php the_title(); ?>";</script>
<script type="text/javascript">yahooBuzzArticleId = "<?php the_permalink() ?>";</script>
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"></script>
</div>

1
2
3
4
5
6

.social_news
{
	margin: 0px 5px 0px 0px;
	padding: 0px;
	float: left;
}

You may display multiple buttons in a single row with the social_news class. That is how I displayed my voting buttons below. It has a 5 pixel margin on the right to leave a tiny gap in between buttons.