tripwire magazine

In this article tripwire magazine provides a tutorial on how the jQuery based Social Bookmarking Counters on the site was created. Most people are generally busy and this means that readers on a blog or website don’t time to waste on articles that are not really good. The main principle in web 2.0 and social services is to leverage upon the opinion of the community. Showing the post popularity on services that most of your users use will provide them with voulnable information when quick decisions on what to read next has to be made. I believe this kind of functionality is good and I also see it used in different variations on more and more blogs. [demo]

Introduction

Most of the popular web 2.0 social bookmarking services like digg, reddit, dzone etc. have buttons you can integrate into your site.

Fx. the button above showing how many time the url for the actual page have been posted on twitter. The tweetmeme button simply inserted by pasting the script below into your site:

1
2
3

<script type=“text/javascript”> tweetmeme_url = "<data:post.url/>"; </script>
<script type=“text/javascript”
   src="http://tweetmeme.com/i/scripts/button.js"> </script>

These buttons provide the number of diggs, bookmarks etc. through a javascript that is loaded from their site behind the button. For most this is basically ok but if you want to customize the way each button looks your options are limited or none (as you know they are all very different and may not fit into you look and feel). Also by using the buttons provided your site is downloading a javascipt that you have no control of and on each request the count your articles are retrieved…this may be really time consuming and affect performance especially on article lists like a blog front page. Besides offering buttons that can easily be integrated into blogs and websites some of the social bookmarking providers also expose web services that can be called fx. using php or javascript to retreive the bookmark count for an artcile. This is the method that will be demonstrated in this article. In order to avoid the entire website to slow down while counters are retreived in php this solution use jQuery to load in the results dynamically after the pages are fully downloaded. It also use some really basic file caching to further optimize performance (and to avoid hitting the web services to hard without any reason). The solution described in this tutorial should be extendable to cover more social bookmarking service providers but currently it only includes Tweetmeme, delicious and digg. Working source code can be downloaded here. All code will not be listed in the article but so if you want to dive deeper start with downloading the files. Be aware that the code structure and architecture of the solution is not that beautiful at all but it works well and mainly serves as proff of concept for this tutorial. The solution can be illustrated at a high level as follows. A] After page is fully loaded jQuery is used to load the page in the B] socialbookmarks solution that returns a html formatted output. B] caches it’s output into a file and returns the content of the cache file if the cache file for a specific url is not older than the cache time to live. B] calls services at the social bookmarks providers C]to produce it’s output.

1. Server side

Start with creating a folder called “socialbookmarks” in the root of your website (must be on a server that supports php5). In this folder you should copy all files from the downloaded archive. The following files are fundamental to the solution and will be described in a bit more detail below.

• index.php
• digg.badge.inc.php
• delicious.badge.inc.php
• tweet.badge.inc.php

index.php

This is the page that will be loaded on your website using jQuery. This page implements the caching and ensures that digg, delicious etc. is called and that the html that needs to be returned is build. Cache files are placed in “socialbookmarks/cache” and is named using the following pattern: cache__[url including querystring params]. Cache window is set to 2 hours. Down make the cashe time to short as tweetmeme only allows a very limited number af requests every hour. With busy site this will not work without the caching and a cacheing window of 1-2 hours.

68
69
70
71
72
73

<div class="bookmark-this">
  <img src="http://www.tripwiremagazine.com/socialbookmarks/digg-guy.gif" alt="" width="18" height="18" />
 
  <a href="http://www.addtoany.com/add_to/digg?linkurl=<?php echo $permalink ?>
    &type=page&linkname=&linknote=" target="_blank">Digg it!</a>
</div>

[service].badge.inc

Each of the xxxx.badge.inc.php files will be containing a function that takes a article url as parameter and calls the service at the social bookmark service it represents. If the request is successful the function will return the bookmark count for the url given as input. Calling the service and retreiving the content needed from the XML or JSON isn’t that hard. Here an example for calling the digg service:

11
12
13
14
15
16
17
18
19
20
21
22
23

loadXML($res);
 
      $storys = $xdoc->getElementsByTagName("story");
      foreach ($storys as $story) {
       $diggs = $story -> getAttribute('diggs').'';
       }
 
    return $diggs;
  }
  else
    return "";
}
?>

2. Client side

The webpage that shows the social bookmarking badges need to be updated with the following code.The code make use of jQuery that is ideal for loading content up behind the scenes.

19
20
21
22
23
24
25
26
27
28
29

<!-- load bookmarks page using ajax/jquery. First a ajax-loader image
     is inserted and then the loading of the content is started. Once it is
     loaded the div tag is updateed with the dynamically data loaded. -->
<script type="text/javascript">
$(document).ready(function(){      
    $('#bookmarkscontainer').html('<p><img src="ajax-loader.gif"/></p>');
    $('#bookmarkscontainer').load("index.php?permalink=<?php echo rawurlencode($permalink) ?>&post-title=<?php echo rawurlencode($postTitle) ?>");
});  
</script>  
<!-- container for dynamic loaded content -->
<div style="padding-bottom: 5px;padding-top: 15px; height: 70px;" id="bookmarkscontainer"></div>

In the files you can download I have included a test page “testpage.php” that you can use as an example of how the bookmark counter can be used. If you have not downloaded it yet you can do it here.

[Download]

3. The final result

This is the final result that you also can see all over tripwire magazine. Here is also a demo of the page being loaded dynamically into the Wordpress pages [demo].

If you find this article useful please comment or bookmark the page Thanks!

Related posts

1. 20+ Top Social News and Bookmark Sites for Designers and Developers Knowing what is going on, the trends, the breaking...
2. 16 Interesting Wordpress Plugins to maximize Traffic and Followers from Social Networks Blogging is essentially about reaching out to people, readers...
3. jQuery and General Javascript Tips to Improve Your Code I have published several articles describing the many benefits...
4. 10+ jQuery Form Enhancement Plugins Easy user interaction and data collection is really a...
5. 50+ jQuery Plugins for Form Enhancements Easy user interaction and data collection is really a...

Please remember to share this post!