Director of Intent

February 20, 2010

Embedding a Google Profile Badge in Blogger

I have grown to really appreciate the usefulness of Google Profiles, and found that it's not too hard to insert a profile badge directly into Blogger. Should you care to do the same, here are a few steps that will get you there in no time.
  1. Find your existing Google Profile or create a new one at http://www.google.com/profiles

  2. Note your Google Profile ID, which is basically the last part of your Google Profile URL. My Google Profile URL is http://www.google.com/profiles/Spencer.Haley, which means my Google Profile ID is "Spencer.Haley." Unless you have customized your ID, it will probably be a long string of numbers. In either case, jot it down.

  3. If you want to see what your profile badge looks like, go to http://www.google.com/s2/widgets/ProfileCard?uid=Spencer.Haley, replacing "Spencer.Haley" at the end with your own Google Profile ID.

  4. In Blogger, go the Page Elements section of the Layout tab, click Add a Gadget, and select HTML/JavaScript.

  5. In the Content box, insert the following code with your own Google Profile ID:

    <center><iframe src="http://www.google.com/s2/widgets/ProfileCard?uid=<GoogleProfileID>" width="100%" height="125" scrolling="no" style="border:0px solid"></iframe></center>



  6. Save your work!

I found a few similar posts online that somewhat addressed this issue, but they seemed to be making the whole process much more complicated than it needed to be. The iframe (inline frame) tag simply displays the full contents of a web page in a frame of another. In this example, we're just framing the Google Profile badge page directly inside your blog.

While the lack of easy scaling is somewhat annoying, I can live with it. This is largely because my Google Profile (and subsequent badge) provides single sourcing updates to my "About Me" information and I can let Blogger continue dealing with the blogs themselves.