Google Friend Connect is a set of Google gadgets designed to turn your blog or website into a community with nothing more than copy and paste.
Adding Friend Connect features to a website requires no programming skills; you just copy and paste snippets of HTML code onto your site. You can can also add custom integrations with Friend Connect’s API.
Unfortunately for WordPress users (more specifically Firefox visitors to WordPress blogs) it doesn’t work quite that easily. Simply pasting the provided code into a sidebar text widget won’t work for any of your site visitors using Firefox. Internet Explorer is OK – and that is about the only time that phrase will leave my lips.
Before you start take the opportunity to join my Google community – please- come on it looks sad there with no one in it. My mum checks this blog, I want her to see I have some friends.
How to make Google Friend Connect with Thesis, WordPress and Firefox
Step 1.
Log into Google Friend Connect and get the code for your members gadget.
The code comes in three parts.
The Google Friend Connect Library
<!-- Include the Google Friend Connect javascript library. --> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
The DIV tag (marking the insertion point for the gadget)
<!-- Define the div tag where the gadget will be inserted. --> <div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>
The skin (or render) JavaScript
<!-- 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';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-4138360605280xxxxxx',
site: '06043523137538175547' },
skin);
</script>
Step 2.
In WordPress go to Appearance, Widgets and add a new Text widget to the sidebar where you want the gadget to appear.
Leave the title blank (my preference, feel free to do what you like)
In the body of the widget paste ONLY the DIV portion of the Google Friend Connect Code
<!-- Define the div tag where the gadget will be inserted. --> <div id="div-4138360605280xxxxxx" style="width:276px;border:1px solid #cccccc;"></div>
Step 3.
Go to Thesis Options (/wp-admin/admin.php?page=thesis-options)
Expand the Footer Scripts option panel.
Above any code that may already be in there (like Google Analytics) paste
<script>
window.JSON = {
parse: function(st){
return st.evalJSON();
},
stringify: function(obj){
return Object.toJSON(obj);
}
};
</script>
Below this snippet (required for Firefox) paste the Google Friend Connect Library code and the skin JavaScript.
<!-- 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';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-4138360605280xxxxxx',
site: '06043523137538175547' },
skin);
</script>
Conclusion
There really isn’t one. I have no idea why Google’s code doesn’t work – I can not understand the management decision making that allowed it to be released.
The code above will work for any WordPress site, but instead of being able to paste the code into a Thesis Option panel, just open your footer.php file in the WordPress Theme Editor and paste it directly above the </body> tag.
Would love to hear from anyone this helps, remember to use the code Google gave you, not my code – sing out if you have any trouble.
No related posts.
Tags: Thesis
Thank you so much for sharing this! I just migrated my blog from Blogger to WordPress, and I could not figure out how to make Friend Connect work.
By the way, I found your website through your profile on Experts Exchange. (I work there.) Thank you for being a part of the EE community! I’m thrilled that you are a part of the site!
-Jenn
My pleasure. Love Experts Exchange – I have to keep putting the brakes on though – I could waste a lot of work time answering questions. Thank you for connecting, glad I could help with the transition.
Oh yay! I’m glad you love EE! I know you said you’re trying to take a step back, but have you ever thought of writing Articles for EE? You’ve got such a great, conversational writing style–and your articles are so informative–that I think the community could really benefit from your work. You could also promote your company in the About the Author section. Totally understand if you don’t have time, though!
Also- have to tell you that your animated image on this blog and your website looks uncannily similar to you. Well done! I love it!
You say the nicest things. I’m blushing. I wouldn’t say no to writing an EE article (my biggest issue is always deciding on topics). Send me an email (andrew@andrewbleakley) (or find me on twitter/Facebook) and tell me more about EE articles and I will see what I can muster up.
I only step away form EE when I get too absorbed in it. You could easily loose a day answering questions and replying to people.
Unfortunately I can not take credit for my cartoon, the people at http://www.designfxpro.com/ did it for me based on a photo I emailed them – I agree though, they did a great job.
recently i just switched from blogger to wordpress. I love it but I am a bit technically challenged.
1. I read your article but I still can’t figure it out.
2. I am using firefox..but most of my readers use firefox.
3. I am self hosted (i guess that is what you call it…the freeby one through wordpress). I’m not sure if this article considered that.
4. I also want to transfer my readers from my old sit to the new one (the ones that are through GFC).
5. I have already added my new site to the GFC.
6. HELP? lol
please email me thehomemadecook@yahoo.com
Self hosted WordPress means you downloaded and installed WordPress on your own server – you do not self host WordPress.
If you can edit your Blogger template you could add a META Refresh tag to direct visitors to your new WordPress website, add the following before the
As for transferring your readers, have you tried to just change the URL in your GFC settings – you can export your friend data but I don’t know of anyway to import them – worst case you coulf export them and then send them invites to your new community, but I would try and just change the URL first.
Use my contact form if you need anything else I am sure I can help you
yahoo! thank you so much, i have been trying for a couple of weeks to get this silly gadget working with my thesis theme site and this tutorial finally did the trick! i have had so much trouble getting this thing to function on every page/post for my site that i actually took the gadget down over a year ago, and now i am so happy to have it working! a thousand times thank you!
My absolute pleasure Rayan – enjoy the rest of your weekend now.
Hi. Im having trouble following your guide. Eng. isnt my laung, but I try my best to understand
When I end up on DIYthemes.com I get lost… Then what? I cant understand the next step, but its killing me that I cant use freind connect on my blog, så please help 
Thanks
use the contact form to email me and I will help you
Thanks for the marvelous posting! I certainly enjoyed reading it, you might be a great author.I will make sure to bookmark your blog and may come back someday. I want to encourage continue your great job, have a nice weekend!