Badge Google+ for People, undocumented popup

We discovered an undocumented feature of +1 plugin, which allows to enrich blog posts with references to Google+ profiles.
This is our second english blog post. I hope it's clear enough for you. :-) For the italian people, we have a different post: Badge Google+ for People, Popup non documentato.

A month ago, I told you about a new feature (Incorporare un post di Google+ sul proprio sito sorry it's in italian, you need to use Google Translate) that was going to add in the code of social plugin +1. Today we talk about a new feature, hidden in the code of +1, but still not officially documented: the popup Google+ Badges for People. You can see its effect below:

popup Google+ Badges for People

As you can see in the photo above , I have enriched the post, with a popup that appears on the name of the person I linked its Google+ profile. This allows to give a face to the mentioned person above, as well as the possibility to encircle him, if you are a user of Google+.

To be honest, it is a thing that I really like. You don't need to import new scripts, because everything is already included in the code of the +1, so adding this new feature will cost you no more than few bytes.

I accidentally discovered this possibility, reading Our Fragile Web of Dead Domains and Lapsing Links of +Louis Gray. Within this post, I noticed that he wrote the names of some people with a plus at the start of the name as you do on Google+, and going over it with the mouse, I saw the magic popup.

The first thing I did, was to go in the documentation, but I have not found any way to create this popup. So I started to study the code to try to understand how it worked. And objectively the operation is very simple. Here's what you need:

<script type="text/javascript" src=""></script>
<a class="g-profile" href="">name surname</a>

The rules to implement the popup are three:
  • in the page, a reference to the javascript code of +1 must be present, If you have already the +1, there's no need to repeat it to have the popup
  • the link must have the css class g-profile
  • the link to the profile of google+ needs to be canonical
The third rule is very important. If the link is not canonical, the popup does not work .
For Louis Gray, I could have used his vanity url, but it would not have worked. And inserting the link with the trailing slash would not have worked, too. Or even the shape
The only allowed form is{ProfileId}, where {ProfileId} is the user Google+ id.

You can try it live, leaving the mouse for a second over my name at the top of the page, or on the name of Louis Gray or on the one of Enrico Altavilla below. I find useful for usability writing the name in the name with the starting + as you do on Google+.

Thanks to +Enrico Altavilla, for being unwittingly the guinea pig for my tests and for having been the model for the image of this post. :-)

A further double thanks goes to +Andrea Pernici. The first thanks is for pointing an error out in the code that I wrote above. The second is for having made further experiments, discovering that the popup works even if applied to an image with or without alt text.

Post correlati:

Copyrights © 2011-2019 Tutti i diritti riservati - by Ideativi Srl