Add a Social Bookmarking Button to Blogger

In this tutorial you will learn how to add an Add Thisfree Social Bookmarking button to your Blogger blog (Blogspot) blog. By adding this feature to your blog you will enable visitors to your blog to create links to popular social bookmarking sites such as Google, Technorati, Facebook, MySpace, Digg, Stumble Upon, Reddit, Delicious, Furl, Yahoo etc. Adding personal social bookmarks enables visitors to share these links with others thereby helping you attract more traffic to your site. For more information on the benefits of social bookmarking please refer to my article - Benefits of Social Bookmarking for Blogger bloggers.

This tutorial shows you how to place a social bookmarking button on your site by accessing a free social bookmark and feed button builder service called Add This. Add This will supply you with a simple piece of code which when placed in a widget will insert a social bookmarking button either at the end of each post or in the sidebar. If you wish you can add the social bookmarking button to both as I have done on this site. For those new to blogging don't worry if this sounds complicated as this article gives you step by step instructions suitable for any Blogger user including beginners.

How does an Add This Social Bookmarking Button Work?
The code from Add This places a button on your site which when clicked on by a visitor to your site opens a menu of the most popular social bookmarking services. When a selection is made by a visitor egDelicious, Yahoo, Google, Facebook, MySpace, Stumble Upon they are given the option to submit your blog to their online bookmarks. Once a visitor submits your blog to a social bookmarking service Add This can provide you with useful analytics about bookmarks, feeds and emails depending on which buttons you enable on your site. This kind of statistical information from Add This will help you gain greater understanding of your site traffic and your most popular posts.




Steps for Adding a Social Bookmarking Button from Add This to Your Blogger Blog

1. Register for a free account with Add This



2. Once you supply a username, email address, password and your website address sign up is pretty much instanteous.

3. After sign up is confirmed click on Get Your Button. This will take you to the Create Your Button Page



4. On the Create Your Button page you will be asked to make some selections about your social bookmarking button.

What kind of Button? Select Sharing/bookmarking button

What Look? Choose any of the six button choices. For this example I am going to select the share button



Where? Select on a blog

Blogger Platform? Select Blogger

At this point the information your have entered should look like the picture below:



Once you have confirmed that you have entered the correct information click on the Get Your Code button and you will be taken to the Get Your Code page.

5. From the Get Your Code page you will be given the option toPreview your button. Do so if you wish or move on to Step 6.


Having generated the code for your Add This Social Bookmarking button you now need to decide where to position it on your blog. You may either place your new Social Bookmarking Button beneath each post (see below) or in a sidebar.


Instructions for Placing a Social Bookmarking Button Beneath Each Post of Your Blogger Blog

Click on Blog Post Button option.

Highlight the Javascript code supplied by Add This

Copy the code to the Clipboard of your computer using Ctrl + C command

In a new window open your Blogger Blog and sign in

Navigate to Layout > Edit HTML

As a precaution Backup your template in case you inadvertently overwrite some code.

Once you have backed up place a tick in the Expand Widget Templates checkbox

Use the Ctrl + F command to open the toolbar which will appear at the bottom of your page while using Blogger. You can close this at any time using the Ctrl + F command or by clicking on the blue cross in the lefthand corner.

Now highlight the following line of code and using the Ctrl + Ccommand copy and paste the code into the Search Box on the toolbar at the bottom of Blogger. This action will quickly locate the code for you in your Blogger template. You will be placing the code immediately before this tag.

<div class='post-footer'>

Return to Add This and highlight the Javascript button codesupplied. Copy the code to your clipboard using the Ctrl + Ccommand.

Reopen the Blogger window and place the cursor right before the tag that you located earlier.

Paste the Javascript code from Add This into the template using theCtrl + V command.

Your code placement should look like that pictured below


Click on Save Template

Now click on View Blog from the top menu and navigate to the end of your first post. If all instructions have been followed you will now have a social bookmarking button at the bottom of each post.


Instructions for Placing a Social Bookmarking Button in a Sidebar of Your Blogger Blog

Follow the Add This automated process by clicking on Add the Menu to My Blog button. This will place an Add This social bookmarking button in a widget in your sidebar as you see on this site.



This Blogger tutorial has covered the steps involved in adding a freeAdd This Social Bookmarking Button to your Blogger blog (Blogspot blog). Grow your Blogger (Blogspot) blog today by adding a free Add This social bookmarking button which will enable visitors to bookmark your site and share your posts with others. Add This will provide statistical tracking of social bookmarking activity on your site and help you determine your most popular posts.

Add Email Subscription Form and Links to Blogger Blogspot

In this tutorial you will learn how to add an email subscription form to your Blogger Blogspot blog so that your visitors will have easy access to your latest updates via email. Adding an email subscription form to your blog is very easy to do and is one way to stimulate repeat visits to your blog.

Below is a step by step walkthrough of how to add an email subscription form to a Blogger blog. I have broken down the steps so that even beginners and newbies can easily follow the steps.

Why Offer the Option to Receive Updates Via Email?
If you are keen to have your visitors return to your blog then as a webmaster you can facilitate this by giving them options about how they would like to receive your updates. Receiving updates by email is just one of several options that you can offer your visitors to turn them from a one time visitor into a regular follower. Other common choices are to follow you in a reader such as Google Reader or alternatively follow you on Twitter. I have recently set up my feed to feed directly into Twitter using theTwitterfeed service so that my readers can follow me on Twitter.

How to Set Up an Email Subscription Form at Feedburner
In order to set up an email subscription link or form at Feedburner you first need to have your feed burned by Feedburner. If you are not sure how to do this please read my step by step article on burning aBlogger RSS Feed at Feedburner or follow these brief instructions

1. If you are using your Google Account click on the My Account linkand choose Feedburner from the list. Alternatively go to Feedburnerand sign in. If you aren't registered you can quickly create a free account using your Google Account.

2. After logging in you will be taken to the My Feeds Page. If you already have your feed burned skip to Step 3 otherwise follow these instructions to burn your feed.

If you need to burn your feed first enter the URL of your Blogger blog into the Burn a Feed Right This Instant box and click Next.


You will need to enter the title of your new feed. I suggest you use your blog title as your title. You will also be asked to choose a feed so choose the RSS Feed. You will then be taken to a success page and a message something like Congrats! Your FeedBurner feed is now live. After clicking Next you will now be prompted to customize your options. Read how to do this in my article about burning a Blogger RSS Feed at Feedburner. Once you have finished customizing your options click Next to proceed to the My Feeds Page.

3. Once you have your feed click on the link to it from the My Feeds Page. This will direct you to the Feedburner dashboard.

4. Now select the Publicize tab.

5. From the left sidebar click Email Subscriptions

6. Scroll down to the bottom of the page and click on the Activatebutton. If you are not sure what email address you are using for your account you can check this first.

7. You will now be taken to the Subscription Management Page.


8. Choose your language. The default is English

9. From the dropdown menu Use a Widget in select Blogger. The default is Typepad. The orange Blogger favicon will now show up.

10. To Automatically Insert the Subscribe By Email Widget into Blogger

1. Click on the GO button next to the Blogger Widget.
2. You will be taken to the Blogger Add Page Element Page where you can select your blog from a dropdown menu if you have more than one blog.
   
   
3. Click on the Add Widget button and your subscribe by email widget will be added to your blog. 
4. You will now be taken to the Layout > Page Elements page
5. Reposition your widget and save any changes. By default the widget is added to the top of your Blogger sidebar.

Note:If you find that the Page Elements Page does not load properly click on View Blog and you will find that the widget has been inserted. You can then go back and reposition it.


To Manually Insert the Subscribe By Email Widget into Blogger

1. Copy the code and navigate to the Layout > Page Elements screen in Blogger.
2. Select Add a Gadget in the area you wish the subscribe by email widget to appear (in most cases this will be the sidebar).
3. Choose HTML/Javascript widget
4. Paste the widget code into the content box
5. Click on the Save Button
6. Reposition the widget if necessary. A good place is at the top of the right sidebar and Save.
7. Click on View Blog to see your new email form in your blog

Add an Email Subscription Link to Blogger
Note you can also add an email subscription link to your blog. Either copy and paste the link from the Feedburner Subscription Management Page into your blog or you can automatically insert it by following the same steps as with the automatic insertion of the email subscription form. You will find the code for the link in a text box below the code for the form on the Subscription Management Page. Email subscription links are useful both in the sidebar and beneath each post.



Check Your Subscribe By Email Form is Working Correctly
Once your subscribe by email widget is safely installed your form is ready for use. I suggest you test drive it to make sure it is performing correctly. Besides if you sign up you will have at least one subscriber right? Also you may want to regularly check who is subscribing to your blog by email by navigating to the Feedburner > Publicize page for your blog.

1. On the homepage of your blog enter your email address and click on the Subscribe button.
2. You will be take to a Feedburner Email Request screen with a captcha check for spam. Enter the sequence of alphanumeric characters into the text box.


3. Click on the Complete Subscription Request button
4. You will now be informed that your request was successful and that you will need to click on the activation code in an email that has been sent to you.
5. Open your email program and retrieve the email and follow the activation link. You will then receive an Email Subscription Confirmednotice from Feedburner. As the notice points out you will only receive an email if you make a post so you will need to get cracking on writing your next post.



In this tutorial you have learned how to add an email subscription form to a Blogger Blogspot blog so that your readers can enjoy receiving your most recents posts directly to their mailbox. Allowing visitors to sign up for your feed via email will promote your blog and can easily turn a new visitor into a regular follower. An alternative to an email subscription form is to insert a subscription link into your blog. I find a good place for an email subscription link is after each post to encourage visitors to sign up for my feed. 

Add Meta Tags to Blogger for Better SEO

What are Meta Tags?
Meta tags are HTML tags that provide additional information about your blog that is unseen by visitors but available to search engines. The meta description tag, for example, provides a short summary of the page content. The keyword meta tags show the keywords and keyword phrases a visitor might use to find your blog. Because of abuse of meta tags search engines have become smarter and most no longer place emphasis on keywords to establish page ranking however keyword meta tags are still used by some search engines so it is a good idea to include them.

Limitations of Blogger and SEO
One of the disappointing aspects of Blogger is that it is not properly optimized for SEO. Meta descriptions and keywords are not supported by blogger.com by default. Title tags are also not optimized. This means that you will miss valuable opportunities to attract visitors to your blog. 

However meta tags and meta descriptions can be inserted into your Blogger template (Blogspot template) to good effect. Fortunately these work arounds will go a long way to improving the placement of your blog in search engine results. Please refer to adjust Blogger title tags for improved SEO for help with title tags.

Simply placing a meta tag description in your Blogger template is problematic because Blogger will use the same meta tags for all pages in your blog. This means that every entry that Google has for your site will show in search results with the same description. This solution would result in reduced traffic rather than increased traffic. However there is a way to add meta tags to the home page of your blog only which will not affect post pages in your blog. In this way visitors will find the home page of your blog in search engines by the use of appropriate keywords and a site description.

How to Add Meta Tags to a Blogger Blogspot Blog Home Page
1. Login to Blogger if not already logged in

2. Navigate to Design > Edit HTML

3. Back up your template as a precaution by downloading full template to your computer.

4. Check the Expand Widget Templates box

5. Find these lines which will be near the top of your template:

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

6. Paste the following code immediately below <title><data:blog.pageTitle/></title>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Place your blog description here' name='description'/>
<meta content='Place your blog keywords here(separated by commas)'
name='keywords'/>
</b:if>

7. Enter your blog description between the single quote marks under description. Maximum 150 characters

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Make sure your keywords do not exceed 200 characters

By way of example here are the meta tags I use for the home page of Blog Know How:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Find tips,tricks,tutorials,walkthroughs to customize your Blogger Blogspot blog.SEO,Banners,Adsense,gadgets,fixes,feeds,rss,help for beginner bloggers' name='description'/>
<meta content='blog,blogger,blogger.com,blogspot.com,blogspot,blogging,tutorials,tips,blogger help,customize blogger,SEO,make money,gadgets,Google Adsense,banners, feeds,analytics,solutions'
name='keywords'/>
</b:if>

9. Click on the Save Template button

10. To see your description in action you can either navigate to your blog's home page and click on view source in your browser. In Internet Explorer you will find this option in the view menu. A text document will appear which you can scroll through. You will see your description near the top of the document. Alternatively you can check your description in a free Meta Tag Analyzer tool such as Submit Expressor SEO Centro


How to Add Meta Tags to a Blogger Blogspot Blog Individual Post
1. Follow steps 1 to 4 as for adding meta tags to the Home Page

2. Add the following in the <head> section of your Blogger template. Enter this code below the Home Page code above you have just entered:

<b:if cond='data:blog.url == "http://url of your post"'>
<meta content='keywords pertaining to your post' name='keywords'/>
<meta content='crafted description of your post' name='description'/>
</b:if>

Here is an example of optimized meta tags for this post:


<b:if cond='data:blog.url == "http://blogknowhow.blogspot.com/2009/05/add-meta-tags-to-blogger-for-better-seo.html"'>
<meta content='meta tags,optimize blogger,blogger SEO,search engine optimization, blogspot,blogger,blogspot.com,blogger.com,blogging,blog' name='keywords'/>
<meta content='Improve SEO by adding meta tags to your Blogger Blogspot blog. Step by step tutorial shows you how to add meta tags to the home page and a single post' name='description'/>
</b:if>

3. Add your post URL, keywords and description. To find the URL of your post navigate to the post's page and copy the link showing in the address bar of your browser including the http:// prefix 

4. Click on the Save Template button

5. To check your description you can use the view source in your browser once you have navigated to the post page or a meta tag analyzer

Note: This method is suitable if you have a few key posts that you want to ensure you get maximum traffic on. If you have a lot of posts this manual method would be very tedious. I don't know of any automated method or script to add meta tags at this point but I am investigating it and will keep you posted.


Analyze Your Blogspot Blogger Meta Tags
Once you have added meta tags to your blog you can use tools to analyze them to ensure their relevance. Aim for meta tag relevancy to page content of above 90%. To check this you can use a free meta tag analyzer tool such as Submit Express or SEO Centro


Troubleshooting and Tips

• Observe Character Limits
  To avoid problems ensure that you keep within the maximum character limits:
  
  

  Title Tag - Maximum Characters is 60
  Site Description - Maximum Characters is 150
  Keywords - Maximum Characters is 200

• Title Tag Tweak
  If you have inserted the title tag tweak and it is highly recommended that you do so then you will need to add the code above after the title tag adjustment in the <head> section of your template. Read more about adjusting title tags
  
• Keywords
  Although some search engines no longer place too much emphasis on keywords some still do so it is worth adding keywords. Avoid using the same keyword more than 3 times. The maximum number of keywords recommended to be robot friendly is around 20.
  
• Problems Reading the Code
  Some readers have reported problems with their browser reading this code. Try this document form of the article if this happens to you

In this Blogger meta tag tutorial I have discussed the best way to add meta tags to a Blogger blog (Blogspot blog) to improve search engine results given the limitations of the Blogger platform. In this article you have learned to add both meta tags for keywords and descriptions to the home page. You have also learned how to add meta tags to an individual post. To optimize your meta tags I have included links to free meta tag analyzer tools.

Adjust Blogger Title Tags to Improve SEO

This Blogger tutorial explains how to improve search engine optimization (SEO) of your Blogger blog (Blogspot blog) by optimizing your post title tags for search engines like Google and Yahoo. How to improve search engine results by optimizing post title tags.

By default your Blogger blog (Blogspot blog) does not have search engine optimised title tags. This puts your blog at a disadvantage compared to other blogs that have inbuilt SEO or enhanced SEO modules as these sites are likely to be placed more highly in search engine results.

The title tags of your blog are ordered by blog name first followed by the title of the post. This is not ideal for popular search engines like Google and Yahoo which give more importance to the first words of a title. By way of example take a look at how the title tags of this blog were viewed in a browser before any SEO. Note the order of the tags: Blog Name | Post Name.



When this site was first indexed by Google this is the search engine results this site received. Note how the blog name is first in all the results.



Fortunately there is a simple tweak to your template which can rectify this problem. By simply reversing the position of the blog name and page title significant improvement can be gained in search engine results. See the difference in the example below:



Follow the step by step guide below to achieve higher rankings in search engine results.

Tweak of Title Tags for New Blogger (beta) Blogs

1. Login to your blog at Blogger.com and navigate to Design > Edit HTML

2. Backup your template by downloading it to your computer. This will ensure that you can upload your template before these changes in case of problems.

3. Replace the following line of code (about 5-10 lines from the top):

<title><data:blog.pageTitle/></title>

with (highlight code, Ctrl + C to copy)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> |
<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

4. Click on Save Template and then View Blog. Navigate to an individual post. You will see that your page title is now first followed by your blog title. A pipe symbol separates the two.


Below is an example of the change in search engine results since the tweak was implemented for this site. Since optimising for search engine friendly page titles there has been a significant improvement in traffic accessing the site. This didn't happen right away but if you too implement this page title tweak and continue to deliver quality content you are on your way toward higher search engine rankings.



Troubleshooting
Several readers have reported issues with the line:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

If you experience problems try inserting this line instead which works on many blogs. Ensure you have double quote marks around item followed by a single quote mark: 

<b:if cond='data:blog.pageType == "item"'>

For more on this please read the comments section.

UPDATE
Due to the number of readers experiencing problems with their browsers reading this post I have created a PDF file of this article which is free to download

This Blogger tutorial (Blogspot tutorial) has discussed how to adapt the title tags of a Blogger (Blogspot) blog to improve search engine optimization (SEO) by Google,Yahoo and other search engines.

How to Create Search Engine Friendly Permalinks for Blogger Posts

What are Permalinks?
Permalinks are the permanent links to a post page. Blogger automatically generates a permalink based on the title of your post. Permalinks provide information to the viewer about the kind of content being pointed to.

Permalinks create permanent links to your Blogger posts which are indexed by search engines such as Google. Search engines use permalinks to categorise posts. Browsers use permalinks to help navigate to your posts. When you hover over a permalink in your browser you can read the post name in the status bar.

The permalink for this article is:

http://blogknowhow.blogspot.com/2009/02/improved-permalinks-for-blogger-posts

Tips for Working With Permalinks in Blogger
While other blogging software such as Wordpress allows the user to edit permalinks Blogger has no such feature. For this reason care needs to be taken when creating titles for your posts as the permalink generated from the title can't be changed later. While your article is in draft form you can continue to change the title as many times as you like. However, once the permalink is assigned at the point that the post is published it remains the same no matter how many times you change the title of your post. 

Another issue with Blogger is that it takes only the first 35-40 characters of your title to create the permalink so if you have a longer title you can run into problems. My suggestion is that you design your titles carefully if you want to avoid losing the end characters from your permalink. For instance a long title such as the one below would result in a shortened permalink which would lose the important fact that this post is related to working with Blogger:

http://blogknowhow.blogspot.com/2009/01/how-to-create-user-friendly-permalinks-for-blogger-posts

Fortunately there is a way around this problem. You will need to publish and then republish as I did with this post. The method involves creating a shorter title that will adequately summarise the content of your post (eg Improved Permalinks for Blogger Posts) and then publishing your post. Now go back and change the title to the one you prefer. In this case I changed the title to "How to Create User Friendly Permalinks For Your Blogger Posts." Now your title can be as long as you like. As you can see mine is longer than 40 characters. The permalink, however has remained the same even though the title has changed. 

You can use this trick to create eye catching and memorable titles. It will also ensure that the permalink reflects a concise title and that unnecessary details in the permalink are removed. Creating concise permalinks is important for Search Engine Optimisation. Read more about Search Engine Optimisation in the blog tutorial Tips for Search Engline Optimisation.