Custom Google +1 Text and Image
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开发者_如何学C 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.
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.
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>
Have you checked out Google's docs? http://code.google.com/apis/+1button/
You can do it by setting it's opacity to "0"..
I've successfully done that..
加载中,请稍侯......
精彩评论