How to set the default image for Facebook sharing your website

Posted on

Have you seen what happens when someone share’s a link to your website? Try it out and see which image and information Facebook chooses by default. If you’re lucky you may get what your after but chances are it’s picking any old image from the page and not the most appropriate content. Well it doesn’t have to be this way, by using Open Graph Protocol (OPG) you can include some information in your header which Facebook and other social media sites will use to determine which image to use and what information to display.

Getting ready to use OGP for Facebook

Step 1: Make a image to use
Create an image 200px by 200px and upload to your website. This will be the image displayed with your link on Facebook.

Step 2: Get your Facebook ID
To share your page you will need either your Facebook User Account ID for personal accounts or Facebook Application ID to associate your website with a Facebook page. To get your user account ID go to ‘http://graph.facebook.com/yourusername’. To get your Application ID you will need to have an App associated with your Facebook page. To create an App follow prompts at https://developers.facebook.com/apps. All you need is a basic test app so you can get the ID.

Tip: If you want to go back to your App in Facebook simple return to https://developers.facebook.com/apps as a logged in user.

OPG WordPress Plugins

If your running a WordPress based site I would recommend using WP Facebook Open Graph protocol plug-in. If you follow step 1 & 2 above it’s easy to install.

Adding in the OPG Code Manually

If your not running a WordPress site or would prefer to add the information manually you can do so by adding the following into the header of each web page.

Step 1: Define ‘xmlns:fb="https://www.facebook.com/2008/fbml"‘ in the opening html tag.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

Step 2: Add the meta properties inside the header. See Facebook Open Graph Documentation for a breakdown of each of the available properties and options. Here is an example:

 <head> <title>Squigloo</title> <meta property="og:title" content="Squigloo"/> <meta property="og:type" content="business"/> <meta property="og:url" content="http://www.squigloo.com.au"/> <meta property="og:image" content="YOUR_IMAGE_URL"/> <meta property="og:site_name" content="Squigloo"/> <meta property="fb:admins" content="YOUR_USER_ID"/> <meta property="og:description" content="Awesome web and graphic design."/> ... </head>

And that’s it!

Testing what Facebook Sees

To see what will get posted to Facebook and check for errors you can use the Facebook debug tool at https://developers.facebook.com/tools/debug