Make your Blog/Site Socialize via Google Friend Connect

If you would notice, I just incorporated Google’s friend connect above the status bar of the browser. That bar is called “Social Bar”.

Many of us follow fellow Bloggers via the “Followers widget” provided by the BlogSpot template. But this widget serves nothing than just collect and display list of your friends.

Now to put that widget more useable, Make it alive  via “Social Bar”. All you have to do is go to “Google Friend Connect” and sign-in using your Google account. After signing in you will see Blog/web sites you added as well as your followers for each.

To Install the Bar, select “Social Bar” under the Blog/Site you wish to have Friend Connect gadgets. Then follow the simple instruction and modify options that suite your needs. There is a button to generate HTML code for pasting into your sites. One thing worth mentioning here is that there is no instruction where to put that code. So I advise that you put the code just above your template’s </body> Tag.

There is an option to put the “Social bar” on the entire site or a selected page. I opted to put the Bar across my site.

Another exciting widget that you can add is the “Add a Sign in gadget” under “Members Gadgets”. This gadget enable visitors to sign in to your site without the hassle of managing a database. If you’re a BlogSpot user, just add an “HTML/JavaScript widget” and paste the code provided in “generate code” button.

Website owners will now be able to use the “Followers widget” which is native to BlogSpot. As BlogSpot user, You may retain the widget already installed on your template or use the version from Friend Connect. I myself replaced the default widget for added control.

The next widget is “Social gadgets” which showcase individual widget  functionality of the “Social Bar” plus more.

 

 

I’d like to emphasize the use of “Recommend It” button above. If users recommended an Article in your site, that article will also appear on the “Social Bar” of the site’s where users opted to be a member of. Friends Connect is it?

So common friends lets put the bottom “Social Bar” on this blog into good use.

Google Friend Connect Awaken and strengthen your community. Let’s Socialize!

Note: For future reference. I created a central page for charts/tables/links at this location

Build your community
Anyone can join your site and discover other members by using information from a variety of services, including Google, Yahoo, Twitter, AOL, orkut, and Plaxo, strengthening your community as visitors become members.

Increase engagement
Choose social features from a catalog of gadgets created by Google and the OpenSocial developer community to keep your visitors more deeply engaged with your site and with each other.

No programming required
Simply copy and paste a few snippets of code into your site, and Friend Connect does the rest. Or use the Friend Connect APIs to integrate with existing login systems, social flows, and more.

Read the full article->

Create a Related Post for your Blog

Do you want to put a “Related Post” (Demo) just like the one shown above at the bottom of every articles in your blog? Then follow this simple steps in adding your previous articles at the bottom of every post.

Why placing Related Posts' Important?

• Get More Click Through Ratio (CTR) for your Pages
• Get More CTR = More Adsense Impressions.
• Gives Readers easy Navigation (about what to read next )
• Makes your Posts Sticky

Please note that your articles must have Label or Tag for related topics to be displayed. Also, don’t forget to “Download Full Template” of your blog before making any changes.

The BLOGSPOT window will be opened on the box below when you click the login button in Step #1. You can always open a new browser window if you want a larger view of the BlogSpot window..

To follow the step by step procedure, Just hover your mouse on the menu provided beneath this box.

Step #1 Login to Blogspot.com by clicking this button -> Locate the blog you want to edit then Click Layout. Note: If the options to the right of the "New Post" button are "Edit Post, Settings, Template" then you are using Blogger Classic, which is currently unsupported. Step #2 Select Edit HTML in the sub-menu at the top. Click Expand Widget Templates on the right side of Edit HTML window Step #3 Search for the </head> tag in your template. Select all text from the Code window #1 on the right. Right click and copy the selected text. Then paste the code just above the </head> tag you just searched. Step #4 The next step is to locate <data:post.body/> in your template. This time, paste the code from Code Window #2 on the right just beneath the text you just searched. Step #5 To test the code click at the bottom of the "Edit HTML" window. If there is no error you may now press the . Step #6 Congratulations! Please don't forget to comment. If possible include your website so I could drop your site a visit.

Code window #1 <!-- Related Post START --> <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { color : #940f04; font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color : #054474; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #054474; text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeJcy-icGRbgBspP-cT4jCOHrtG9kyhjpM7TIAfORcsRXa2tMlp3b-hMIRCoyGrtepfOaoYLCyvyD8jmzLYZcIfp38LuaSQWRnShQ1vHJ4vV8VShVCtO6-JUAKItv12nWlx974pXZBbdf/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 16px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://www.pooxie.net/javascripts/relatedpost.js' type='text/javascript'/> <!-- Related Post END --> Code window #2 <!-- Related Post START --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'> <b:loop values='data:post.labels' var='label'><data:label.name/> <b:if cond='data:label.isLast != "true"'>,</b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </b:if> </b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> <!-- Related Post END -->

Read the full article->

USE META TAGS IN YOUR BLOG FOR BETTER SEO

Every blogger want their site on top of every search engine results. One way to do this is by using META TAGS which help search crawlers index your site better.

In this article I’m going to show you a step by step guide for placing META TAGS to your Blogspot site. To do this you need to modify the template that your Blogspot site is using.

“For those new in Blogspot, a template is an XML/HTML file copy of your blog that contain section directives to display your blog content in different layouts.”

As a practice, always make a backup copy of your Blogspot template before changing anything. See the step for saving a backup of your Blogspot template.

I) BACKING UP YOUR BLOGSPOT TEMPLATE

Step 1) Sign-in to your Blogspot account

Step 2) After signing in you will be be re-directed into your Blogspot Dashboard

Step 3) Click “Layout” as shown in the image above.

Step 4) Click “Edit HTML”

Step 5) Click the “Download Full Template” , you will be prompted to save the template file into your local hard drive. When your done saving a copy. It is now safe to incorporate META TAGS code in your Blogspot template.

II) CREATING A META TAGS

There are many ways to insert a META TAGS in your template.

a) META TAGS for your blog – This is where you will put a general keywords that identify the main content of your blog topics . This type of META TAGS requires one time encoding.

b) META TAGS per POST (DYNAMIC) – Dynamic META TAGS automatically create TAGS for every post in your blog using the title you specified during publishing. This type of META TAGS requires one time encoding and is applied every post.

c) META TAGS per POST (STATIC) – Static META TAGS is used to specify any TAGS or KEYWORDS related to topics you are posting. This type of META TAGS requires encoding per post.

A) META TAGS for your blog

Step 1) While still in “Edit HMTL” window copy the code in the box below then search it from your Blogspot template.

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

You should mark the exact code as shown in the image below

Step 2) Copy & Paste the code in next box provided then replace the “<Title>…</Title>” you just searched. Make sure to update the following content with your own.

• BLOGNAME – Your Blogspot site name with .Blogspot.com at the end



• YOURTAGS – Main keywords for your blog separated by comma(,)



• BLOGDESCRIPTION – Description of your blog



• YOURNAME – your name as the Author

<code>
   <b:if cond='data:blog.url == "http://BLOGNAME.blogspot.com/"'>
      <title><data:blog.pageTitle/></title>
      <META name='Keywords'    content='YOURTAGS' />
      <META name='Description' content='BLOGDESCRIPTION' />
      <META name='Author'      content='YOURNAME' />
   </b:if>
</code>    

When your done pasting the code, the “Edit HTML” window should look something like the image below.

When everything is correct try to click the button in the bottom of "Edit HTML" window to make sure you have entered the correct code. Then click the button if there is no error found by blogger.com Please fee free to comment if you found portion that are not working. My next article will be on how to place a META-TAGS per POST (DYNAMIC) So stay tune.

SEO – Search Engine Optimization

Read the full article->