财神彩票

書名： WordPress 2.7 Cookbook
作者名： Jean-Baptiste Jung
本章字?jǐn)?shù)： 769字
更新時間： 2021-04-01 13:55:49

Adding social bookmarking buttons to your theme

Social bookmarking web sites are well known among bloggers. Digg, Del.icio.us, StumbleUpon, Reddit, and many more such web sites can drive a huge amount of traffic to your blog.

I have noticed that if you directly add social bookmarking buttons to your theme and give your readers the opportunity to do it in your blog, they'll vote for you more often. In this recipe, we shall learn how to create our own personal social bookmarking buttons.

Getting ready

In this example, I shall be using a background image although, it isn't necessary for achieving this recipe. However, if you don't have a background image and wish to have one you can freely use the basic background that I have created, by visiting the following link: http://wphacks.com/wp-content/uploads/2008/08/cwc-vote.jpg

How to do it...

First, if you choose to use a background image, upload it into the wp-content/themes/yourtheme directory.
The social bookmarking button can be added at the end of single posts or on the homepage, after each post excerpt. Personally, I choose to add it on single posts, but the choice is completely yours.
We'll have to create a list of HTML elements containing all the links that we want to use, to the social bookmarking sites. In this example, I shall be using Del.icio.us, Digg, Stumble Upon, Reddit, and Dzone. However, you can add more social bookmarking sites or replace the one's which I have chosen with the ones of your choice.

Open the single.php file from your theme and add the following piece of code where you want the widget to appear:

<div id="cwc-vote">
<ul>
<li><a href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>">Del.icio.us</a></li>
<li><a href="http://digg.com/submit?url=<?php echo the_permalink(); ?>">Digg</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php echo the_permalink(); ?>">StumbleUpon</a></li>
<li><a href="http://reddit.com/submit?url=<?php echo the_permalink(); ?>">Reddit</a></li>
<li><a href="http://www.dzone.com/links/add.html?url=<?php echo the_permalink(); ?>">Dzone</a></li>
</ul>
</div>

How it works...

As you have seen, most—if not all—social bookmarking sites have a URL where you can pass a GET request containing the URL of the web site you'd like to add or vote for. We're using the WordPress the_permalink() function to retrieve the URL of any post.

For the markup, using an HTML list is considered a better solution in terms of semantic HTML.

You can easily add others social bookmarking sites; I can't guarantee that it will work for all sites, but basically, the link must look like this:

<a href="http://www.yoursite.com/links/submit?url=<?php echo the_permalink(); ?>">

There's more...

Now, we have a fully functional social bookmarking widget. The reason why we have created one manually, instead of using the buttons provided by such sites, is that we can use CSS to integrate it to our theme and make these links looks like a part of the blog.

Using CSS to style the social bookmarking widget

Open your style.css file and add the following code:

#cwc-vote{
    /* Don't forget to change the image path */
    background: #fff url(images/cwc-vote.png) no-repeat top left;
    width:600px;
    height:45px;
    padding-top:35px;
}

#cwc-vote ul{
    list-style-type:none;
    margin-left:-20px;
}

#cwc-vote ul li{
    display:inline;
    margin-right:-10px;
}

#cwc-vote ul li a{
    color:#fff;
    font-size:13px;
}

This example CSS will be a good start to personalize the widget. Though, you may have some extra styling to do in order to make it fit your theme color scheme.

Adding Del.icio.us live count

Right now, we have a good looking and functional widget, but we can still improve upon it. I shall teach you how to add a Del.icio.us live count—it will count the number of people who save your post on Deli.cio.us, and print it next to the Deli.cio.us link.

If you want to add the Deli.cio.us live count to your social bookmarking widget, we'll have to edit the list a bit. Simply replace the following line of code:

<li><a href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>">Del.icio.us</a></li>

By the following line of code:

<li><a href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>">Del.icio.us (<span id='<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?>'>0</span>)</a></li>

In the preceding piece of code, we have added a zero (the default Del.icio.us count) within a span HTML element. This is the basis of our Del.icio.us live counter. Of course, we have to use a bit of JavaScript to make it work.

Enter the following code in the single.php file, below the widget HTML code:

<script type='text/javascript'>
function displayURL(data) {
    var urlinfo = data[0];
    if (!urlinfo.total_posts) return;
    document.getElementById("<?php echo md5("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);?>").innerHTML = urlinfo.total_posts;
}
</script>

<script src='http://badges.del.icio.us/feeds/json/url/data?url=<?php the_permalink() ?>&callback=displayURL'></script>

We're done! Your widget is now able to count the number of people who have saved your post to Del.icio.us and display the count.

Code explanation

This code uses Del.icio.us JSON (JavaScript Object Notation) feeds—a lightweight data-interchange format easily used in browser-based mashups, blog badges, and more—to get information about the URL which we have passed as a parameter.

As a callback, we're calling the JavaScript function, displayURL(data). This function retrieves the ID of the span element created in the widget html list and replaces the default value (zero) with the number returned by Del.icio.us JSON feed.

官术网_书友最值得收藏!

WordPress 2.7 Cookbook