How to: jQuery Driven Social Bookmark Counters

June 20, 2013 · 23 comments

by Lars

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. There is so much much more you can do with jQuery and it is worth exploring the options. One thing that have become seriously popular is adding sliders to feature posts, images, videos, banners etc


ElegantThemes
ThemeForest

Advertisement

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:

%MINIFYHTMLcd06666295363412f660a88cff2f863218%%MINIFYHTMLcd06666295363412f660a88cff2f863219%

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.

[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:

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.

<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>

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!

Want to keep on surfing? Have look at these Drupal 7 Themes maybe this is what you’re looking for. Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.

{ 16 comments… read them below or add one }

Claudia July 18, 2013 at 9:56 pm

Your mode of describing the whole thing in this post
is really pleasant, every one be capable of effortlessly be aware of it, Thanks a lot.

Reply

pompa March 18, 2013 at 6:34 pm

no error. this run. thanks

Reply

error ? October 11, 2010 at 4:49 pm

Fatal error: Cannot use object of type stdClass as array in /home/tripwir/public_html/socialbookmarks-demo/reddit.badge.inc.php on line 23

Reply

Barbara Weir May 14, 2010 at 9:04 am

Now blogs or social website visitor do not want to waste time at social bookmarking website. So therefore, webmasters use J Query in Social bookmarking website to save the visitors time.

Thank you for this great post… great job done!

Robert!

Reply

Krabi March 9, 2010 at 12:12 pm

Mostly people use the same jquery. I have already know about this code.

Anyway, thanks for sharing the post.

Reply

The Frosty December 5, 2009 at 10:17 pm

Thanks!

This works great! Using it on my site!

Reply

Executive Car Services October 28, 2009 at 2:33 pm

Many bookmarking websites use Jquery. Thanks for sharing nice tutorial.

Reply

burun esteti?i August 20, 2009 at 4:24 pm

Thanks a ton for putting this together.

Reply

San Diego Printing June 3, 2009 at 12:29 pm

Thanks for sharing this great post and keep it up!

Reply

BeyondRandom April 20, 2009 at 2:54 pm

Great write up! I will bookmark this have to try implicating it this weekend. Great site too!

Reply

Travis April 20, 2009 at 2:20 am

Excellent tutorial. Thanks a ton for putting this together.

Any chance you could include scripts for fetching the StumbleUpon, Reddit, and maybe Yahoo Buzz counts?

Reply

tripwiremag April 20, 2009 at 4:48 am

Travis thanks for the feedback. I’ll certainly will consider taking another look at this and bring a part two of the tutorial.

Reply

tripwiremag April 19, 2009 at 8:59 pm

Thanks for notifying me. Not good not good I’m sorry for the inconvenience! I removed the script to the popular Tweetmeme button placed after the first line in the Introduction section and the page now load fine in my safari and in windows IE6.0 that alsocouldn’t present the page properly.
I’m really dissapointed that the Tweetmeme script can deliver that kind of damage! I know that it is used on http://mashable.com/ and I just tested it in Safari 4 Beta and it works fine…? strange! Anyway I added one of their buttons again and now it also works in my article so I guess the script I was using was somehow messed up.

Reply

Jean-Paul Horn April 19, 2009 at 7:26 pm

The article is unfortunately broken in Safari 4/Mac :-( After the first sentence in the introduction the article stops and the sidebar collapses beneath the comment form (instead of the usual right position). Hope you’re able to fix this :) (read it in Firefox alreay, thanks for the good article!)

Reply

Rufor April 18, 2009 at 7:07 pm

I have already seen it somethere…
Thank you
Rufor

Reply

burun estetigi April 18, 2009 at 8:19 am

thank you …

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 7 trackbacks }

Previous post:

Next post:


Web Analytics