Question

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?

Était-ce utile?

La solution

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

Autres conseils

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);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top