Advertisement
  1. Code
  2. Creative Coding
Code

Share Your Posts on Facebook With a Preview Image and a Description

by
Length:ShortLanguages:

In this tutorial we will write a plugin to set, for each post of our blog, an image and a short summary that will be shown on Facebook every time a post is shared. To do this, we will use two WordPress core features: a Featured Image for the image preview and the Post Excerpt for the description.


Step 1 Creating the Plugin

Create a new file called facebook-share-and-preview.php. Open it your favourite text editor and paste the following code:

Save the file in your /wp-content/plugins/ directory and activate it on the Plugins admin page.


Step 2 Activating Featured Images

From version 2.9 WordPress allows you to set a featured image for each post, but this useful functionality must be supported by your theme. So, open your Add New Post page and check if the Featured Image box is available:

If you don't see the Featured Image box, add the following line to facebook-share-and-preview.php:

We also set a custom image size. According to Facebook guidelines:

The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels.

A 90x90 pixel image will work well.

Now WordPress will automatically create a Facebook thumbnail for every featured image.


Step 3 Getting the Featured Image and the Excerpt

We need two functions to get the Featured Image and the Post Excerpt:


Step 3 Adding Facebook Metatags to the Single Post Page

Now we write a function that gets the post's Featured Image and the Post Excerpt and add them to the <head> section of the single posts pages.

If both Featured Image and Post Excerpt are not set, the tags will not be displayed.

To write the metatag code in the <head> section of our blog we use the wp_head action hook:

Template Troubleshooting

Make sure that in the header.php template file there is:

before the </head> tag. If not, add it.


Step 4 Add Facebook Share Link to the Single Post Page

In your theme, open your content-single.php template file and add this where you want the link to appear:

For example, if you want to add the link after the post content:

Template Troubleshooting

In this tutorial we refer to the WordPress default template: Twenty Eleven. Since the structure of every WordPress theme is different from one theme to another, you have to identify which file serves the Single Post page in your theme.

You can find two useful pages on the WordPress Codex: the Template Hierarchy and The Loop in Action. If you still have difficulties finding the right file, you can contact your theme's author.


Final Result

Now you can write your post and add a Featured Image and an Excerpt:

This is the published post with the Share on Facebook link:

And once you click the Share on Facebook link, this will be the Facebook preview window:

Now you have some control over how your posts are displayed on Facebook when your reader's share them. Let us know in the comments if you found this useful.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.