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="https://apis.google.com/js/plusone.js"></script>
<a class="g-profile" href="https://plus.google.com/118189881018247483156">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, https://apis.google.com/js/plusone.js. 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 https://plus.google.com/+LouisGray/, but it would not have worked. And inserting the link with the trailing slash https://plus.google.com/100535338638690515335/ would not have worked, too. Or even the shape https://plus.google.com/u/0/100535338638690515335.
The only allowed form is https://plus.google.com/{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: