Blog
home > blog > Badge Google+ for People, undocumented popup

Tag: Google, Google+, social plugin, +1

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.
di Maurizio Ceravolo
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
2011
2
Settembre
Google +1 su mobile
Maurizio Ceravolo
Continua l'avanzata del social plugin di google, il +1. Ora è visibile anche sui browser mobili di Android e iOs. Ma non ancora Windows Phone 7.
2013
9
Settembre
Incorporare un post di Google+ sul proprio sito
Maurizio Ceravolo
Nuovo aggiornamento per Google+. Ora i post escono dal social network di Google per approdare su qualsiasi sito.
2012
12
Settembre
Il +1 di Google ha fallito?
Maurizio Ceravolo
Il social plugin di Google, il +1 ormai circola per il web da un anno e mezzo. È ora di trarre qualche conclusione, a seguito di un cambiamento operato da Google.
2011
25
Agosto
Google +1 ora condivide
Maurizio Ceravolo
Nuova importante modifica per il +1 di Google. Ora è possibile condividere con gli amici. Prende il meglio di Like e Send di Facebook e li migliora. Google all'attacco.
2012
16
Aprile
Google aggiorna il codice di +1 e badge
Maurizio Ceravolo
Google ha annunciato sulla Google+ Platform Preview di aver rilasciato un aggiornamento sul codice dei suoi social plugin, il +1 e il badge.


Archivio Mensile Blog
Tag Cloud
Apple evoluzionismo digitale Excel Facebook geek Google Google+ HTML 5 humor innovazione Microsoft Motori di ricerca normativa Programmazione social network tecnologia video videogiochi vintage viral
Ultimi Post
I migliori di oggi
I più popolari del mese
Top post