Specify image when sharing from Google +1 button

Asked 9/11, 2012 at 11:19 Answered 9/11, 2012 at 17:27

Solved javascript jquery google-plus google-plus-one

In this link, I have learned to specify a URL for the Google +1 button.

Can I also specify a specific image?

Edited

I don't need to change the Google plus button gif or the background of the Google plus button. I need specify the image that a user want to share in social network.

Is possible?

Mantelet answered 9/11, 2012 at 11:19 Comment(2)

Why would you want to? Anybody who wants to +1 your page is going to be looking for the default Google +1 button (image) don't you think? – Dambrosio 9/11, 2012 at 11:34

I have many pictures on one page. I want to specify an image for each google plus button – Mantelet 9/11, 2012 at 11:36

Yes this is possible.

What you mean is that you want to specify an image that will show up in the snippet that is generated by sharing on Google+. The +1 button does two things: 1) It adds a +1 to the count when clicked, and 2) optionally it allows a user to share your URL to Google+ and comment on it.

What you're asking about is the second part of that interaction and is documented at https://developers.google.com/+/plugins/snippet/

That page has a tool that can help you generate the HTML you'd need to insert into your page. You can also choose from three different methods of specifying the snippet information.

An example using schema.org markup:

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Add the following three tags inside head. -->
<meta itemprop="name" content="My Cool Article">
<meta itemprop="description" content="This is the greatest site ever">
<meta itemprop="image" content="http://example.com/mycoolimage.png">

Zildjian answered 9/11, 2012 at 17:27 Comment(2)

Thank you very much! Is reply is correct, now is working fine with specify image. I have used my open graph meta keywords instead itemprop meta :D. Thank you – Mantelet 10/11, 2012 at 10:51

Note: the image URL has to be an absolute path (like http://domain.com/image.png). In comparison to open graph meta where a relative path is applicable. – Taciturn 26/8, 2014 at 21:20

-2

To specify a custom image to be shared by the "share" button:

~~Unfortunately, this is not possible. You can only customize the URL and the language; see the documentation.~~

Edit: this actually is possible, see BrettJ's answer.

To use a custom image for the "+1" button:

Because Google wants the +1 buttons to look consistent, it's not possible with the official Google +1 JavaScript. However, with a trick such as this one it's possible to customize the image.

The trick is in setting the CSS opacity to 0, like this:

.myCustomButton *{
    /*Hide real +1 button*/
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter:alpha(opacity=0);
}

.myCustomButton{
  display:inline-block;

  /*The width and height of your image. Not bigger than the Like button!*/
  width: 10px;
  height: 10px;

  /*Your image*/
  background:url(gplus.png);
}

Cowfish answered 9/11, 2012 at 11:35 Comment(2)

Thank you very much but you dont understand my question. I dont want specify an image to google button like background for example. I want specify the image for share in social network. I've edited my question to make it more clear and understandable – Mantelet 9/11, 2012 at 11:45

I don't have a Google+ account so I can't test it to be sure, but I don't think you can specify anything beyond the URL. See https://developers.google.com/+/plugins/share/#sharelink-endpoint. – Cowfish 9/11, 2012 at 12:5

To specify a custom image to be shared by the "share" button:

To use a custom image for the "+1" button:

Recommended topics

Hot tags