5 min read

Adding buttons gives the site a more homemade feel, but it is time consuming to hunt down the links to the different services on the social networking sites. Wouldn’t it be great if there was a third-party service out there that did the gathering for you? AddThis (http://www.addthis.com) offers a multi-bookmark widget popular with many bloggers.

Offering Multiple Bookmarks with One Button

Using a widget like the one offered by AddThis frees you to spend your time blogging. You can choose to show all the main bookmark networks or pick and choose from an extensive list. We’ll configure the widget and then install it on our blog.

Time for Action!—Offering Multiple Bookmarks with AddThis

  1. Register at the AddThis (http://www.addthis.com) site. Georgia has already created an account for Fruit for All.
  2. The AddThis Social Widget Builder screen has multiple options to customize the widget code. Choose the Bookmarking widget option from the Which kind of widget? drop-down box. Select the style of bookmark button you want to use. We will choose the second one. The on a Blog option should be selected for Where? Choose Blogger for the Blogging Platform and then click Get Your Free Button>> for the code.
  3. Next, AddThis will provide you with the code. Copy the code from the site or type the code below in place of the button links, above the <p class=’post-footer-line post-footer-line-2′> tag in the template code:
  4. <!-- AddThis Bookmark Post Dropdown BEGIN --> 
    <div>
    <script type='text/javascript'>addthis_url='<data:post.url/>';
    addthis_title='<data:post.title/>';
    addthis_pub='fruitforall';</script>
    <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'></script> </div>
    <!-- AddThis Bookmark Post Dropdown END -->
  5. Save the template changes and view the blog. Try hovering the cursor over the Bookmark button to see whether the list of bookmarks appears.
  6. The button looks great. We need to test an icon to see how AddThis submits posts. Click the Del.icio.us icon to bring up the submission window.
  7. The URL, description (title), and tags were auto populated for us. Taking a note of the recommended tags will help us label future posts, and will guide us in adding more labels to the current post.

What Just Happened?

The AddThis button replaced our group of social bookmark buttons. When the visitor hovers their cursor over the button, a list of social bookmark icons appear. The visitor also has the option to choose from social bookmarks not listed in the main group. A new window opens with a submission form for the service we selected. After the form is filled out, AddThis collects statistical data for us and displays it graphically on our AddThis account page. The icons displayed on the button can be changed on the AddThis site.

You can’t predict which bookmarks your visitors use. Using a multiple bookmark aggregator such as AddThis keeps your posts free of bookmark clutter while giving visitors more bookmarking choices. There are other options as well. ShareThis (http://www.sharethis.com) has recently released the latest version of its multiple bookmark service, which includes tracking. It is available at http://sharethis.com/publisher/.

Adding Dynamic Counters to Bookmark Links

Showing counters on social bookmark icons is becoming popular. Dynamic counters are offered by bookmark services Reddit, Del.icio.us, Ma.gnolia, and Digg. Bookmark services are adding their own counters every day.

Readers can quickly see if a post has already been submitted to a service and can vote to increase or decrease the popularity of the post while still at the blog. We will add the popular del.icio.us dynamic bookmark and examine the features it offers. We will then explore and then explore using Feedburner Flare (http://www.feedburner.com) to show multiple counters easily.

Time for Action!—Adding Dynamic Links with Counters to Posts

  1. Navigate to the Edit HTML screen on the blog, and click the Expand Widget Templates checkbox.
  2. Type the following block of code directly above the <p class=’post-footer-line post-footer-line-2′> tag in the template code, deleting any existing social bookmark code we added before:
  3. <script type="text/javascript">if (typeof window.Delicious == "undefined") 
    window.Delicious = {}; Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious- blogbadge-line';
    </script>
    <script src="http://images.del.icio.us/static/js/ blogbadge.js"></script>
  4. Save the template, and view the blog to see the changes. An example of how it should look now is shown in the following screenshot:
  5. Are there any differences between the information captured using this bookmark and others? Let’s test the bookmark and find it out. Click on bookmark this on the del.icio.us button and review the results:
  6. The bookmark does not display the actual post title and post URL. We will need to customize it to display that information when the reader submits the post.

What Just Happened?

We inserted a ready made counter bookmark script from the del.icio.us site into our template code. The first JavaScript code snippet will check to see if a link to del.icio.us already exists. If it does not, a special default CSS class is set to control the appearance of the badge. The code is shown for reference below:

<script type="text/javascript">if (typeof window.Delicious == "undefined") window.Delicious = {};
Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious-blogbadge-line';
</script>

Calling the code controlling the badge counter is done with the final script tag. It links to an external JavaScript file stored at the del.icio.us site.

<script src="http://images.del.icio.us/static/js/blogbadge.js"> </script>

The script counts how many times readers have recommended the blog site to del.icio.us using their own script counter. The number shown will increase each time the site is bookmarked by someone on del.icio.us.

LEAVE A REPLY

Please enter your comment!
Please enter your name here