Setting up a Facebook style link preview image

Have you ever noticed in facebook when you add a link that it generates a list of images from that link so you can choose one to display? It can really help to give an idea of what the link is about and helps to brighten things up by adding some colour.

I’ve recently implemented similar functionality on one of my sites so I thought I’d share some of it. The whole process is quite long and involved and you may want to do things differently depending on your needs so in this article we will just be focussing on the initial steps to build an array of image URLs in PHP. The idea behind this functionality is really very simple: Look at a page and extract all of the images matching a certain criteria – in this case we’ll look for any images larger (or equal to) in width and height than the thumbnail we want to display.

So let’s get started…

<?php

$link = 'http://www.martialartslife.net';
$width = 120;
$height = 90;
$regex = '/<img[^\/]+src="([^"]+\.(jpe?g|gif|png))/';

Basically in the lines above we’re setting up a few variables. The $link variable could really come from anywhere, it is the link that we’re going to pull images from. $width and $height are the minimum size of the images we’ll use – This can be set to whatever size you like depending on the thumbnail size you need. Lastly, we’re defining a regular expression that will be used to locate the src attribute of image tags. We’re looking for any img tag that has a JPG, GIF or PNG.

Next:

function rel2abs($url, $host) {
    if (substr($url, 0, 4) == 'http') {
        return $url;
    } else {
        $hparts = explode('/', $host);

        if ($url[0] == '/') {
            return implode('/', array_slice($hparts, 0, 3)) . $url;
        } else if ($url[0] != '.') {
            array_pop($hparts);
            return implode('/', $hparts) . '/' . $url;
        }
    }
}

Here we are defining a function named rel2abs that is intended to convert a relative image src attribute (or any URL) into an absolute URL using a $host variable that is passed to it. We will use the original $link variable for this purpose. The function used here is very simplistic to keep the code short. It may not catch all possible cases. I would recommend expanding on this function a bit to make it more comprehensive before using it.

Lastly:

if (($data = file_get_contents($link)) && preg_match_all($regex, $data, $m, PREG_PATTERN_ORDER)) {
    if (isset($m[1]) && is_array($m[1])) {
        $thumbs = array();
        foreach (array_unique($m[1]) as $url) {
            if (
                ($url = rel2abs($url, $link)) &&
                ($i = getimagesize($url)) &&
                $i[0] >= ($width-10) &&
                $i[1] >= ($height-10)
            ) {
                $thumbs[] = $url;
            }
        }
    }

    print_r($thumbs);
}

This is the code that does all the work. The PHP function file_get_contents is used to retrieve the HTML content of the link, preg_match_all is then used with the previously defined regular expression to find all the images. Once all the images are found we then loop over them to determine if they match our size requirements and if so, we add them into the $thumbs array.

What you’re left with at the end of this code is an array of absolute URLs pointing to images that were on the link page. From here it is up to you what you do with the images. It might be that you want to display them for the user to choose one somehow or perhaps you’ve got something else in mind….

That’s all for now.