When you add a link to a Facebook page, a few moments later an image from the site apppears below the status update. Sometimes – such as when uploading a video – the thumbnail image appears OK. But other times – such as when linking to a website – the image that’s displayed is inappropriate. For example, it might ‘capture’ the logo of the site, which might be 500 pixels wide, and display a central portion of that image, which then just looks “silly”
Othertimes, a image will be displayed with a headline and description beside it, together with a link to the actual site. So to quote a TV show: “How Do They Do It?”
Having done a little bit of research, it’s via some programming code called “Open Graph“, which is an extension of the HTML meta tag property. Now “OG” as it’s known has a large range of options, but thankfully for status updates, Facebook use just six tags. These are:
Most are self explanatory. For example, “og:title” is the title you wish to appear beside the image, “site name” is the name of the site being linked to, “description” is a couple of sentences about what the user will read about if they click the link, “url” is a the hyperlink to the page / site in question, and “image” is the actual thumbnail you want to appear.
You might have noticed I skipped over “type”. Again, there are various options for this, and the most common are “blog” if linking to a post on WordPress or similar, or “website” if … it’s a website. If this value is omitted, Facebook will default to “website”
The image tag is what appears on screen, and here’s where it can get “interesting”. If you’re writing the code by hand, you can list several image tags. Facebook will then create a “list” of these thumbnails, and allow the person reposting the article to select which thumbnail they wish to appear beside the article. Most times, an author will only include the default image. The minimum size for an image is 1200px x 630 px … but 600px x 315px is recommended size so the image can be reduced to fit certain areas rather than increased in size and risk pixlation of the image. Absolute min is 200px x 200px
If using WordPress to create the article, (and have installed an appropriate plugin, such as “OA Open Graph“) you will find two extra form fields on your Posts section, these being “Title” and “Description”. To set the image, you have to set the “Featured Image” at the bottom of the right hand admin menu. The other data is then set automatically. Helpfully, the plugin above also has a “default” setting, so if you don’t enter any specific title / description / image, it will use the generic option.
Now, if you go to Facebook, and create a “status update” to the WordPress article / HTML page you’ve just created, you should find it displays the selected graphic with a title, website name, link and description beside your image.
Apart from making “Facebook” display an appropriate image when I write an article, I’m also developing another idea, (a sort of “Share Gate” which are no longer available on FB)
I will create a post that links to a product. When people visit that page, they will be offered a discount to the product … if they place a link to the product on their Facebook page. Could help that product go “Viral”, and I don’t think it will violate any TOC’s. Watch this space.
Here for the “techies” is the actual code you would use:
<meta property=”og:title” content=”This is a title”/>
<meta property=”og:site_name” content=”MY-DOMAIN.com”/>
<meta property=”og:description” content=”This is a description”/>
<meta property=”og:type” content=”blog”/>
<meta property=”og:url” content=”http://www.MY-DOMAIN.com/blog/?p=1234″/>
<meta property=”og:image” content=”http://www.MY-DOMAIN.com/blog/wp-content/uploads/2016/03/1.png”/>
<meta property=”og:image” content=”http://www.MY-DOMAIN.com/blog/wp-content/uploads/2016/03/2.png”/>
<meta property=”og:image” content=”http://www.MY-DOMAIN.com/blog/wp-content/uploads/2016/03/3.png”/>
Update: You also require something called the “fb:app_id” If using the above plugin, this is set automatically. However, it adding the code manually to a web page, you need to install the developer app into your Facebook account in order to generate the appropriate code. Here is an article that explains that:GET FB App ID