How to generate image_src for Facebook links in WordPress theme

Generate WordPress article to be attached when using Facebook links: image_src tagSharing your article for free advertisement on Facebook is a fact. While using different Social Networks sharing tools I had a problem when sharing my articles on Facebook: sometimes the image that I intended to use to represent the article wouldn’t show in the list of the images who can be chosen. Why is that?

It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!


In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta name=”title” content=”title” /> <meta name=”description” content=”description ” /> <link rel=”image_src” href=”thumbnail_image” / >

Also, beware of this fact:

The thumbnail_image is the URL to the image that appears in the Feed story. The thumbnail’s width or height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.

OK. so these are the Facebook requirements. How can we implement them?

So let’s get into some code.

First, I tried to modify the theme – adding the following code to the header.php file:

$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
echo '<link $image_src="$matches['1'][0];" $matches); $the_content, preg_match_all($pattern, />';

While it is workable, from performace point of view isn’t very nice because you try to read at ANY page refresh the post and show the image. But what if you’re on the first page with lots of posts? Or in archive? The code that I settled in the final was placed in functions.php file in my current theme. It allows me to use triggers that output to the head of the page the desired content and also to do this only when a single post page is requested. The code is:

function add_image_src(){

  global $post;
	// get the global variable post
  // if it exists and is only a single post
  if ($post){

    // pattern for recognizing first image in post	
    $pattern = '!<img.*?src="(.*?)"!';
    preg_match_all($pattern, $post->post_content, $matches);

    //first image would be the representative image
    $image_src = $matches['1'][0]; 
    // extract it as Facebook wants it
    echo '<link rel="image_src" href="', $image_src,'" />';

// hooking to the head generation loop my function defined above
add_action('wp_head', 'add_image_src');