Geek Answers Handbook

Specify image when sharing with Google +1 button

In this link, I learned how to provide the URL of a Google +1 button.

specify a custom url for gplus one button .

Can I specify a specific image?

Edited

I don’t need to change the google plus gif button or google plus button background. I need to specify the image that the user wants to share on a social network.

Maybe?

+7
source share
2 answers

Yes it is possible.

What you mean is that you want to specify the image that will be displayed in the snippet created when sharing on Google+. The +1 button does two things: 1) It adds +1 to the account when clicked, and 2) it does not necessarily allow the user to use your Google+ URL and comment on it.

What you are asking is the second part of this interaction and is documented at https://developers.google.com/+/plugins/snippet/

There is a tool on this page that will help you generate the HTML code that you will need to paste into your page. You can also choose one of three ways to specify fragment information.

An example of 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">
+10
source

To specify a custom image to share using the share button:

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

To use a custom image for the +1 button:

Since Google wants the +1 buttons to look consistent, this is not possible with the official Google +1 JavaScript. However, with a trick such as this , you can customize the image.

The trick is to set the CSS opacity to 0 , for example:

 .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); }
-3
source

More articles:


All Articles