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.