Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.Tutorial: Adding in Google Friend Connect (REVISED)
Blogged by: Kitty on
, 
Kitty, Pesxguin, Kitty, Yu. Syamz, Jessica, Unknown, Kitty, , nur sha, Anis Syazwani, Kitty, Unknown, Unknown, Intraday Commodity tips, Kitty, Unknown, Samantha Joy, Kitty, Unknown, Unknown, Unknown, Unknown, Kitty, Unknown, Kitty, YOU_NIQUE, Delphine., Dea Anindyta, Josephine, Nurul Amierul Amir, Unknown, Jacqueline Uy, Julka Hendri, Kitty, Krisella, Labels: Google Friend Connect, tutorial
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.
Comments to Tutorial: Adding in Google Friend Connect (REVISED):
said on July 5, 2012 at 3:40 PMtq.
If you follow the instructions carefully, the widget should work with no problem. :)
done follow here!
said on October 25, 2012 at 1:22 AMmy-fashionobsession.blogspot.co.uk
Can You Pleaase Tell me How I will Add This Widget On My Weebly Blog.....
thanks
It says it is for Wordpress, but it can be used on other platforms as well.
{id: "div-15hc7ff1otyr9",height: 260,site: "06263409034181087069",locale: 'en' }
The value for id and site are different for each blog.
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?
I can't find the code D:
I don't know where the error is :(
Thank you for your kindness, anyway, I find this blog so useful! ^^
I looked up your blogs and I see some followers in them so I am not sure what exactly the problem is.
that's very helpful..
:)
Appreciate that...:)
Please visit my blog....
http://nurulamierulamir.blogspot.com/
Thank u lots!
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.