Set WordPress Featured Image as Facebook Thumbnail

If you have a WordPress blog, odds are that you are sharing your posts on Facebook and other social media websites. Some of these sites allow you to include a thumbnail image and description when you or your visitors share posts. For example, when you paste in a URL on Facebook or LinkedIn they will pull an image (if available) and description from the page. At first glance, it may appear that you don’t have much control over this.

However, both Facebook and LinkedIn utilize the Open Graph Meta tags (For more info about the Open Graph API in general, check out David Walsh’s Facebook Open Graph META Tags article.). If you take advantage of this, you can control which image and description is pulled by default.

How can I use Open Graph Meta Tags with WordPress?

It is a pretty straightforward process to add the required meta tags. First, we need to allow for Facebook markup in our opening HTML tags. In this example we are going to add a few filters in our functions.php  file to accomplish this (Note: you could also add the appropriate code to your header.php):

Now we can add the Open Graph meta tags just like regular meta tags and use WordPress’ Template Tags to fill them in. Here’s an example:

Most of the tags are pretty self explanatory, but feel free to ask questions if anything is unclear.  If you wanted to avoid touching your theme files, I’ve packaged this into a simple plugin that you can use as a starting point.  You can see the full code for the plugin here (the zip also contains a screenshot and a readme):

And you can download it from the WordPress Plugin Repo: Facebook Featured Image and Open Graph Meta Tags

Things to consider:

A lot of plugins and themes already include some or all of this functionality. For example, WordPress SEO by Yoast takes care of this for you. A lot of themes will also do this by default. To avoid redundancy you should check to see if the Open Graph tags already exist on your site. All code contained in this post is to be used on an “As-is” basis, and may contain errors. If you notice any, let me know!

References

Facebook Featured Image and Open Graph Meta Tags
by Ryan S. Cowles

This plugin will add the necessary Open Graph Meta tags to automatically set the posts’ Featured Image as the thumbnail for sharing on Facebook and LinkedIn. It will also set Open Graph Meta tags for title, description, URL, type, and site name.

Stats:

  • Current version: 1.0.1
  • Rating: 82(10 ratings)
  • Downloaded 21,799 times

How to include hashtags with Facebook’s share function

A little while back I ran into a problem when trying to allow users to share a page on Facebook. I wanted to include hashtags with Facebook’s share feature in the URL. The page loaded content via AJAX, and appended a fragment identifier (#) and a short string to the URL. When user’s tried to share this page, the hashtag and the rest of the string was being stripped. A quick Google search pointed me to a post on StackOverflow that revealed that I wasn’t the only one who couldn’t figure this out.

After pulling out my hair, the answer came to me. Encode the hashtag – replace # with %23 in the URL. For example, replace:

with

This may seem simple – and it is – but hopefully it can save you from some unnecessary frustration.