Allow Users to Pick the Images They Share With Google+

So you have WordPress and you are a pretty good blogger.  You just came up with a great story idea and saw Mike King’s presentation that told you to hire a damn designer to make your fifteen paragraphs of text actually interesting to look at.

Mike King - Use a designer damnit

 

You are a good little sheep (like the rest of us) so you dust off  your bootleg version of Photoshop and create some engaging images to help visitors make it through the wall of words.  After a few hours of hacking, you end up with some really pimp images that are super cool and shareable.  You add them into the post and publish.

Google+ CrinkleCut FormatAfter you publish the post, you review the page and test out your share buttons.  You notice that Google+ is picking one image for the page and you ask… I wonder if there is a way to have users share the cool images I just created individually as representative images of the page in the sweet crinklecut format(see left).

Well,  I will show you how to do just that.  Below you will find two test examples followed by the code that will allow you to do it.  A few prerequisites.  First off, read this. It is a Google Developers page telling you what is needed to produce the CrinkleCut Google+ posting.  You will also need to be able to edit your WordPress functions.php file, and have a cursory understanding of http://schema.org/Article.

 

 

The Examples

 
Click on the images below to open the Google+ share window. See how with each image, the same page is being shared, but a different images is used based on what the visitor clicked on? Pretty cool, huh?
 
Test 1

 

Test 2

 

How To Do It

 Edit Functions.php

Add the following code into your functions.php file.  This code does a few things.  It looks for ?gimg=02 at the end of a url.  If it finds it, then it replaces id=”02″ in the content of your page with id=”02″ itemprop=”image”

 

Link Your Images Or Share Button

In this example, I have just added a link to the individual  test images to simplify things.  You can add custom share buttons or use Sharrre (or similar) to make it fancier.

Here is the link URL that you should set as the href of your link:

https://plus.google.com/share?hl=en-US&url=http://www.domain.com/your-blog-post?gimg=01

Here is what the parts mean:

gimg-url

 

Match The Query String To Your Images

In the example above, we are sending a value of “01” in the “gimg” query string parameter. To make this work, you will need to add id=”01″ to the image associated with this share url. Repeat with each image that you want to make shareable (01, 02, 03, etc…) See below for what this looks like:

Image Markup Example

 

Make the Link Open In A Popup Window

Add the following code to the <a> element that is linking to the share url:

 
In the examples above, this is what it looks like:
onclick

 

Test It Out

The next step is to publish your post and test it out.  If it is not working there are a few common reasons.

  1. Make sure you have read the Google+ Developers link above and are using Schema.org/Article on your article.  All this technique does is allow you to specify a unique post image using the itemprop=”image” property of schema.org/Article.
  2. Your shared images must be at least 506px wide and  must have an aspect ratio no wider than 5:2 (width:height).
  3. Make sure you do not have any other schema markup that is conflicting with the article markup.
  4. Google caches image associations with a page, so you may need to change the slug and share links if they are still picking up an old image. You can also test using the Rich Snippets Tool to see if the Article > Image value changes correctly with the gimg value.
  5. It may be necessary to disable opengraph markup on the page if Google is picking that over the article > image declaration.

 
One Note: It is a good idea to go into WebMaster tools and let Google know that the new parameter does not constitute a unique page. Example.
 

Leave a Comment.