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.
 

What The End of Net Neutrality Looks Like

What the End of Net Neutrality Looks Like

I haven’t drawn any cartoons for a while so I decided to do one about Net Neutrality.  There seems to be a lot of laziness in the tech space regarding the future of the internet.  The FCC is a revolving door for cable industry lobbyists and unfortunately they are in charge of the regulation of the internet.  I am not for excessive regulation, but I really think that if you are going to have a regulating body, they should be disassociated from the industry they are regulating.

The Cable industry doesn’t have a track record of being customer focused.  Search “Comcast Reviews” or “Time Warner Cable Reviews”.  This is a power move backed by a lot of influence and money to protect the access to quality television.  They are trying to protect themselves from being relegated to the lowly level of “utility” while Netflix, Google, Apple, and Amazon become the new TV providers.

Google Spreadsheet App: Site Structure From Screaming Frog Export

Google Apps Spreadsheet Site Structure

Here is code for a spreadsheet app that I just built that takes an export from Screaming Frog and produces a beautiful hierarchical spreadsheet with the page name, title tags, descriptions, and H1’s.

Steps To Use

  1. Crawl the site with Screaming Frog.
  2. Filter HTML and click Export.
  3. Save export as the default “internal_html.csv”.
  4. Select Options>Clear Site Structure if Data Exists in the Site Structure Sheet**.
  5. Select Options>Update Site Structure (blog) or Options>Update Site Structure (no-blog)**.
  6. Upload the CSV file exported from Screaming Frog.
  7. You should now have all the pages of your site in a hierarchal structure with associated URLs and On-Page elements.

** You may need to authorize the app through Google. This is normal.

 

 Link to spreadsheet (Please Make a Copy)

 

Here is the code if you want to use some of it

 

Obama vs. Romney Web / Social Graphic

Click to see the GraphicI was reading an interesting post by Phil Buckley on the difference between men and women according to Google.  I decided to see what it would look like if I did the same thing with Obama and Romney.  I started just searching “Obama is” on Google and seeing what the results were.  I did the same for Romney. Click the image to the right to take a look at the Graphic. Then scroll back up to continue…

Apparently, both Romney and Obama share many similar traits.  They could potentially both be:

  • Gay
  • Liars
  • and the Antichrist

Regardless,  Obama has the great advantage on getting his message out via social channels.  I didn’t include Pinterest although they seem to have that covered by The First Lady.  This could end up being a referendum on new media versus old media.  In the days of social and DVR,  I wonder if trash ads will have less of an impact than a direct connection sending positive messages through social channels.  I am sure we will see our fair share in the ad intros on web videos but it is still an interesting point.

Obama and Romney seem to be running neck and neck with the only variations probably driven by the news of the day.  This will be an interesting election to watch although probably no more interesting than the last few I can remember.  The really interesting thing out of all of this is the true negativity surrounding presidential elections.  In the searches on Google and Bing almost everyone of the suggested searches are full of hatred and malice for the candidate.  I wonder how true a reflection this is of the American people.  Is this what we really want?

I wish presidents were elected the way normal people were hired.  Not by a PR machine and the 24 hour news cycle, but based on a resume.  At the end of the day; whoever is elected, we will still have politicians leaving the government to make millions being lobbyists, we will have corruption,  we will have swings in the economy, we will have problems in education and healthcare, and the Israel / Palestine problem will still be there.  Four years from now we will be talking about the same thing.

This is worth a watch when you have the time and if you are tired of hearing politicians and armchair politicians say they have all the answers.  Trial, error and the God complex.

Add This Graphic to Your Site

Pull PR(PageRank) data into Google Docs

If you have a simple listing of urls that you want to compare pagerank for, this is a great little script for Google Docs. Here is an example:

Screenshot of Google Docs

 

First you want to import your spreadsheet into Google Docs.
Next,  head on over to the Tools tab and click on Script Editor.

You can name the document and script sheet whatever you like or you can follow what I have here:

google_docs_pr

 

Insert the code at the bottom into the editor.

Now save that and head on over to your spreadsheet and copy this into the cells of the column for pagerank :

You should be all set.

Here is the code:

 

Multi-Site User Replicator 3000

 

Description
This plugin will give you the ability to pull up any (non-Super Admin) user and in one click add that user(with a global role) to all sites in your MU install. Likewise, if you want to remove a user from all sites it is one click as well. CAUTION: WordPress has an optional mechanism when deleting a user from a site that will allow you to assign that users posts to another user. I have ignored this for this release. Please take a DB backups until you are used to this plugin and Multi-Site.

 

Name: Multi-Site User Replicator 3000
Contributors:  jroakes(me!)
Donate link: http://visiblecompany.com (here!)
Tags: user, multi-site, sites, mass edit,
Requires at least: 3.1 – Should work for previos versions.
Tested: 3.1
Stable tag: Trunk

** Please use this plugin at your own risk.  I offer no warranty or support.

WP3.1 multisite “mu-plugin” that allows you to add a user to all sites or no sites. Just drop in mu-plugins.


Installation
This section describes how to install the plugin and get it working.

1.  Upload `user-replicator-3000.php` to the `/wp-content/mu-plugins/` directory

2.  Find “Multi-Site User Replicator 3000” options at the bottom of Network Admin->Edit User

Frequently Asked Questions

– Will this plugin re-assign the posts of the deleted user? Not Now.

–  What will happen if I remove the plugin from the mu-plugins directory? Nothing. The users will still be assigned and the minimal data in the database will remain.

–  Can you bulk update a group of users at a time, but not all? Not Now.

–  The user has been deleted from some sites and I want to re-add to all. How do I do this? “Remove User From All Sites” and then “Add User to All Sites”

Screenshots

1.  Add User: Add user to all sites step.

2.  Delete User: Delete user to all sites step.

Changelog
= 0.1 =
* initial release (Just a fledgling)

Download
Click here

Google offers hosted, open-source Web fonts

I will be trying this out this weekend!.

Web typography just got a shot in the arm from Google, as the company has announced a free, open-source library of 18 typefaces that Web designers will now have at their disposal. Google hosts all the fonts on its servers, and offers a simple Web-based API that handles all the browser differences behind the scenes. Furthermore, Web font service provider TypeKit has partnered with Google to offer an additional open-source JavaScript library called WebFont Loader for even more control over how fonts are loaded by the browser.”

Google offers Web designers hosted, open-source Web fonts.

Joomla to WordPress Convertor

Here is another iteration of the now famous (infamous) joomla to ordpress convertor.  I modded it for  utf-8 and post/page support.  The original credits are below.  Please click on Azeem Khan’s links for a full rundown on how to use the convertor.  There is also an information file in the archive.

Download here

Credits
v1: Mambo2Wordpress Import Wizard by Mission:Tech, technology blog.
v2:Joomla To WordPress by Chris Chee of Rangit.com
v3: Joomla2WordPress Import Wizard by Azeem Khan of Azeemkhan.info
v3.1 JROAKES (added page support | cleaned up titles and content | got rid of links)