Google Friend Connect Canvas

I have been visiting a few Google Friend Connect websites and have noticed an interesting trend. No one seems to want to edit the canvas.html file to display the correct site name. To be fair it does not say much on the Friend Connect website about the file just “This file can be edited to match the aesthetics of your site.” People do not even seem to make easy edits to the file. Even the largest Friend Connect website I have joined so far, Mashable, has not edited the file.

If you want to make a minor edit to the canvas.html file all you need as a text editor, like Notepad. If you routinely code HTML you can use your favorite editor. Simply open the canvas.html file that you downloaded and to make your website name display when people look at the Friend Connect gadgets in full screen. To change the site name look for the following line, in my editor it is line 87. <div class="site-header"><span class="section-title">Site Name</span></div>

Simply edit the Site Name to be what ever you want, your website name would probably be the best, but you could be creative I suppose. When you are done, upload the file to your web server per Google instructions. Here is a screenshot of my canvas when you enlarge the members gadget.

There is a lot more that is possible, but that is the bare minimum that you can do to at least have the canvas page display your proper website name instead of “Site Name”. You could go and skin the whole canvas page to have your website look if you are feeling more ambitious, but I don’t have the time to do that today.