Custom Google +1 Text and Image

Asked 8/7, 2011 at 19:25 Answered 26/6, 2012 at 15:17

Does anyone know how to change the image and text from the Google +1 button that shows up in your Google profile? I have a website and I want to set custom text and image for when people press the +1 button. This info shows up in your Google profile under "+1" if you aren't aware.

In short, is there a way to have the Google +1 button function the same as a Facebook like button in regards to setting the custom text and image that shows up in your profile when you click it.

Huff answered 8/7, 2011 at 19:25 Comment(0)

Ok. After much ado about nothing - many many links to my profile later....

here's how you do it. ( the "post" I refer to is the entry in your profile's +1 page on google +, the "target page" is the page that you are referring to with the +1 button tag. )

The title of the post on the target page is what gets read as the title for the post.
The content of the post is pulled from the first block of text on your target page
The image of the post ( as in the thumb ) is the first image found on the page
The site name (in blue) is the domain of your page.

1st, create a in the body of your target page, and set the style attribute of the div to : "position:absolute; top:-1000px; left: -1000px;"

next, have the page itself include a title tag in its header that you want to have in the post. this would naturally be what the page should be called anyway.

then, include in the div you created a copy of the image you want to display as the thumb on the post, dont bother including size attribs on the img tag, google ignores it. also appears to ignore anything that isn't a picture ( ie; a resize script written in php that takes a file as a param ).

lastly, add the content/body text of the post into the div after the picture. I've no idea how much text you can have.

And thats it. Well, its google so it'll evolve, but thats whats working for me.

Dave.

Continence answered 21/7, 2011 at 9:9 Comment(1)

Google completely ignores such div, here. – 3d 9/1, 2013 at 18:27

The best way is to use the Schema.org microdata format, as you can see from this example from Google documentation:

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

In detail:

Add these attributes to your body:

<body itemscope itemtype="http://schema.org/Product">

Title of the page to use:
```
<h1 itemprop="name">Shiny Trinket</h1>
```

Image to use:

<img itemprop="image" src="{image-url}" />

Description to use:

<p itemprop="description">Shiny trinkets are shiny.</p>

Straggle answered 26/6, 2012 at 15:17 Comment(0)

Have you checked out Google's docs? http://code.google.com/apis/+1button/

Barbate answered 8/7, 2011 at 19:30 Comment(4)

Said API don't allows to have a custom image for it yet. And if it follows the trend of Facebook Like, I fear it never will. – Lichi 11/7, 2011 at 17:47

You can customize both, text and image for the FB-like button! – Goddess 13/7, 2011 at 15:32

I believe you refer to the "Share" FB button, that indeed allows you to customize it as it depends of a single url. It still works, yet is not longer provided by the FB docs. The Google +1 button, as it is, currently works more like the FB like button, while the FB share button works more like the Google Buzz button (which is fully customizable). Is likely the functionality of these both will merge at some point, thought. – Lichi 13/7, 2011 at 19:11

Yeah, but they used a CSS hack (as described here: esrun.co.uk/blog/disguising-a-facebook-like-link), which by the way the FB button is done is very awkward to work with as FB changes their iframe code all the time. Some people as said that changing the button is against their TOS, but I'm not sure. The button itself is not very design-friendly, as the button often changes its size depending of the language as 'like' is longer in some: i.imgur.com/owS3E.png; and the counter of the small button always shows, except when is zero, which hurts some aesthetics. – Lichi 13/7, 2011 at 20:15

You can do it by setting it's opacity to "0"..

I've successfully done that..

Illuminative answered 17/11, 2011 at 7:49 Comment(0)

Recommended topics

Hot tags