Category: Gadgets

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.

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.

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

Access Google Latitude from GMail

In order to use Google Latitude from Gmail, you should have enabled Gadgets in Gmail.

Once you have done that, go to the Gadgets tab in Gmail settings.
Give the gadget’s url as http://www.google.com/ig/modules/fv.xml and add.

Now you are set to use Latitude from Gmail. The Latitude gadget appears on the left navigation bar of the Gmail page. When you click on your photo in the gadget, it gets launched in its canvas view (full screen).

Google Latitude in Gmail
Related Posts:
Add Yahoo Mail/ Hotmail gadget to GMail/iGoogle
Add Orkut Birthdays gadget to GMail/iGoogle
Add Orkut Scrapbook gadget to GMail/iGoogle

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.

GFC Members gadget that directly links to Member’s sites

This gadget is intended for Google Friend Connect users, Blogger users.

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

You can add a members gadget that displays Google Friend connect members of your site, and the thumbnail of the members directly links to any URL provided by the member.

This gadgets favors the site members the most, since it adds a direct link to the member’s own site. When more members are interested in joining your site, in turn, you get more Followers/Members.

When a visitor, who is not a member of your site visits the site, the welcome message says, Please Sign in to this site and Leave your link. After the user joins, it asks for the website URL of the member, which can be updated anytime later. The members need to give the complete url (with http://) in the text box provided, and click the update button. They get a confirmation message saying “Update Successful!”

The gadget is available in http://xmlgadgets.com/ig/member-link.xml, which displays only the members who shared links

It is better to also add a sign-in gadget above this gadget, which will be handy, when a visitor wants to join the site.

If your site has more members (say 150), consider adding text-only version of this gadget (http://xmlgadgets.com/ig/member-link-text.xml), so that it doesn’t occupy much space.

Members gadget that directly links

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/member-link.xml and save.

How to add this gadget to non-blogger sites?

1. Set up your site in Google Friend connect, if not already done.

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/member-link.xml
(or http://xmlgadgets.com/ig/member-link-text.xml), if you want a text only version)

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

6. Copy the code, add it to your site, Start using “Member Links” gadget !!!

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

Also Read Top 10 Members – Google Friend Connect gadget






Developing GMail Apps (gadgets) with full (Canvas) view

In one of the previous posts , we saw about how to add iGoogle gadgets to GMail.These GMail gadgets need not be only in the small sidebar, which of less than 200 pixels width.

Since iGoogle now supports gadgets with Canvas view, GMail gadgets can also be with canvas view (full view).
We will see how to develop a simple GMail app, with Canvas view enabled.If you can code html, check the simplest form of a Google gadget below.
 Google Gadget
 The Gmail gadgets are same as Google gadgets, just appearing in the GMail page.For the Canvas view application in GMail, the ModulePrefs tag should look like
 

Here, we have enabled different type of views, Canvas and default using <Require feature=”views”/>And maximizing the gadget is enabled using <Optional feature=”maximize”/>

 Let us now go to the sidebar view part (i.e the default view.It should look like,

The link, javascript:goToView(‘canvas’) can take us to the full view.Even the sidebar can some content which can be coded in the above CDATA section.Now the Canvas view can have the basic form as below.

The complete xml file should be like,

After coding the complete gadget as above, upload the xml file somewhere.
Now, you have the xml file uploaded somewhere, and its url ready.

How to add the gadget application to GMail?
 1. In Labs tab, under Gmail Settings, Enable “Add any gadget by URL” feature, Save changes.
 2. Now Go to the Gadgets tab in Gmail settings.
 3. Give the gadget xml file’s url, and add the gadget. (for eg, http://www.google.com/ig/modules/datetime.xml)

 Twitter application for GMail