Category: Google Friend connect

Update on Top 10 Members gadget

Add Top 10 Members gadget to Blogger blog | Other platforms

From the time I developed the Top 10 Members gadget (a year back), I got feedback from site owners saying that they don’t want to show up on their own site. I thought of providing an option, but did not get enough time. Now I have added a “Hide Me!” checkbox, that anyone can use to hide themselves from being shown up on the gadget.

Even if the user has selected to hide him/herself, the visit will still be counted, so that anytime when he/she changes the mind, their position on the gadget will be appropriate.

See, I have made 118 visits, but not appearing in the Top 10 members list.

image

Let me know if you face any issues.

Know your GFC Members easily

IMG_0065 Some time back, I got a question “Can you make some GFC gadget which can list all the members in a CSV?”

I am giving a solution now. Get your GFC Site ID (what is GFC Site id?), and paste in the below text box and submit. You will see the list of members with their details.

It may take some time (around 15 seconds) to list all Google Friend Connect Followers’ details. Be patient !!

Your GFC Site ID:
Max members to select: (eg: 1000)

Google Friend Connect vs Facebook Social Plugins

Google Friend Connect Facebook Social Plugins
Becoming a member / Fan Click the Follow button and need to authenticate with Google / Yahoo / Twitter / AIM / Netlog / OpenId Just click the “Like” button. (Should have signed into Facebook.com)
Recommendation gadget / Button Available Available
Recommending a post User just clicks “Recommend” button User just clicks “Like” button
Where the liked post/pages will be visible? Only in “Recommendations” gadget In “Recommendations” gadget and also in Facebook profile.
Analytics Available – only about the Members count. Much detailed analytics available in Facebook.com/insightsLike – Daily Active Users, New Fans, Demographics – Gender and age, Countries, Activity – Media consumptions and much more.
Comments gadget Available Available
Activity Feed Available Available
Custom gadgets directory Available Not Available

Facebook page Insights

Who likes this – Google Friend Connect gadget

This gadget gives the option for users to like the page /post. In addition to that it shows the list of members who already liked the page, and also the other pages the same members have liked. Thus it gives a set of recommended pages to the reader from other readers who found them interesting.

If you do not have Google Friend Connect, please get it.

All blogger blogs are already set up with Google Friend connect.This gadget needs to be set up for each webpage/blog post of the site.

I will first explain how to add this gadget for non-blogger website and then for Blogger blogs.
Non-Blogger websites
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/who-likes.xml

Add Gadget by URL

5. Customize the gadget

Page Title and Page URL need to be provided properly for each page of your website.

Customize the Gadget

6. Click on Generate Code



7. Copy the code and past in your web page


If you need multiple instances of gadget in the same webpage, give different div id’s in the code


Configuring the gadget for Blogger:
1. Follow the same process given above, but give Page Title as  and Page URL as 

Configuration for Blogger



2. Generate the code, 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:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/'
/* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-XXXXXXXXXXXXXXX',
   url:'http://xmlgadgets.com/ig/who-likes.xml',
   site: '18370910113884099612',
   'prefs':{"pageTitle":"<data:post.title/>",
"pageUrl":"<data:post.url/>","maxMembers":"2",
"imagewidth":"25"}
 },
  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:300px;border:1px solid #cccccc;" ></div>
<div expr:id='data:post.id'
 style="width:300px;border:1px solid #cccccc;" />
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
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://xmlgadgets.com/ig/who-likes.xml',
   site: '18370910113884099612',
   'prefs':{"pageTitle":"<data:post.title/>",
"pageUrl":"<data:post.url/>","maxMembers":"2",
"imagewidth":"25"}
 },
  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.

But, please do not use Recommendation gadget along with this gadget in Blogger, because only one of these will function properly (since we use Post-id as the div id for these gadgets).Any queries, feedback, comment here.

Google Friend Connect – Members Count gadget

Unfortunately, the Members gadget for Google Friend connect is not displaying the correct count of Members. It is adding 4 or 5 more to the count, which is the number of pages of members. (Well, It may be adding the blocked members also, I am not sure about that.)

Here is a gadget available, which will just display the count of GFC Members.

Adding to Blogger blog:
Click here to Add Members Count to your Blogger blog

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. Goto the bottom of the page and click “Add Gadgets by URL” link.
4. Provide Gadget URL as : http://xmlgadgets.com/ig/counter.xml
5. Click “Continue” button
6. Click “Generate Code” button and add the code.

Note: The count may be lesser than what is shown in actual members gadget, but believe me, this counter is showing the correct count of your site members.


Please comment here, your feedback about the gadget.

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.

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 !

Google Friendconnect gets more Features

Google Friendconnect has now got More Features.

Adsense (ads based on your site and member’s interest),
Newsletter (Send Newsletters about your site to all your site members),
Polls gadget (new) and more.
Checkout how to add all these features to your Friendconnected site.


Gather User’s interesets:
Using this functionality you can embed a Google Spreadsheet form as a gadget and get responses from your site members.

Enhance your Ads:
You can now link your Adsense account to Google Friendconnect.
And the ads will be related to site’s content as well as members’ interests

friendconnect

Send a Newsletter
You can include a Subscribe to newsletter button in your site.
And can send a newsletter about the site to all the site members from 

Google Friendconnect.



Learn More:

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