Category: Blogger

Configure Google Friend connect Recommendation gadget for Blogger

Google Friend connect ‘s recommendation gadget can be added to blogger blogs, since all the blogger blogs are setup with Friend connect.
The “Recommend it” button needs to be present for each blog post, and the Aggregation gadget will be only one for the whole blog.

GFC Recommendation gadget

Installing the Aggregation gadget is easier. But, how to add the “Recommend it” button for all the posts?
Copy the code provided under “Add this to the pages where you’d like a button to appear:” from Google Friend Connect .
It will look like,

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript"
src="http://www.google.com/friendconnect/script/friendconnect.js">
</script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-XXXXXXXXXXXXXXX" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'default';
google.friendconnect.container.setParentUrl('/'
/* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-XXXXXXXXXXXXXXX',
   url:
'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
   height: 21,
   site: 'XXXXXXXXXXXXXXXXXXX',
   'view-params':{"pageUrl":location.href,
"pageTitle":(document.title ? document.title
: location.href),
"docId":"recommendedPages"}
 },
  skin);
</script>

Some changes need to be done to the above code, for it to function in Blogger. See the below snippet, the red portions of the text are the ones you need to remove, and the green ones to be added.


<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript"
src="http://www.google.com/friendconnect/script/friendconnect.js">
</script>
<!-- Define the div tag where the gadget will be inserted. -->

<div id="div-XXXXXXXXXXXXXXX" style="width:100%;">
</div>

<div expr:id='data:post.id' style='width:100%;'/>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'default';
google.friendconnect.container.setParentUrl('/'
/* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-XXXXXXXXXXXXXXX' ,
id: '<data:post.id/>', url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21, site: 'XXXXXXXXXXXXXXXXXXX',
'view-params':{
"pageUrl":location.href,
"pageTitle":(document.title ? document.title : location.href),


'pageUrl':'<data:post.url/>',
'pageTitle':'<data:post.title/>',

"docId":"recommendedPages"} }, skin);
</script>

This code snippet has to be added to the Blogger template.
How to do it?
1. Goto Blogger dashboard of your blog.
2. Goto Layout tab, click “Edit Html”
3. Check the “Expand Widget Templates” checkbox
4. Locate
<div class=’post-footer’>
in the template.
5. Just below it, paste the code snippet, and save the template.

Any queries, feedback, comment here.

Orkut Share link for your Website / Blogger, WordPress blogs

Google has announced Orkut Share API (similar to Facebook share ) which can be added to any website / blog.Use the below javascript codes for Adding Orkut Share link to your website(s).

Description about the javascript parameters:
(Note: if you want a text only link, please use
customText : “Share this on Orkut!” instead of
customImage : ‘http://i48.tinypic.com/9urbs9.png’
in any of the below code)

1. Adding the default Orkut Share button to any webpage

<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>



2. Adding a custom Image with Orkut Share link

<script>var orkutShare = {
customImage : 'http://i48.tinypic.com/9urbs9.png'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

You can use your own Image by providing the Image url in the above code (In the place of http://i48.tinypic.com/9urbs9.png)


3. Sharing a custom URL, Page Title with default Image

<script>var orkutShare = {
url : 'http://www.didiknow.com',
title: 'Did I Know?'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

4. Sharing a custom URL, Page Title with a custom Image

<script>var orkutShare = {
url : 'http://www.didiknow.com',
title: 'Did I Know?',
customImage : 'http://i48.tinypic.com/9urbs9.png'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

5. Want more custom? you can provide the content text, and Thumbnail of your webpage, and also the message for sharing the page

<script>var orkutShare = {
url : 'http://www.didiknow.com',
title: 'Did I Know?',
customImage : 'http://i48.tinypic.com/9urbs9.png',
content : 'A blog that follows Google, Friend connect, 
GMail, Chrome and more..',
shareText : 'Check out this website',
thumbnail : 'http://i50.tinypic.com/2luuxw5.png'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

Change the URL and Page title to your own URL and Page title.

Adding Orkut Share link for Blogger blogs





1. Goto Blogger dashboard of your blog.
2. Goto Layout tab, click “Edit Html”
3. Check the “Expand Widget Templates” checkbox
4. Locate
<div class='post-footer'>
in the template.
5. Just below the above code, paste any of the below code snippet, and save the template.


Default Orkut Share Image

<script>var orkutShare = {
url : '<data:post.url/>',
title: '<data:post.title/>'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>


Custom Orkut Share Image

<script>var orkutShare = {
url : '<data:post.url/>',
title: '<data:post.title/>',
customImage : 'http://i48.tinypic.com/9urbs9.png'
}</script>
<script 
src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

You can use your own Image by providing the Image url in the above code (In the place of http://i48.tinypic.com/9urbs9.png)

Adding Orkut share link to WordPress blog
Paste the following code on your single.php file, within the loop:

<a href="http://promote.orkut.com/preview?nt=orkut.com&
tt=<?php the_title();?>&du=<?php the_permalink();?>" 
target="_blank">Share on Orkut</a>


Instead of “Share on Orkut” text, you can use any image, like,

<a href="http://promote.orkut.com/preview?nt=orkut.com&
tt=<?php the_title();?>&du=<?php the_permalink();?>" 
target="_blank">
<img src="http://code.google.com/apis/orkut/docs/images/share.gif" 
border=0>
</a>

You many also want to add Facebook, Digg, Buzz, Tweet buttons or/and

Delicious bookmark button + Counter for your website, Blogger blog


Orkut Share on Google Code

Google Friend Connect – custom Sign in / Join link

Have you ever wanted to make more followers to your Friend connected blog/website?

Write your own words, and ask your visitors to join your site.

Below is the code that does.

But, dont forget to edit the custom text and write your own inviting, impressing text.
And, also the site id (in place of YOUR_SITE_ID_HERE), I hope you know, what’s the site id for Google Friend Connect sites.

<style type="text/css">
#gfc-buttonLink a {font-size: 14px; font-family: verdana; }
</style>
<script src="http://www.google.com/jsapi" 
type="text/javascript"></script> 
    <script type="text/javascript"> 
      google.load('friendconnect', '0.8');
    </script> 
    <script type="text/javascript"> 
      var SITE_ID = 'YOUR_SITE_ID_HERE';
      google.friendconnect.container.setParentUrl('/');
         google.friendconnect.container.loadOpenSocialApi({ 
            site: SITE_ID,
            onload: function() { renderButton(); }});
   </script> 

<script type="text/javascript">
     function renderButton(){
      google.friendconnect.renderSignInButton({ 
      'id': 'gfc-buttonLink', 
      'style':'text',
      'text':'This is the text asking your visitors to Join the site' });
    };
  </script>
<div id="gfc-buttonLink"></div>

You can also change the Font size, Font face, and any CSS style for the link.
Try, and let me know your feedbacks, comments.

Learn more about GFC buttons, and reach more members !

Recent Visitors gadget for Blogger / Google Friend Connect sites

Add ‘Recent Visitors’ to Blogger | Top 10 Members | Members Count

This Recent Visitors gadget for Blogger, displays the recent Google friend connect members who visited your site (recently).

The gadget code is available here.
How to add this gadget to a Blogger powered blog/site?

1. Goto the Layout page of your blog.
2. Click on “Add a Gadget”
3. Search for “Recent Visitors”

3. Click on the above shown gadget title.
4. Configure the gadget and save.

How to add this gadget for non-Blogger sites?

1. Login to Google Friend connect, and select the site you want to add the gadget to.

2. Click on “Gadgets”

3. Click “Add Gadget by URL” link at the bottom.

4. Give the gadget url as http://xmlgadgets.com/ig/recent.xml
5. Customize the gadget
6. Click “Generate Code” under “Create the HTML code”

7. Copy the code, add it to your site, Start using “Recent Visitors” gadget !!!

I had taken Eiji’s Footprint gadget as a base, and modified the logic for identifying the recent visitors.

This gadget doesn’t store the Timestamp of the visitors. Instead it keeps track of a number, which each recent visitor gets assigned (that is always higher than the second recent visitor who visited the site).

(The Timestamp tracking method fails in few cases, when the visitors have a wrong time in their Computers. And also in the cases when visitors come from different time zones.)

Please provide your valuable feedback/suggestion by commenting, which will be useful for improving the gadget.

Also Read
GFC Members gadget that directly links to Member’s sites
Top 10 Members gadget for Blogger/Google Friend Connect sites
Friend connect – Member details and Site Community gadget

Facebook share | Yahoo Buzz | Tweet this! | Digg it buttons for Blogger blogs

For adding (m)any of these buttons,
1. Goto Blogger dashboard of your blog.
2. Goto Layout tab, click “Edit Html”
3. Check the “Expand Widget Templates” checkbox
4. Locate

<div class='post-footer'>

in the template.
5. Just below the above code, paste any of the below code snippet, and save the template.







Yahoo Buzz button:


1. Square button with count

<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.in.js" 
badgetype="square">
<data:post.url/>
</script>

2. Text link with count

<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.in.js" 
badgetype="text-votes">
<data:post.url/>
</script>

3. Small icon with No text

<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.in.js" 
badgetype="logo">
<data:post.url/>
</script>

4. Large rectangular button with Count

<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.in.js" 
badgetype="large-votes">
<data:post.url/>
</script>






Facebook Share button


Large button with count

<script>
var fbShare = {
url: '<data:post.url/>',
title: '<data:post.title/>',
size: 'large',
google_analytics: 'true'
}
</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>

Small button

<script>
var fbShare = {
url: '<data:post.url/>',
title: '<data:post.title/>',
size: 'small',
google_analytics: 'true'
}
</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>

Tweet this button

Square button

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript"
src="http://tweetmeme.com/i/scripts/button.js">
</script>

Small Button

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript"
src="http://tweetmeme.com/i/scripts/button.js">
</script>

Simple, direct “Tweet this” link

<a href="#" onclick="window.open('http://www.twitter.com/home?
status=Reading+Facebook share, Yahoo Buzz and Tweet this 
buttons for Blogger blogs+http://www.didiknow.com');">
Tweet this</a>

Digg this button


<script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title ='<data:post.title/>' ;
digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' 
 type='text/javascript'></script>

For any problems in adding these button, write a comment below.

You may also want to add Orkut Share link for your website/ Blog or/and

Delicious bookmark button + Counter for your website, Blogger blog

Adsense integrated to Blogger

Making money with your Blogger blog has become more easy.

Adsense has been integrated Blogger, and without logging into Adsense website, we can add the Ads, track them, and follow our earnings report.

Previously, we needed to add individual adsense segments in blogger, and track the performance from adsense interface. Now we can choose in a single step, how we want the ads to appear in the blog.

How to configure ads to my Blogger blog?
Just go to the Monetise tab of your Blog dashboard in Blogger, and follow the simple steps.

adsense in blogger

And you can also view the adsense reports for the blog directly from the Blogger dashboard.

adsense in blogger 2

Try this, and tell me how it works for you.
Recommend this post for others, if you liked it.

Windows Live Writer for posting to Blogger blogs

Windows Live writer seems to be a great tool for posting and managing Blogger blogs. This post is being posted through Windows live writer.

Not only Blogger, Live Writer supports many of the popular blogging services. We can use many of the editing tools for the blogs, and can add Images, Videos, Hyperlinks, Tables, much faster.

One major advantage of using writer is that, we can preview the complete Blog page, while creating a post.

Some of the screenshots are below.Live Writer

Live Writer 2

In addition to those features, it allows you add a bing map also to the blog post.
Give a try, you will definitely love it, download.live.com/writer


But, adding the Blogger labels seems to be difficult, which needs to be done from blogger.com
Also, there are many plugins available for live writer.

Top 10 Members – Google Friend Connect gadget

Add ‘Top 10 Members’ to Blogger | Recent Visitors | Members Count

Update on Top 10 Members gadget

This Top Ten Members gadget for Blogger, displays the top 10 Google friend connect members of your site, according to the number of times they visit your site.

The gadget code is available here.

How to add this gadget to a Blogger powered blog/site?

Click here to Add “Top 10 Members” gadget to your blogger blog.

Otherwise,

1. Goto the Layout page of your blog.
2. Click “Add gadget”
3. Click “Add your own”
4. Give the gadget url as http://xmlgadgets.com/ig/top10.xml and save.

How to add this gadget for non-Blogger sites?

1. Login to Google Friend connect, and select the site you want to add the gadget to.

2. Click on “Social Gadgets”

3. Click “All Gadgets” tab.

4. Locate “Top 10 Members” gadget, and click, “Get this gadget”

5. Click “Generate Code” under “Create the HTML code”

6. Copy the code, add it to your site, Start using “Top 10 Members” gadget !!!

I had taken Eiji’s Footprint gadget as a base, and modified it for my requirement.

Please provide your valuable feedback/suggestion by commenting, which will be useful for improving the gadget.

See the Gadget in action: BSE Stock watch

Also Read
GFC Members gadget that directly links to Member’s sites
Recent readers gadget for Google Friend Connect / Blogger sites
Recent readers gadget by Gene
Friend connect – Member details and Site Community gadget

Custom BSE Stocks watch – GFC gadget

This Custom BSE Stocks watch gadget for Blogger, GFC sites displays the stocks provided by the users, and updates the stock prices without needing to refresh the page.

How to add this gadget to a Blogger powered blog/site?

1. Goto the Layout page of your blog.
2. Click “Add gadget”
3. Click “Add your own”
4. Give the gadget url as http://xmlgadgets.com/ig/gfc-sensex.xml and save.


How to add this gadget for non-Blogger sites?

1. Login to Google Friend connect, and select the site you want to add the gadget to.
(If you didnt register your site in Google Friend Connect, Please register.)

2. Click on “Social Gadgets”

3. Click “Add Gadget by URL” at the bottom of the page.

4. Give Gadget url as http://xmlgadgets.com/ig/gfc-sensex.xml

5. Click “Generate Code” under “Create the HTML code”

6. Copy the code, add it to your site, Start using “Custom BSE Stocks” gadget !!!



Please provide your valuable feedback/suggestion by commenting, which will be useful for improving the gadget.

All Blogger blogs setup with Google Friend Connect

As already expected, Google has now merged, Blogger‘s Follower gadget with Google Friend Connect .

From now, Blogger followers dont need to login only with their Google id, they can use their Yahoo id, AOL or Open id.

But remember, the Blogs you follow are included in Google Reader, only if you use your Google id, of course.

If you are already using Google Friend Connect for Blogger (like me), those users are NOT automatically added in the Followers gadget.

Learn More:
http://googlesocialweb.blogspot.com/2009/02/blogger-and-google-friend-connect-unite.html
http://googleblog.blogspot.com/2009/02/blogger-connects-to-google-friend.html