Facebook is not just a great way to ogle over women in your friends’ friend lists, but is an awesome way to let the world know about stuff by sharing content and links from all over the web (and publicize your blogs, hehe :)) And Facebook has an awesome way of presenting these links on your wall when presented directly, Shared or “Liked”, making them look mouthwateringly clickable. It will have a thumbnail, a preview description taken from the text of the link and clickable site and post name. Also, you can provide your own text as a description. Totally juicy, I say!
But there has been an issue going around where Facebook refuses to pull the thumbnail, description or anything else but the URL of the link. You can still provide a custom description, but that is about it. The link when posted on your wall looks open, untidy and malnourished, causing people NOT to click on them.
If you Google for this issue (or just click here, lazy buggers) and you can see that it is all prevalent, with bloggers tearing their hair out trying to resolve the issue. As you can see, I had the issue too, which just popped up one fine day. After lots and lots of research and frustration and losing quite an amount of hair, I think I managed to resolve this issue which turned out not to be a bug after all, but some missing data that had to be entered on my site by means of meta tags which Facebook could recognize.
Meta tags (<meta…) are HTML elements that contain information about websites. Facebook has a system of specialized meta elements containing attributes with content values describing data about your website. These tags have to appear in the header of each page of your site so that Facebook will know what to show. The system is called Open Graph Protocol. Here is the story:
Open Graph Protocol
Open Graph is used by Facebook to make webpages and content rich parts of a social graph, which will be used to show you content relevant to you on Facebook. They use social share tools like the “Like” button, making all your stuff reach far and wide. Yeah, it is complicated, I suggest you read up about it here. Oh, and it also helps to display previews. Open Graph requires you to add specialized meta tags containing information about your site and it’s content that is to be shared on Facebook; such as the URL, Title, Site Name, Thumbnail, Description and so on, to the header of your website. It will look something like this:
xmlns=”http://www.w3.org/1999/xhtml” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml” dir=”ltr” lang=”en”>
<head profile=”http://gmpg.org/xfn/11″>
<title>The Banana Corporation, Inc.</title>
http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta property=”fb:app_id” content=”238056562894329″ />
<meta property=”og:title” content=”The Banana Corporation” />
url” content=”https://vadakkus.com” />
<meta property=”fb:admins” content=”692611044″ />
<meta property=”og:site_name” content=”The Banana Corporation, Inc.” />
<meta property=”og:description” content=”About General WTF Happening Around Us.;” />
<meta property=”og:type” content=”website” />
<meta property=”og:image” content=”https://vadakkus.com/wp-content/uploads/2011/09/50_car-money-e1316431222738-290×278.jpg” />
<meta name=”title” content=”The Banana Corporation, Inc.”/>The Banana Corporation, Inc.
All the tags starting <meta property=… are the specialized meta tags created for the Open Graph Protocol. These will not appear on the site or change the appearance of your site, but will remain hidden within the source code. Meta tags are important elements in any website carrying critical metadata (data about data) about the website, and in many cases are used to verify ownership of the site, etc.
How Do I Make These Appear Within My Page?
The problem here is that these tags have to be present in each page/article of your website, and it is not possible to add them manually to each page, since each page will be obviously different. Facebook, Like a Boss(DK), is silent about how this has to be done, leaving the frustrating part to us. Obviously we will have to do something which will dynamically add these tags to each page. So we did just that. I picked up some code which automatically picks up and shows the Site Name, Title, URL, Thumbnail Image and Description from the the page where it is displayed. To add this to your site, locate the header.php file of your website (theme), copy the code below and add it somewhere between <head> and </head>, preferably after </title>, and save it.
<meta property=”fb:app_id” content=”1234567890123456” />
php single_post_title(”); ?>” />
url” content=”” />
<meta property=”fb:admins” content=”123456789“/>
php bloginfo(‘name’); ?>” />
<meta name=”description” content=”
php if (have_posts() && is_single() OR is_page()):while(have_posts()):the_post();
$out_excerpt = str_replace(array(“\r\n”, “\r”, “\n”), “”, get_the_excerpt());
echo apply_filters(‘the_excerpt_rss’, $out_excerpt);
endwhile;
elseif(is_category() OR is_tag()):
if(is_category()):
echo “Posts related to Category:
“.ucfirst(single_cat_title(“”, FALSE));
elseif(is_tag()):
echo “Posts related to Tag:
“.ucfirst(single_tag_title(“”, FALSE));
endif;
else: ?>”Description of your website in 500 characters max”
php endif; ?>” />
<meta property=”og:type” content=”article” />
php echo get_fbimgi(); ?>” />
php } else { ?>
<meta property=”fb:app_id” content=”1234567890123456” />
<meta property=”og:title” content=”Your site name goes here” />
url” content=”URL for your website home page” />
<meta property=”fb:admins” content=”123456789” />
php bloginfo(‘name’); ?>” />
<meta property=”og:description” content=”Description of your website in 500 characters max” />
<meta property=”og:type” content=”website” />
<meta property=”og:image” content=”<?php echo get_fbimgi(); ?>”
The values given in blue should be customized for your site, enter your own values there. For the fb:app_id tag, you need to create an application for your page. How to get it done is detailed here. “fb:admins” is your profile id on Facebook. Go to your Facebook profile and click on your profile picture. Check the URL that is shown in your address bar, The number that appears in the place of that shown below in red should be your “fb:admins” value.
https://www.facebook.com/media/set/?set=a.429044881044.220768.123456789&type=1
Next, add the code below before the last closing tag in the functions.php file of your theme.
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), “, ” );
if (has_post_thumbnail($post->ID)) {
$fbimage = $src[0];
} else {
global $post, $posts;
$fbimage = ”;
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’,
$post->post_content, $matches);
$fbimage = $matches [1] [0];
}
if(empty($fbimage)) {
$fbimage = “full URL of the default image”;
}
return $fbimage;
}
This is for the correct thumbnail image to be picked. The URL given in blue should be of that which you want to be your default blog image.
The techie-minded among you might probably note that “property” is not a valid attribute for the element <meta>. To make this valid, you will have to declare og: and fb: in the <html> tag. So replace whatever you have in <html….> with this:
Yes, we are done! Now to check if it works. (Hint: Most probably it won’t)
Did it Work?
Nothing will change if you share the link on Facebook immediately, because they will not know that you have made changes unless you update their cache. Facebook has a pretty stubborn cache which updates only once every 24 hours theoretically, and more like a week, practically. To scrape the page instantly and see if everything is alright, they have developed something called a Debugger or Linter. Access it here. Enter your URL in the field and click on “Debug”. The result should show up like picture 1 here. If it is like picture 2 here, we still have a problem.
It Did Not Work. What Do I Do Now?
The reason for the problem might be varied, because you need to have something like a clean header and pristine code for your website. God only knows how Facebook and the Debugger reads these headers. So try all of these (I did).
- Check if all the tags are appearing correctly in your source code like code block 1 above. If it is not, you might need advanced help, or there might be something wrong in the code, you might have lost something while pasting.
- Make sure the value of the ‘charset‘ attribute in the http-equiv… tag is utf-8
- Check for any empty lines in your source code above the first line.
- Disable all plugins and check. If working, enable one by one to find the offending plugin.
- Run your code through the W3 Validator. Correct the mistakes, if any.
- Submit a question on StackOverflow. The nice folks there will surely help you out.
- Just wait. Sometimes they just put everything back like magic!
Still not working? I have some news for you. I tried all these, but still I was getting this error here, even though all the og: tags were present and correct just as Facebook would have wanted them. Facebook was behaving to the og: tags just like that girl whom you were after in college: purposefully and stubbornly ignoring your presence, behaving as if you did not exist. I did submit a complaint to them, but no response. I was at the end of my wits, and almost gave up.
So How Do I Make Facebook Recognize My Meta Tags??
Finally, to fix a page loading issue, I installed this plugin W3 EGDE and voila! Everything started working perfectly! As Simple as that! You can download and install the plugin here, and play around with the settings till it appears properly. But I think it was the “Minifier” that did the trick. It strips your code of any unwanted white spaces, line breaks and other inconsistencies and compacts your code. I think there was some anomaly in my theme code, which was the reason why Facebook could not read my code. The theme code needs to be optimized so that the header is sent first and nothing comes in between. Everything now is hunky-dory.
Why Should I Go For All This Trouble?
You probably should not, especially so if your website is updating on FB without any major issues. However, if your previews are not displaying properly, it is a major bummer when it comes to site traffic, because whenever someone “Likes” your page (If you have a ‘Like’ button on your page), the link is displayed on their FB Wall. So, if the link does not look “Rich” enough, you will not get any more further clicks. Also, if your pages are not part of Facebook’s Open Graph Social Graph, you will lose traffic that way too. In other But in typical Facebook fashion, they just tell us how the end product should look like and leave it at that. No troubleshooting, FAQs or Help. That is where the irritation comes in. Or maybe it is just Facebook’s way of showing who is boss.
The Plain Vanilla Meta Tag Route
Facebook gives us another option to make sure preview displays work, without going for all the Open Graph complications. It is documented in their page here, where they say these plain meta tags have to be added in the page’s header, so that Facebook can pick the values from there and display it. (This was taken from a Facebook help page that existed once, but apparently they pulled it down for whatever reason. here.)
<meta name=”description” content=”Short text Intro” />
<link rel=”image_src” href=”http://domain.com/path/path/image.jpg” / >
Again, here there is no mention how the tags have to dynamically change for each page. However, there is a solution for that, as this nice gentleman has explained here. Just click here to get the code that has to be implemented in your header. Adding this works exactly the same way the Open Graph thing before.
Facebook keeps changing their systems every three months, and everything associated with it goes haywire. They do not stick to one single process, leave many processes half baked and many of their systems are full of bugs, unstable or simply do not work. They do not have follow-it-this-way documentation or an effective support system. All we can do is hope that they will settle on one system and process…
If it STILL does not work, all I can say is: “Why is the Rum always gone?”
It’s also worth noting that this error can also be related to the way the data is served out to facebook, aka how its encoded. Some forms of chunked encoding can cause the open graph tags to not be read correctly by facebook.