Specify image when sharing from Google +1 button

问题

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

specify custom url to gplus one 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?

回答1:

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

回答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);
}

来源：https://stackoverflow.com/questions/13307146/specify-image-when-sharing-from-google-1-button

标签

javascript

jquery

google-plus

google-plus-one