CODEWITHSUNDEEP
javascriptgoogle-plusbadge
Mostafa Shahverdy
Mostafa Shahverdy

Reputation: 2725

What is the best way to add avatar to Google plus badge?

I want to add a Google plus badge to my blog. Currently I added a google plus badge to my blog and tried to add an image to it by the following code:

<div class="g-plus" data-width="208" data-height="69" style="float:left; direction:ltr;text-align:left" data-href="//plus.google.com/116527224364668694256" data-rel="author"></div>

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); 
    po.type = 'text/javascript'; 
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(po, s);
    var iab = document.getElementsByClassName("iab")[0];
    iab.style.backgroundimage = "url('https://googledrive.com/host/0B7YvaD77pFw9cDczZnBRanFFVWs/img/avatar.jpg')";
  })();
</script>

And the output is this:
My Google+ badge

I want to add my own avatar to it, but it doesn't work properly. What is the problem with this code and what is the best way to do it?

Upvotes: 0

Views: 224

Answers (1)

class
class

Reputation: 8681

There is not a way to show your avatar on the Google+ badge. The documentation here:

https://developers.google.com/+/web/badge/

Has the latest information for what can be configured on the badge. The advanced options will let you set the width for the badge which can display more or less information but there is currently not an option to display your avatar.

The badge rendering code will override any styles that you have set on it which is why your additional setting is not changing how the badge appears.

If you just wanted to render your avatar, you could use the Google API to do it as shown in the Google API explorer here:

https://developers.google.com/apis-explorer/#p/plus/v1/plus.people.get?userId=109716647623830091721&_h=1&

And then retrieve the profile photo from the person object that is returned.

Upvotes: 1

Related Questions