home Twitter RSS feeds

Tutorial: Adding in Google Friend Connect (REVISED)

Blogged by: Kitty on Friday, March 02, 2012   Facebook comments: comments

UPDATE: AS OF MARCH 1ST 2012, GOOGLE HAS DECIDED TO RETIRE GOOGLE FRIEND CONNECT, WHICH MEANS THE OLD TUTORIAL WILL NOT WORK ANYMORE.
The tutorial below is a simple technique that allows you to get around this restriction.

NOTE: This tutorial is for Classic Blogger templates only. Those using the New Blogger (Template Designer) can still add the gadget through the Layout section.


Step 1
You will need to upgrade your Blogger from Classic Template to (New Blogger) Template Designer. Pick any premade layout that is listed there, it doesn't matter. Don't worry, your old Classic Template will not be gone, it will only be deactivated and will be activated again if you want to revert your Blogger back to Classic Template later. Or if you want, you can save your Classic Template into your computer for safe-keeping.


Step 2
Once you upgraded your Blogger, go to Layout and click on Add a Gadget. Choose Followers from the list of widgets and add it to your blog. Click Save the arrangement.


Step 3
View your blog (click the View blog button) and look at the page source by hitting the CTRL+U keys or right-clicking your mouse and choose View page source. Scroll down until you find a group of codes that look like this:
DO NOT COPY THESE CODES AND PASTE THEM INTO YOUR BLOG BECAUSE IT WILL NOT WORK (THIS CODE WORKS ON MY BLOG ONLY). YOU HAVE TO COPY THE CODES FROM YOUR BLOG'S PAGE SOURCE ITSELF BECAUSE CODES ARE DIFFERENT FOR EACH BLOG.
<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;
gadgets.rpc.register('requestReload', function() {
document.location.reload();
});
gadgets.rpc.register('requestSignOut', function(siteId) {
google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">

function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};
holder.postFeed = "http://www.blogger.com/feeds/889576181672425959/posts/default";
holder.commentFeed = "http://www.blogger.com/feeds/889576181672425959/comments/default";
holder.currentBlogUrl = "http://testgroundxml.blogspot.com/";
holder.currentBlogId = "889576181672425959";
return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;

gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});
gadgets.rpc.register('set_pref', function() {});
registerGetBlogUrls();
}
</script>
<div id="div-15hc7ff1otyr9" style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#333333";
skin['ENDCAP_LINK_COLOR'] = "#cc3300";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#cc3300";
skin['CONTENT_TEXT_COLOR'] = "#333333";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#cc3300";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-15hc7ff1otyr9",
height: 260,
site: "06263409034181087069",
locale: 'en' },
skin);
</script>


Copy the codes you found from the page source and open your text editor (Notepad) and paste them into the text editor.

You can change the values in this section as you like:
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#333333";
skin['ENDCAP_LINK_COLOR'] = "#cc3300";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#cc3300";
skin['CONTENT_TEXT_COLOR'] = "#333333";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#cc3300";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif";



Step 4
Now it's time to change back your Blogger into Classic Template. Once you've reverted your Blogger back to Classic Template (your old template codes will still be there), get the codes from the text editor and paste them into your Classic Template where you want the gadget to appear. Click Save and you're done.

Labels: ,


Comments to Tutorial: Adding in Google Friend Connect (REVISED):


how to use that text editor?
tq.

@wan, just open up the Notepad program (if you are using Windows), then paste the codes there.

I've tried this code and after that I found an error like a 'not found' message in my friend connect widget. how to fix it?

Are you sure you copied the codes from your own source code page? As stated above, do not use/copy the codes above because it will not work on your blog.

If you follow the instructions carefully, the widget should work with no problem. :)

Thanks a lot..^_^

done follow here!

Thanks for the tutorial, helped me a lot!

I am using blogger template designer 'Simple' I tried to add followers to my blog but it just gives me a message and won't add it. How do I get a follower widget on my blog. I have read on the internet others are having the same problem since the friend connect is gone. Any simple instructions.

Hello KLW, for those who are using the new Blogger Template as yourself, you can add the Follower widget from the Layout section. Click on the Add a Gadget link and choose Followers from the list.

Thank you so much i'm so stupid, i didn't release the google friend connect button was the followers gadget. Thank you so much only just realised!
my-fashionobsession.blogspot.co.uk

thank you sooooo much !!! :D

can i take this tuto? I will give a credit :)

@Anis Syazwani, yes you may. :)

nice sharing thank you.....


Dear Sir,

Can You Pleaase Tell me How I will Add This Widget On My Weebly Blog.....

thanks

@Intraday community tips, please refer to my tutorial here: http://nekonette.com/tutorials/using-google-friend-connect-with-wordpress/

It says it is for Wordpress, but it can be used on other platforms as well.

Its not working :(

Hi, I have tried this method but it isn't working out. Im using blogger's classic template..

@Rayne and Samantha, please make sure you do not use the codes above. You have to get them from your own page source. This is because, this section:
{id: "div-15hc7ff1otyr9",height: 260,site: "06263409034181087069",locale: 'en' }
The value for id and site are different for each blog.

Hi! Thanks for the tuto!
I'm trying this out and I can't find the "followers" gadget in my Layout :(
There's only "Google+ followers" which looks different and doesn't allow people follow the blog but allows them to add me in circles. That is not exactly what I want. Is there no way of doing it any more?

Please do not mind the latest comment. Found it! I was sure it shall be in "basic" gadgets, but it wasn't. Thanks for the tuto again!

thanks kitty! it worked! kindly do a visit and hit my follower button :)

Even if I did this for a friend's blog, I can't do it with mine... Maybe the differrence is that she had some followers before?
I can't find the code D:

@Maki, you have to convert your template to the New Blogger template first then install the Followers code. Then look for the Followers code in your source code (use CTRL+U if you're using Google Chrome) and look for the codes there.

Yes, I did it, but even with the updated template, I haven't any contact in the follower box (even if in the blogger board ther's written that I have some!)
I don't know where the error is :(
Thank you for your kindness, anyway, I find this blog so useful! ^^

@Maki, do you mean you are able to install the Follower gadget but there are no followers in the box?

I looked up your blogs and I see some followers in them so I am not sure what exactly the problem is.

very very very helpful! Thank you!!!!!!!! :)

Thank you for the help !!

Thanks for ur tutorial.
that's very helpful..
:)

YOU.ARE.A.LIFE.SAVER.

Thanks for your tutorial...

Appreciate that...:)

Please visit my blog....

http://nurulamierulamir.blogspot.com/

Omg I am having terrible terrible trouble I have already started blogging but without this following gadget it is really stopping me! Please have a look at my blog Carmsx.blogspot.co.uk the gadget widget displays error. Can you please email please!!!! Carmendo@hotmail.co.uk I have been trying to fix this for a month now!!!

Thank u lots!

Hi! Thank you so much for this tutorial. I managed to get the codes for my Google Friend Connect, however, when I tried pasting it on my classic template under the "links" divider, it wont show up :( can you help? do I need to tweak the codes I have?

So how i can implement in my blog

@Julka Hendri, just follow the steps above.

thanks for sharing

Thank you so much! You're a life saver.

Post a Comment

Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.

Facebook comments to Tutorial: Adding in Google Friend Connect (REVISED):


Tutorial: Adding in Google Friend Connect (REVISED)

Blogged by: Kitty on Friday, March 02, 2012   Facebook comments: comments

UPDATE: AS OF MARCH 1ST 2012, GOOGLE HAS DECIDED TO RETIRE GOOGLE FRIEND CONNECT, WHICH MEANS THE OLD TUTORIAL WILL NOT WORK ANYMORE.
The tutorial below is a simple technique that allows you to get around this restriction.

NOTE: This tutorial is for Classic Blogger templates only. Those using the New Blogger (Template Designer) can still add the gadget through the Layout section.


Step 1
You will need to upgrade your Blogger from Classic Template to (New Blogger) Template Designer. Pick any premade layout that is listed there, it doesn't matter. Don't worry, your old Classic Template will not be gone, it will only be deactivated and will be activated again if you want to revert your Blogger back to Classic Template later. Or if you want, you can save your Classic Template into your computer for safe-keeping.


Step 2
Once you upgraded your Blogger, go to Layout and click on Add a Gadget. Choose Followers from the list of widgets and add it to your blog. Click Save the arrangement.


Step 3
View your blog (click the View blog button) and look at the page source by hitting the CTRL+U keys or right-clicking your mouse and choose View page source. Scroll down until you find a group of codes that look like this:
DO NOT COPY THESE CODES AND PASTE THEM INTO YOUR BLOG BECAUSE IT WILL NOT WORK (THIS CODE WORKS ON MY BLOG ONLY). YOU HAVE TO COPY THE CODES FROM YOUR BLOG'S PAGE SOURCE ITSELF BECAUSE CODES ARE DIFFERENT FOR EACH BLOG.
<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;
gadgets.rpc.register('requestReload', function() {
document.location.reload();
});
gadgets.rpc.register('requestSignOut', function(siteId) {
google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">

function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};
holder.postFeed = "http://www.blogger.com/feeds/889576181672425959/posts/default";
holder.commentFeed = "http://www.blogger.com/feeds/889576181672425959/comments/default";
holder.currentBlogUrl = "http://testgroundxml.blogspot.com/";
holder.currentBlogId = "889576181672425959";
return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;

gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});
gadgets.rpc.register('set_pref', function() {});
registerGetBlogUrls();
}
</script>
<div id="div-15hc7ff1otyr9" style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#333333";
skin['ENDCAP_LINK_COLOR'] = "#cc3300";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#cc3300";
skin['CONTENT_TEXT_COLOR'] = "#333333";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#cc3300";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-15hc7ff1otyr9",
height: 260,
site: "06263409034181087069",
locale: 'en' },
skin);
</script>


Copy the codes you found from the page source and open your text editor (Notepad) and paste them into the text editor.

You can change the values in this section as you like:
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#333333";
skin['ENDCAP_LINK_COLOR'] = "#cc3300";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#cc3300";
skin['CONTENT_TEXT_COLOR'] = "#333333";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#cc3300";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif";



Step 4
Now it's time to change back your Blogger into Classic Template. Once you've reverted your Blogger back to Classic Template (your old template codes will still be there), get the codes from the text editor and paste them into your Classic Template where you want the gadget to appear. Click Save and you're done.

Labels: ,



Comments to Tutorial: Adding in Google Friend Connect (REVISED):


how to use that text editor?
tq.

@wan, just open up the Notepad program (if you are using Windows), then paste the codes there.

I've tried this code and after that I found an error like a 'not found' message in my friend connect widget. how to fix it?

Are you sure you copied the codes from your own source code page? As stated above, do not use/copy the codes above because it will not work on your blog.

If you follow the instructions carefully, the widget should work with no problem. :)

Thanks a lot..^_^

done follow here!

Thanks for the tutorial, helped me a lot!

I am using blogger template designer 'Simple' I tried to add followers to my blog but it just gives me a message and won't add it. How do I get a follower widget on my blog. I have read on the internet others are having the same problem since the friend connect is gone. Any simple instructions.

Hello KLW, for those who are using the new Blogger Template as yourself, you can add the Follower widget from the Layout section. Click on the Add a Gadget link and choose Followers from the list.

Thank you so much i'm so stupid, i didn't release the google friend connect button was the followers gadget. Thank you so much only just realised!
my-fashionobsession.blogspot.co.uk

thank you sooooo much !!! :D

can i take this tuto? I will give a credit :)

@Anis Syazwani, yes you may. :)

nice sharing thank you.....


Dear Sir,

Can You Pleaase Tell me How I will Add This Widget On My Weebly Blog.....

thanks

@Intraday community tips, please refer to my tutorial here: http://nekonette.com/tutorials/using-google-friend-connect-with-wordpress/

It says it is for Wordpress, but it can be used on other platforms as well.

Its not working :(

Hi, I have tried this method but it isn't working out. Im using blogger's classic template..

@Rayne and Samantha, please make sure you do not use the codes above. You have to get them from your own page source. This is because, this section:
{id: "div-15hc7ff1otyr9",height: 260,site: "06263409034181087069",locale: 'en' }
The value for id and site are different for each blog.

Hi! Thanks for the tuto!
I'm trying this out and I can't find the "followers" gadget in my Layout :(
There's only "Google+ followers" which looks different and doesn't allow people follow the blog but allows them to add me in circles. That is not exactly what I want. Is there no way of doing it any more?

Please do not mind the latest comment. Found it! I was sure it shall be in "basic" gadgets, but it wasn't. Thanks for the tuto again!

thanks kitty! it worked! kindly do a visit and hit my follower button :)

Even if I did this for a friend's blog, I can't do it with mine... Maybe the differrence is that she had some followers before?
I can't find the code D:

@Maki, you have to convert your template to the New Blogger template first then install the Followers code. Then look for the Followers code in your source code (use CTRL+U if you're using Google Chrome) and look for the codes there.

Yes, I did it, but even with the updated template, I haven't any contact in the follower box (even if in the blogger board ther's written that I have some!)
I don't know where the error is :(
Thank you for your kindness, anyway, I find this blog so useful! ^^

@Maki, do you mean you are able to install the Follower gadget but there are no followers in the box?

I looked up your blogs and I see some followers in them so I am not sure what exactly the problem is.

very very very helpful! Thank you!!!!!!!! :)

Thank you for the help !!

Thanks for ur tutorial.
that's very helpful..
:)

YOU.ARE.A.LIFE.SAVER.

Thanks for your tutorial...

Appreciate that...:)

Please visit my blog....

http://nurulamierulamir.blogspot.com/

Omg I am having terrible terrible trouble I have already started blogging but without this following gadget it is really stopping me! Please have a look at my blog Carmsx.blogspot.co.uk the gadget widget displays error. Can you please email please!!!! Carmendo@hotmail.co.uk I have been trying to fix this for a month now!!!

Thank u lots!

Hi! Thank you so much for this tutorial. I managed to get the codes for my Google Friend Connect, however, when I tried pasting it on my classic template under the "links" divider, it wont show up :( can you help? do I need to tweak the codes I have?

So how i can implement in my blog

@Julka Hendri, just follow the steps above.

thanks for sharing

Thank you so much! You're a life saver.

Post a Comment

Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.

Facebook comments to Tutorial: Adding in Google Friend Connect (REVISED):


Hire me to design your blog!

I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.

The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.

How to place your order

Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.

Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank

I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.

Payment methods

Payment has to be made to either by PayPal, or Moneybookers.

However, if you choose to pay via (international) bank transfer, be aware that you may be charged for the transfer service.

Other important information

Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.

Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.

I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.

All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.

The designer

Kitty

Kitty. 29. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.

I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.

The website

This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.

Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.

Categories/Labels

Past layouts

These are the layouts that have been used on Codeislove.net previously.

Wooden board

Layout #1

Dark chic

Layout #2

Royal crimson

Layout #3

Articles, Tutorials and Contests

Articles


Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Tutorials


Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Popular tutorials:

Converting HTML layout to Wordpress series: How to code Classic Blogger template series:

Other tutorials:

Contests

Linkages

On-site navigation

Network

Looking for money-making opportunities? Check out these websites.

Blog Advertising - Advertise on blogs with SponsoredReviews.com

Business 2 Blogger

banner

Contact the webmistress

You can email me your messages/tutorial requests using the contact form:

Advertising

Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.

Simple site statistics:
Monthly Unique Visitors: 5000+
Monthly page views: 7,000 ~ 9,000

Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.

Get reviewed

You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.

Please send an email to me in this format and I will get back to you as soon as I can:

Name:
Email:
Website/blog:
Do you want the review to be public/private?

Websites/blogs currently being reviewed:
Aroha - Ashleenah
Twinkle Toes - Eryn - completed
Gadis bermata cokelat - Nurul Nabila - completed

Related Posts Plugin for WordPress, Blogger...