Social Bookmarking in Blogger: Part 2

Exclusive offer: get 50% off this eBook here
Blogger: Beyond the Basics

Blogger: Beyond the Basics — Save 50%

Customize and promote your blog with original templates, analytics, advertising, and SEO

$23.99    $12.00
by Lee Jordan | February 2009 | Content Management Java

In the previous part of the article we saw the Working of Social Bookmarking and discussed how to Add Bookmarks to Blogs.

In this part by Lee Jordan, we will continue with the addition of Bookmarks to Blogs and see how to attract readers with Links.

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.

Blogger: Beyond the Basics Customize and promote your blog with original templates, analytics, advertising, and SEO
Published: May 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Adding Multiple Counter Scripts Simultaneously

What if we want to display multiple scripts for different bookmarks or social networking services? Adding them individually can be very frustrating with Blogger's current syntax for post titles and URLs. We can also do it the easy way and have the bonus of automatic feeds and site statistics using a service such as Feedburner (http://www.feedburner.com).

Time for Action—Add Multiple Counter Scripts with Feedburner Flare

  1. Log into Feedburner (http://www.feedburner.com) and click on the MyFeeds link at the top of the page. Choose the Optimize tab and select FeedFlare from the left menu. Select the checkboxes next to each service you wish to add. You can choose to show some services on the site or the feed only. Checkout the items you will be able to see in the following screenshot:
  2. As we scroll down the list we will be able to see more services. We need to check the boxes next to Technorati, Digg, and Delicious. The Personal FeedFlare section will remain blank until we add a new flare. Reddit is not listed under the Official FeedFlare section as a service. So we will add it by typing in a link to an XML file found while clicking Browse the Catalog. Later on, when you have extra time, check out the catalog for many other FeedFlare choices. Go ahead and type this URL into the Personal FeedFlare textbox: http://dmiessler.com/feedflare/reddit.xml.
  3. After clicking the Add New Flare button, the service will show up under the Personal FeedFlare section as shown in the following screenshot:

  4. After selecting the Reddit service checkbox, scrolling down further will reveal the FeedFlare Preview/Ordering section. Drag and drop links into the order you wish to appear on the blog and the feed. When we are done, the service links will be in alphabetical order. Activate FeedFlare by clicking the Activate button at the bottom of the screen.
  5. A success message appears at the top of the screen indicating that the feed was updated. Now, we are ready to add the FeedFlare code to our blog.
  6. Scroll down to the bottom of the screen. A new drop-down option, Get the HTML code to put FeedFlare on your site has appeared. Select Blogger from the drop‑down list. A new window will automatically open with the codes and instructions.
  7. The new window contains basic instructions and codes which we can copy and paste into our blog. Scroll down and copy the code in the text area box under the Editing Blogger "Layouts" heading. Now, we need to paste it into our template code.
  8. Just like with the other buttons and bookmark links before, we will click the Edit HTML link under the Layout tab of our blog, select the Expand Widget Templates checkbox, and paste the code just above the second post footer line <p class='post-footer-line post-footer-line-2'>. The code should look like:
  9. <!-- social bookmark dynamic badges --> 
    <script charset='utf-8' expr: src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='"http://feeds.feedburner.com/~s/FruitForAllTestSeasonal AndShippedToYou?i=" + data:post.url' type='text/javascript'/>
    <!-- end dynamic badges -->
  10. Save the changes and view the blog. It may take a few minutes for the links to show up, since Feedburner processes them. Clear your browser's cache. Closing and restarting your browser may also help. The block of links will appear in an ordered set below the comments area. Counters will appear after the post has been submitted to an individual bookmark service. You can see an example of the links in the following screenshot:
  11. It's time to test the FeedburnerFlare code. Click the del.icio.us link to submit the post and view the results. The individual post title and URL are sent to the submission form just like we had intended. A copy of the submission form is displayed in the following screenshot:

What Just Happened?

Using the del.icio.us Tagometer badge reveals to us that the information submitted was the general site title and description, and not the post title and post URL that we wanted. We took the easy route and installed multiple bookmark links with counter functionality using the FeedburnerFlare tool.

We selected the bookmark services we wanted and then activated the tool. The code for all the bookmark services was gathered by us. Once the FeedburnerFlare tool was successfully activated, we were able to copy an expression tag specifically designed for blogger:

<script charset='utf-8' expr:src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='"http://feeds.feedburner.com/~s/ FruitForAllTestSeasonalAndShippedToYou?i= " + data:post.url' type='text/javascript'/> </script>

Notice the expr:src attribute, which is a part of the syntax for blogger's XML template code. It converts a normal script containing link data into a tag specifically designed to be used in the template code. FeedburnerFlare tracks and updates the bookmark links using special dynamic code that communicates with the API (Application Program Interface) of each bookmark service. Every time a user submits a post to one of the bookmark services, the individual counters increase by one.

Visit the Feedburner forum (http://forums.feedburner.com) for more tips, common questions, and techniques.

Blogger: Beyond the Basics Customize and promote your blog with original templates, analytics, advertising, and SEO
Published: May 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Attracting Readers with Links

Georgia's blog is all about fruits. She has discovered that this is still a very broad topic. Creating interesting content that will attract new readers (also known as link bait) is vital to marketing her blog and her company. How can she figure out the different topics that visitors are really interested in? She can discover what content is spreading among people like a virus, by doing a little research.

What People are Tagging

Georgia is eager to create her own viral content. She wants to know what sort of "fruity" content people are most likely to bookmark. Searching http://del.icio.us for the tag "fruit" gives us the following results:

We see some expected results including recipes for making fruit salad and picking fruits. We also found several commercial sites offering fruit baskets and fruit drinks. Practical articles about fighting fruit flies and fruit labels also appeared in the results. Based on the results, it appears people are interested in sampling free fruits, protecting the fruit they have, and looking for new ways to enjoy fruits. Georgia now has more article ideas and additional related tags to search on. It is time to use the research to create an interesting content article.

Planning an Article

The goal is to create an article that a wide number of people might find useful, as well as attract visitors who would not normally go to a fruit related site. The content should deliver exactly what the title promised: five interesting ways to use lemons to "clean green" every day. Users will recommend the content they like. Taking care to match the content to the title also builds visitors trust. They will see you and your site as more reliable, which will build a positive relationship and encourage repeat visits.

Keywords should be used for the labels attached to the post. The labels are also known as "tags" in social bookmarking. They are the keywords and search terms people use to identify information, including blog posts, images, podcasts, and videos. Users can also subscribe to news feeds of labels. Any type of content posted to the web can be tagged.

We are going to perform the following tasks:

  • Detail five ways to "clean green" in the content of the blog post.
  • Use keywords as labels.
  • Upload a descriptive image that matches the content.

Time for Action!—Create a Killer Article

Georgia decides to start with a more general article that will be useful to those looking for environment friendly alternatives for cleaning products. She writes a post focusing on using lemons for household cleaning.

  1. Create a new post and enter the text Five Reasons to Go Green with Lemons in the title area.
  2. Type the following text into the content portion of the post:
    • Making Lemon Buttermilk: Add a teaspoon of lemon for every 1/4 of milk to curdle milk for cooking. I use this method whenever I make pancakes.
    • It can be used instead of vinegar for windows.
    • The acid in lemons is very effective at removing tough stains from stove tops.
    • Using it as a drain cleaner is a biodegradable way to clean the kitchen pipes without using harsh chemicals. Drop three tablespoons of baking soda into the sink drain, then squeeze one cup of lemon juice onto the powder. It creates a chemical reaction with the soda, causing a fizzing that is fun to watch!
    • Don't throw away the lemon rinds: Use the drained lemons as cleaning pads. Sprinkle baking soda into the sink basin. Turn the lemon skins inside out so the fleshy inside will touch the surface of the sink. Scrub away until it shines.
  3. Tart, bright, and shaped like a smile, the simple lemon is useful for a variety of purposes including decorating, cooking, and cleaning. Lemon is delicious in tea or a tall icy glass of lemonade. It adds tart zest to many dishes, even pancakes. Lemon is also an eco-friendly household cleanser. Here are five ways to use this cheerful fruit every day.

    The natural fresh scent the lemon leaves behind is a pleasant byproduct. Add a little lemon to your cleaning routine to go green.

  4. Upload an attractive image that fits the content. We will use this closely cropped image of a cut lemon:
  5. Publish the post. We aren't done yet. The labels need to be added to the post.
  6. Open up the new post for editing and type the following keywords into the labels text entry field of the new post: lemons, environmental, environment friendly, lemonade, remove stains, biodegradable, green clean, lemon, tea, yellow, tart, fruit.
  7. Are the labels we just assigned to the post effective? Do searches contain the phrases "lemon" and "eco-friendly cleaning"? The results show that we could have also used the following tags in the labels section of our post: howto, lemon tips, cleaning, organic, home, eco, sustainability.

What Just Happened?

When we created the title we used keywords to identify, clearly and briefly, what the post was about. Potential readers will often click a searched link based on the title alone. People interested in finding out more ways to clean using simple and effective natural products will be tempted to click the descriptive title.

We used the actual content in the post as a source for our keyword labels. This is an easy way to find meaningful keywords to use as labels. Next, we checked a couple of the keywords on the del.icio.us site to see if we found results related to our own post topic. We also used this opportunity to gather other labels to add to our own post. Labeling posts properly directly affects the easiness of potential readers to find your blog posts.

Feed readers, sort and present blog posts not just to people but to news aggregator services, search engines, and other web-based services. Discover the keywords potential readers use while searching for bookmarks and information by using services such as del.icio.us for research. Using keywords as labels will increase your chances of positive site traffic.

All social bookmarking sites have some type of labeling or tagging system. Visitors will be more likely to use the labels you want them to if you provide the labels with your posts.

Building an Audience with Regular Posts

Readers prefer sites that update on a regular basis. It is important to pick a post schedule and stick with it as much as possible. You will be seen as a more reliable source by posting consistently.

How do we pick one for Georgia's blog? Many blogs update every day. If there is no dedicated person, whose only job is to blog, it can be difficult to meet that expectation consistently. Many company blogs update once a week on a scheduled date, or rotate responsible bloggers. Special notices or updates would occur whenever there is time sensitive information to share.

Time for Action!—Develop a Post Schedule

Let's break it down as a chart. Create two columns on a piece of paper. Write "Types of information" in the column on the left and "How often to post" in the column on the right. Make a list of the different types of information you are posting on your blog. Are you focusing on only one type? The more time sensitive the information, the more frequently you should post.

Here is an example of a post schedule for different types of content:

Types of information

How often to post

Urgent news (Topics might include politics, Internet security, and celebrity gossip)

Several times a day

Online diary and daily progress log

Daily

Company news and weekly feature articles

Weekly

Longer, and more complex magazine style articles

Monthly

If you are using a feed service or if your users use a blog tracking service, keep in mind that updates that appear too frequently may overwhelm readers or cause them to "burn out" on the blog. The more time sensitive the information, the more often you should post. Weekly is a good place to start for most company blogs. Readers will get used to reading the blog once a week consistently. Georgia should start posting once a week, using Twitter (http://www.twitter.com) for sporadic news updates the rest of the time.

What Just Happened?

When you filled out your own post schedule chart, you set a deadline for regular posts. Whether daily, weekly, monthly, or once an hour, you committed yourself to posting consistently. Evaluating the types of content that were the most urgent gave you the chance to step back and have the content dictate the schedule.

Summary

In this article we explored the different ways to add bookmarks, how to choose the social bookmarking sites that are right for your blog, how to do social networking, and shape blog content into tasty morsels for visitors.

About the Author :


Lee Jordan

Lee Jordan is a web developer with a large collection of web technology acronyms on her resume that sound like the names of laundry detergents and cause glazed expressions in school children. She designs and maintains internal and external enterprise-level websites and web-based applications as part of a project team for a privately held technical services company. Her work includes proposing, writing, and editing web content and user guides people actually read. She began her career in 1997 as a web designer after graduating from Florida State University with a Bachelor of Fine Arts, where she swears that she missed at least one home football game while in the computer lab. Lee later convinced Seminole Community College to give her a Web Programming degree in 2003, even though her final project was a Java-based application that actually contained a usable help file. Web development topics or whatever she can think of at the time are posted on her blog at http://leejordan.net.

Books From Packt

Drupal 6 Social Networking
Drupal 6 Social Networking

WordPress Plugin Development (Beginner's Guide)
WordPress Plugin Development (Beginner's Guide)

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

MODx Web Development
MODx Web Development

JBoss Portal Server Development
JBoss Portal Server Development

Oracle SOA Suite Developer's Guide
Oracle SOA Suite Developer's Guide

Spring 2.5 Aspect Oriented Programming
Spring 2.5 Aspect Oriented Programming

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
3
A
R
t
W
r
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software