Adding Google Friend Connect to TypePad Blogs

 

Feeling inspired by a little blog consulting I received from Andy Wibbels (more on that in a bit), I decided to try to see if I could get Google Friend Connect working on my blog.

The Background: I’m not a coder. I know just enough HTML to fix a blog post, but not enough to code a blog or do whatever developers do. Whatever I was going to do was going to be on a TypePad template.
The First Step: Thanks to Andy, I found out about a great feature on TypePad that helps you enter HTML code. Already, I had cleaned up my blog a bit because of this. All you do is pick your blog, go to Design, go to Content, and scroll down the Modules tab and hit Custom HTML, and then add that module. Save the blog, as you’ll need to edit this a bit later. You can put multiple blocks of code in there. For instance, I have my code for Google Analytics in that box.
Googling Google Friend Connect: This was a ‘duh’ step. I went in Google and Googled “Google Friend Connect,” which not so amazingly took me to the GFC site. There’s a big button that says “set up a new site.” Click it. Click GFC for standard sites and enter your site name.
Create Pages: Now you have to start getting crafty. But again, you don’t have to get too technical. You’re supposed to download two pages from Google and upload those pages. The catch is that you can’t just upload files like this to your blog and have them in the right place. I turned to Google again, querying “google friend connect typepad blog.” I went to the third link and it showed me a great workaround. The gist: you create Pages on TypePad (instead of blog posts or uploading files).
For each of the files Google gives you, download them, open them in your browser, view the source, copy the code, and paste the code into the “edit html” part of the TypePad Page you’re creating. Name the page after the file name (in the title, but “canvas” for the Google “canvas.html” file, for example). The only change I had to make to the HTML was that somewhere in canvas.html, you need to change “site name” to whatever name the name of your site is.
By the end of this process, you’ve got two new pages on your site that have the same names as the Google files you need.
Check, Please: Go back to Google Friend Connect and test the code works. Then you can design it. You need to set the right width. I wasn’t sure the width of my right-hand bar so I went to my own profile photo on the right, right-clicked, hit “Properties,” checked the width, and used that as the width for Google Friend Connect on my blog.
Come Full Circle: Now take the code Google gives you and put it in that Custom HTML module you have on your blog.
Two me, there were only two catches:
1) I couldn’t control where GFC appeared on my blog. Not a huge deal.
2) It’s a little narrow the way it works on my blog. It would be nice if I had more room. But nto a huge deal. You can also expand the window.
What I Like about Goo: Now I’ve got a community on my blog. It’s not a very big one. But if I go to GFC or the expanded page on my site, I can connect with other readers of the blog. And more importantly, they can connect with each other. We can share information and get to know each other. All of it’s without a separate log-in. I like viewing this blog as a community rather than a sounding board. Sounds cool, eh? It’s not much, but given that it took me five times as long to write this post as it took me to implement a community on my blog, I’ll take it.