WordPress Plugin: TWPW Facebook Image

We’ve been asked (a lot) how to change the default thumbnail that posts to Facebook when someone shares a post.  Charly wrote an article on how to set a facebook image for Woo Themes some time ago, but given the number of requests we’ve had – we’ve written a plugin.

The TWPW Facebook Image plugin will automatically set the Facebook Open Graph tags for your Posts, Pages and Custom Post Types, as well as set the default image for the Facebook Share.  The plugin will:

1. Set the Facebook Open Graph Meta Items: Title; Type; URL; and Site Name from the standard WordPress elements for the page, post or custom post type
2. Set a link to the image to be shared using rel=”image_src” based on one of the following:
   1. Featured Image
   2. Custom Post Meta with a key of “image”
   3. The first image uploaded to the post.

Installation:

1. Download the plugin by right clicking (or cmd Click on a MAC) and choosing Save As or Save Target As here
2. Log in to your WordPress wp-admin panel and navigate to Plugins -> Add New
3. Click on the Upload link in the right hand column of the page
4. Using the “Choose File” button, navigate to where you have saved the plugin file from Step 1 above, select it and click on open
5. Click on the “Install Now” button
6. When the plugin installs, click Activate.

That’s it, the plugin is installed!

Method 1: Using the Plugin with Featured Images

If your theme supports Featured Images – you will know as there will be a Featured Image box in the right hand side of your edit Post window:

If you don’t see the Featured Image box – check that it hasn’t been hidden by clicking on the “Screen Options” tab at the top right hand side of your editing window, and checking if “Featured Image” is listed and is checked:

If you can’t find Featured Image, your theme doesn’t support it, move on to one of the other two methods provided below.

If Featured Image is supported, you can set it using the WordPress Media Uploader.  When you upload or view an image in the Media Library, click on the words “Use As Featured Image” near the bottom of the window:

And that’s it.  When your post is displayed, the facebook “tags” will be set!

Method 2: Using a Custom Post Meta field

This is slightly more technical but will allow the author the same degree of flexibility in setting the Post Image for Facebook.  This method will also work well with Woo Themes (and other themes) that use custom post images (providing they use a meta key of image).

1. Ensure that you can view the Custom Fields box in the bottom of the editing window:

2. If you can’t, check the Screen Options to ensure the box is being displayed by clicking on the “Screen Options button at the top right hand side of the screen:

3. If you can’t view the Custom Fields, move on to Method 3.  Otherwise, get the link to the image you wish to use – we use the media library to do this:

4. Click on the “Enter New” link in the Custom Field box:

5. In the “name” field (left hand side of the Custom Field box) enter the word image  (all lowercase),  in the “value” field (right hand side of the Custom Field box) paste the image URL you copied from Step 3 above and click on the “Add Custom Field” button:

Note: if you have a theme that supports a custom image – follow your normal process – it will most likely work!

6. Update the post and your are finished.

Method 3: First image uploaded to the post

If the plugin can not find a Featured Image or a Custom Post Image, it will look for the images that have been uploaded to (or attached to) the posts.  All you need to do is upload the image that you want to use as your Facebook Share image to the post FIRST.  Note:  It is not the first image displayed on the post – it is the first image uploaded!

Resetting The Facebook “Cache”

Facebook will take a snapshot of your site and this can sometimes cause issues with the Share image being updated.  If you find that your share image isn’t being updated, visit:

http://developers.facebook.com/tools/debug

and enter your site url into the box.  This will cause Facebook to update its cache (store of information) for your site – it might take a while to do it, so be patient.

Video Tutorial

Need Support / Got Questions?

Post your questions about this plugin in the comments below and we’ll endeavour to help you.

Donate

We provide this plugin Free of Charge for your use – but your support is appreciated, please consider making a donation so we can continue to deliver to you: