I have found this link:
Adding a Google Plus (one or share) link to an email newsletter
It's great, it helped me to make a Google+ button for my HTML Email campaign. I'm using Mailchimp and I edited it as such:
<a href="https://plus.google.com/share?url=*|RSSITEM:URL|*">
<img src="http://mywebsite.co.uk/images/googleplus.jpg">
</a>
So now it has a customised image, and also works in my RSS email campaign. Mailchimp support didn't know this was possible, so that made me happy.
HOWEVER, what I want to achieve is to be able to choose which image is shared by default when the user clicks. Does anyone know if that's possible?
I hope my solution helps someone :)
The image that is displayed in the share is determined by the Schema.org markup on the page that you are sharing. Specifically, you will want to set the itemprop="image" to point to the image you wish to share.
<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>
It is important to note that this is the markup for your page, so the same image that appears in the share is the one that will represent your page in other snippet tools.
You can see how this works, and see additional markup options, at https://developers.google.com/+/web/snippet/.
the sharer uses this image as the default one, but displays other images as well (they can be selected with the arrows on hover). Is there a way to disable the other images, for navigation images etc.?
Related
I say I have a section of a page like this (rough HTML to give an idea):
www.mydomain.com/contact-us
<div class="regional-offices">
<div class="south-west">
South West
<div class="south-west-content">South west office address</div>
</div>
<div class="north-east">
North East
<div class="north-east-content">North east office address</div>
</div>
...
...
Currently, these are a set of accordions that expand to show the content when the link is clicked. What I would like to do is treat them as individual URLs so that they can be seperately indexed by Google, as of course at the moment they are just part of a single page.
I have been researching the History API and can see how I would do this as far as creating unique URLs for each section, but where my understanding falls down is how Google or other search engines will handle these links if the required info is already part of the page and not stored at its own seperate URL.
For instance, the first step would be to change the <a> tag to be something like:
North East
We can then use JS to preventDefault() going directly to the URL, and instead provide the user with an expanded accordion, bring the page scroll down to the accordion and a unique URL using the History API. This is all well and good if we visit the URL directly, or click any of the links.
But the problem is that as far as I know, the Google crawler will try to follow the link and be faced with a 404 because there's no Javascript preventing access to the resource in the URL. And nor do I want there to be.
Or is it the case that I will need a unique location holding the contents of the accordion, which is indexable, and also pulled in with AJAX when a collapsed accordion is interacted with?
Apologies if I haven't made anything clear.
I had to deal with the same thing. What I did was to make a rewrite rule so that the link that google follow is actually posted to the page that handle the the request. to display the data. Angular might save you a lot of trouble to dealing with accordions.
I have created a google+ share button ... https://developers.google.com/+/web/share/ ...
It works but it doesnt share any content ... only appear a pop-up share window => I write something into => and this text it share normal ... but not content of my page/ article ... do you know why?
in my body I have this ...
<div class="g-plus" data-action="share" data-annotation="none" data-height="24" data-href="http://localhost/welcome">ddd</div>
There is 2 kind of Google+ share button.You can use a very simple button to share anything.The properties Google+ gets from meta tags and canonical links.
Here is a link: http://www.w3docs.com/learn-javascript/google-share.html
The share button does not support prefilled text. It only supports sharing the current/specified URL.
The interactive posts API does support prefilled text but it also requires more setup to get working.
I have a page that consist of a daily updated front page with every day archived in a sub-page. The sub pages are either a funny picture or a joke. The pictures and jokes have a like and share option (for facebook, stumbleupon and pinit for instance), which obviously link to the picture or joke in question. I'm puzzled what to do with the google plus button though.
What is good pratice? Link to google plus with the link straight to the picture (sub-page) or set it up to share the main page?
so this:
<div class="g-plusone" data-size="medium" //...// data-href="http://www.amazingjokes.com/"></div>
or this:
<div class="g-plusone" data-size="medium" //...// data-href="http://www.amazingjokes.com/?view=img&date=2013-06-16"></div>
Thanks
I would concur with what Scarygami says, but also add that this may be a scenario where an interactive post/share might be appropriate as well. You could have the shared info go to your top level page, and a "Visit" button go to the more specific sub-page.
Really depends on what you want to do.
Linking the +1-Button to your main page will have an accumulated count for your page, while linking it to the picture will have a count per-picture which I think would make more sense in your scenario.
Of course you can have an additional +1-Button for your main page so people can show their appreciation for your page in general. If you have a Google+ Page associated with your site you could also use a page badge for this.
I am using links like this : https://plus.google.com/share?url=www.myurl.com to share articles on Google+ from a website.
This works fine but the preview image of the share is not right.
I read in the Google doc that you need to specify an image like this:
<img itemprop="image" src="thumbnail.jpg" />
The thing is, the image I want to use is not being displayed on the page I want to share. I have specific thumbnail images (of smaller size than the images displayed in the article) that I'd like to use.
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
https://developers.google.com/+/plugins/snippet/:
2. Open Graph protocol
If the page contains Open Graph properties for the title, image, and description, they will be used for the +Snippet.
Additionally, the schema.org tag that defines your page's preview image does not need to be displayed on the page, you could instead define it within your HEAD as metadata:
<meta itemprop="image" content="thumbnail.jpg" />
When you press the google +1 button on a site it grabs the typical meta data such as title and description. I thought it might be looking for the first image in the first article tag, but I tried changing the image and the thumbnail did not change. Does anyone know how the thumbnail is generated? Can it be added as meta info (similar to facebook likes)? Can it be linted?
The thumbnail i'm talking about:
There aren't any tools for developers on google+ yet.
You can subscribe for developer news
https://services.google.com/fb/forms/plusdevelopers/
API is available now
http://www.google.com/intl/en/webmasters/+1/button/index.html
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/LocalBusiness">
<!-- Add the following three tags inside head -->
<meta itemprop="name" content="title of your content">
<meta itemprop="description" content="description">
<meta itemprop="image" content="image url">
So... by the looks of it Google doesn't use the Open Graph Protocol http://ogp.me/ as their default information scrape.
For the image on the +1 listing they take the first useable image. The important part here is that even though on the +1 listing the image is resized to 45px x 45px the image you want to be used must be over 125px (at least). I'm using an image 180px x 180px (nice for scaling down to 45 x 45) and making sure it's the first large image on the page.
The title comes from the first h1 on the page and the description seems to come from the first paragraph; about 135 characters....
meta og:image works, secret is to have image large enough. It failed at 140x112 and work when I change to bigger thumbnail 511x364
Go to http://www.google.com/intl/en/webmasters/+1/button/index.html
Make sure to set "HTML 5 valid syntax" if you are using HTML5. I got it to work.