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
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.
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
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.
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.
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.


Archivio Mensile Blog
Tag Cloud
app Apple database Facebook geek Google Google Immagini Google+ humor infografica innovazione marketing Microsoft Motori di ricerca personal branding Programmazione social network video viral Zynga
Ultimi Post
I migliori di oggi
I più popolari del mese
Top post