Social Bookmarking in Blogger: Part 1

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

Blogging is not done in a vacuum. We are all looking for ways to attract readers and share our message. Social bookmarking will help you find new readers and measure successful posts. In this part of the article by Lee Jordan, we will see the working of Social Bookmarking. We will also discuss how to add Bookmarks to Blogs.

The features of social bookmarking sites are in constant evolution. Currently they can be broadly categorized into three types:

  • User generated news: The main goal is to increase visits by getting on the front page of a site like Digg or Reddit. This will increase traffic to a site by huge amounts for anywhere from a few minutes to a day. Sites unprepared for the avalanche of hits often choke on the visitor overload. This is commonly known as the Slashdot effect (http://www.slashdot.org); a popular technologies site whose readers have broken many a site under the crush of their visits.
  • Circle of friends sharing: When posting to Facebook (http://www.facebook.com), Twitter (http://www.twitter.com), Flickr (http://flickr.com), or a blog, the user knows that the main purpose of these sites is sharing content with friends and people. When a user shares a link with a friend, a slight increase in traffic may occur (unless the user is a "celebrity" blogger with thousands of followers). Focusing on such groups would be more effective for smaller blogs.
  • Online bookmarks: Readers use these sites to manage their bookmarks online. Links can be public, and may even serve the public interest, such as "How To". Most people see these sites as a welcome alternative to trying to export or duplicate bookmarks across multiple browsers or computers. Adding links to these sites will increase the chance of first time readers becoming regulars. Examples include del.icio.us (http://del.icio.us), Furl (http://www.furl.net), and Ma.gnolia (http://ma.gnolia.com).

How Social Bookmarking Works

Social bookmarking works because people share information they find online with each other. The different features that social bookmark services such as online bookmarks, categories, and rss feeds provide make it easier for people to find sites that interest them in new and sometimes unpredictable ways. People are connected to each other through these services, forming social and interacting networks, helping others find information, and spreading the word about sites they enjoy.

Submitting Posts without Bookmarks

Bookmarks are convenient for readers and bloggers. Submitting articles and posts manually is extra time and work for a reader. Making it easier for them by linking the post title and URL automatically encourages readers to submit posts spontaneously. Let's recommend a site to Reddit (http://www.reddit.com) without using bookmarks. Reddit is a popular online bookmark and user-generated news service.

Time for Action!—Become a "Bookmarker"

  1. Navigate to http://www.reddit.com and click the submit link at the top of the screen.
  2. You will be redirected to the register or login screen. A username and password are all that is needed. Enter a username into the username box. You can enter an email address such as fruitforall@gmail.com into the email text field. Type a password into the password box and again into the verify password box.
  3. You can choose to have the site remember your login for you by clicking on the remember me checkbox. After reviewing the privacy policy and user agreement pages, place a check in the box next to I understand…. Click on the create account button after the form has been filled out as shown in the following screenshot:
  4. Find an interesting article to submit. We will submit the latest post on the (http://cookingwithamy.blogspot.com) blog. An example of the post being submitted is shown in the following screenshot. Copy the URL and the title of the post into a text editor such as Notepad (Windows) or Textpad (Mac).
  5. Log in to Reddit and click the submit link. Enter all the data manually, as shown in the following screenshot. Click the submit button. The link has now been shared.

What Just Happened?

It took three steps to add one link to Reddit. That did not include the time spent finding the site we wanted to submit. Then we had to log in to the bookmarking service and go to the submit form. We had to copy all the submission information ourselves and then enter it all manually into the bookmarking site form. The URL had to be entered correctly. If we had made a mistake while typing, the process would have taken longer and been more frustrating. It took a minute or two instead of the few seconds a bookmark would take. Now let's see how social bookmarks are a useful addition to our blog. They save the readers' time and make it more likely that new readers will impulse bookmark.

Sharing Posts by Email

A common way for visitors to share posts and articles they like is to email them to other people. Blogger has an Email Post to a Friend feature. Using features that make sharing posts more convenient for visitors will increase the exposure of your blog. This is a small subset of a type of marketing known as viral marketing, where readers spread your message for you from one person to another.

"How hard is it to turn on this feature?" asks Georgia as she navigates the blog. "I'd like to try it. Then my readers will have an easy way to share my posts!"

Time for Action!—Turn On Email Posting

  1. Log in to the blog, click the Settings link, and navigate to the Basic sub tab link.
  2. Scroll down the list to Show Email Post links? and select Yes from the drop‑down list as shown in the following screenshot:
  3. Click on Save Settings. Now it's time to test the feature.
  4. View the blog and click on the small email icon below the post. The Email Post to a Friend screen will appear.
  5. The sender will need to enter his name and email address and the email address of the person he wants to send the post to. The Message box, which is not a required field, can contain any notes from the sender. A sample of the post content is displayed at the bottom of the screen. Click the Send Email button to send the message.
  6. An email will be sent to the address fruitforall@gmail.com, and a success screen is displayed with a link back to the blog, as shown in the following screenshot:
  7. The submitter will be able to return to the blog using the link under Return to where you were on the confirmation screen.

What Just Happened?

When you logged into the blog and turned on the email post links feature, The Email post link setting in the blogger template was set to "show". The icon for the Email-Post-To-A-Friend feature was then visible under each blog post. Clicking on the icon brought up a new screen with a form that prompted the submitters to enter the email information for themselves and their friends. The code displayed the post at the bottom of the screen, automatically. The friend is then sent an email with a link to the post.

Adding Bookmarks to Blogs

Social bookmarks can be displayed on blogs as text links, buttons, or as dynamic mini‑widgets showing the number of submissions. Adding bookmarks to blogs is a task that ranges from simple cut and paste to custom coding. We will first choose the social bookmarks and then explore several different techniques to add them to our blog.

Choosing the Right Bookmarks for Your Blog

Blogs that focus on specific topics or points of views stand out from thousands of other blogs and attract a more regular following. The social bookmarks you choose should fit the subject and tone of your blog. A technology blog would most likely have bookmarks to Digg (http://www.digg.com), Slashdot (http://www.slashdot.org), and Reddit (http://www.reddit.com).

"There are so many social bookmarking services out there," says Georgia. "How do I pick the ones that are right for my blog?"

Earlier, we had defined three broad types of social bookmark systems. You could just choose whatever bookmark sites you see your friends using. But you're smarter than that. You are on a mission to make sure your blog post links will show up where readers interested in your topic congregate. Listed below are the most popular and useful social bookmark systems and networks.

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:

Popular Social Bookmarking Sites:

Name/Link

Symbol

Type

Description

 

Del.icio.us

http://del.icio.us

 

 

 

Online Bookmarks

 

The most popular social bookmarking site across all types of users. Provides many categories. Most useful for bloggers who post tutorials and "How To" articles.

 

Digg

http://www.digg.com


 

 

User Generated News

 

Users submit links of articles to Digg and rate them. Can search, filter, and browse.Primarily a collection of technology links, with popular news and culture.

 

Blinklist

http://www.blinklist.com


 

Online Bookmarks

 

 

Easy tools to display bookmarks on social network pages or blogs, auto-fill description fields, import bookmarks from competing sites, use of thumbnails.

 

Furl

http://www.furl.net/


 


Online Bookmarks

 

 

Site with a mature set of features including exporting, site caching, and metadata.

 

Yahoo My Web 2.0

http://myweb2.search.yahoo.com/


 

 

Circle of Friends, and Online Bookmarks

 

Not very focused on one audience, categories shaped by users.

 

Flickr

http://www.flickr.com


 

Circle of Friends

 

Social bookmarking for images. Sort, browse, search, and categorize images in ways that can be listed. Interest groups and metadata may lead people to your blog. Best for blogs that use images as a major part of content.

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:

Name/Link

Symbol

Type

Description

 

YouTube

http://www.youtube.com/


 

 

Circle of Friends, Online video storage, and Site Bookmarking.

 

Visitors' rates, categories, tags, and watch videos on many subjects. A useful site for video "How To", including recipes, troubleshooting, decoration, and artistic techniques. Best for cutting edge blogs or blogs about visual topics.

 

Reddit

http://www.reddit.com


 

 

User Generated News

 

Users vote submitted links up or down. Has a very general article, but also "Hot" and "Popular" categories.

 

Twitter

http://www.twitter.com


 

 

Circle of Friends

 

Users give short updates and share links

 

StumbleUpon

http://www.stumbleupon.com/


 

 

Online Bookmarking

 

Browse and search bookmarks and add your own. Uses a toolbar widget with browser. Categorized collection of site links.

 

Ma.gnolia

http://ma.gnolia.com


 

 

More feature rich than Del.icio.us, same type

 

Rate links with a five star system, browser bookmarklet, thumbnails, and page caches.

 

There are many social bookmarking sites out there. If you are just starting out, submitting to a site like Reddit can't hurt. But don't be disappointed if users don't flock to your site right away. Start with sites that categorize content and encourage visitor interaction. If users can search a social bookmarking site by category, tag, or by browsing, they are more likely to find you.

Deciding Which Bookmark Services to Use

Is your blog a "niche" blog like Georgia's, or one with broader appeal that falls into a general category, such as a technology blog? If your audience is more likely to find you through specific tags, searches, or by browsing user generated categories, services offering finely categorized community driven features are the best fit. Many of these services also provide RSS feeds based on categories or tags their users show interest in.

Georgia's best bets are del.icio.us, StumbleUpon, Facebook, Twitter, and Reddit.

Having trouble deciding? Pick two or three services, and then submit posts you write for several weeks. Make sure the posts offer "How To", commentary on new products, or industry news that readers will find useful. We will cover the details of "killer" content later. Review the results of your efforts to see if the services attracted readers or increased the hits of your blog. Remove the service with the worst results and add a different one.

The "Circle of Friends" services operate differently from the User-News and Online Bookmark services. They are usually added as third-party blog widgets. We will focus now on different ways to add the online bookmark type of site to our blog.

Using Simple Text Link Bookmarks

The most basic type of social bookmark is a text link. Currently the bottom of each post on Georgia's blog contains only a comments section. Georgia wants readers to be able to click a link to recommend one of her posts, instead of submitting them manually to the bookmark service.

Time for Action!—Adding Bookmarks as Text Links

Backup the current Blogger template.

  1. Log in at Blogger.com and click the Layout link on the Dashboard. The Page Elements sub tab is opened by default. Click on the Edit HTML sub-tab of the Layout tab. Click on the Expand Widgets Template checkbox. Scroll down to this line: <p class='post-footer-line post-footer-line-2'>.
  2. We type a list of bookmark links just above the <p class='post-footer-line post-footer-line-2'> line in the template code:
  3. Add
    <!-- social bookmarks --> 
    <ul id="postsocial">
    <li>
    Bookmarks:
    </li>
    <li>
    <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'> del.icio.us</a>
    </li>
    <li>
    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>StumbleUpon</a> </li>
    <li>
    <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post. title' target='_blank'>Reddit</a>
    </li>
    <li>
    <a expr:href='"http://www.blinklist.com/index. php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'>BlinkList</a>
    </li>
    </ul>
    <!-- end social bookmarks -->

    the following CSS styles to the page just below the closing bracket of the .post p class:

  4. #postsocial
    {
    float:left;
    width:95%;
    margin:0;
    padding:2px 2px 2px 2px;
    list-style:none;
    background:#d1fbb2;
    }
    #postsocial li
    {
    float:left;
    margin: 1px;
    padding:0;
    font-size:80%;
    }
    #postsocial a
    {
    float:left;
    display:block;
    margin:0;
    padding:2px 2px;
    text-decoration:none;
    border:1px solid #f0f0ff;
    border-bottom:none;
    background:#ffffff;
    }
    #postsocial a:hover
    {
    border-color:#727377;
    background:#d1fbb2;
    }
  5. Save the changes. The links should be displayed just below the comment's block. Hovering over a link with your mouse should cause a gray border and green background to display. The rest of the time the links should have a white background.
  6. It is time to test the links and make sure that they work the way we expect them to. They should cause a new window to open with the URL and description (title) already populated. Click on the del.icio.us link to test the results:

What Just Happened?

When we loaded the blog after making the changes, we saw a group of simple button links across the bottom of each post. These were generated by the lines of XHTML tags containing each bookmark link. Each item in the bookmark list was contained in a tag like this one:

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'> del.icio.us</a>

Every link used within the Blogger template begins with <a expr:href. This beginning portion of the link tag identifies the tag as a link to the template code. The tags contain reference attributes such as data:post.url and data:post.title, which will automatically gather the title and label information of the posts so that the reader can easily submit the post to the bookmark service. The example tag above is saying, display the link del.icio.us. When it is clicked, grab the description and URL of the blog post and automatically populate the information into the submit form on the del.icio.us site. Each tag link may look slightly different, depending on the required format for the bookmark service.

Take it Further—Bookmark Link Scavenger Hunt

Most of the bookmark service provide text links you can modify to fit the blogger link tags. Find the submit link of a bookmark service you use and convert it using the tag format shown above.

If you get stuck, seven of the most popular sites are already formatted for you in the pop_textlinks.html file in the code folder of this book's companion website located at http://bloggerbeefedup.blogspot.com. We've added text links and they look fine. Many blogs use them. You can add your own background images to social bookmark links. They can look like buttons or have other attention grabbing backgrounds.

Adding Social Bookmark Buttons

"The text links work," Georgia says, as she examines the new bookmarks on the blog, "but actual buttons would look more professional."

Graphical button links are easier to spot among all the comment links and other information at the bottom of a blog post. Using buttons will give readers a quick visual cue to submit the post if they have enjoyed it.

Time for Action!—Adding Bookmark Buttons to Posts

  1. Collect the bookmark images to add to the template. Most bloggers collect the icons from the bookmarking service sites, resize them, and store them on Photobucket (http://www.photobucket.com), Google pages (http://pages.google.com), Flickr (http://www.flickr.com), or their own domain. We will be using button icons stored at http://www.leesjordan.net.
  2. Select the Expand Widget Templates checkbox. Type the following code into the template, replacing the text link code we entered previously:
  3. <!-- social bookmarks with image buttons --> 
    <ul id="postsocial">
    <li> Bookmarks: </li>
    <li>
    <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
    <img alt='Save to Delicious' src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original= 'http://www.leesjordan.net/social/ delicious.gif'/></a>
    </li>
    <li>
    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
    <img alt='Stumble It!' src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.leesjordan.net/social/ stumbleupon.gif'/></a>
    </li>
    <li>
    <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
    <img alt='Submit to Reddit'src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.leesjordan.net/social/ reddit.gif'/></a>
    </li>
    <li>
    <a expr:href='"http://www.blinklist.com/index. php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'>
    <img alt='Save to Blinklist' src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.leesjordan.net/social/ blinklists.gif'/></a>
    </li>
    </ul>
    <!-- end social bookmarks -->
  4. Save and view the blog. We can see how they look on the blog in the following screenshot:
  5. Test the links to see if they work as expected. Click the StumbleUpon button (the second button in the row) to submit Georgia's post.

What Just Happened?

We added image links instead of text links this time. The most important thing to remember is to decide where to host the bookmark links. The image links can be found on the bookmark service sites, but you will not have control over the size of the image. Self hosting on a free site such as Flickr, Photobucket, or Google pages is the best option if you don't have a web space. Don't forget to change the image link code shown below to match your hosting service.

<img alt='Save to Blinklist' src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='http://www.leesjordan.net/social/blinklists.gif'/>

The button link tags contain special link references that collect dynamic information from the bookmark service. When a button is clicked, the attributes in the tag are used to automatically populate the title and the URL for the reader.

Many of the popular social bookmark icons, as well as a Photoshop .psd file of the button background, are in the code folder of this book's companion website. Other icons can be found on the bookmark service sites themselves. You can use a simple image editor to shrink the icon down to 16 pixels by 16 pixels.

Summary

In this article we learned how to add social bookmarks to your blog and focus your posts to attract readers. We also discussed about working of Social Bookmarking.

In the next part of this article, we will continue with the Addition of Bookmarks to Blogs and see how to attract readers with Links.

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.
T
Z
3
U
N
U
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