Embed/Link external web pages into my WordPress blog (Like Facebook grabs Image, Title, and Description)

Question

Looks like you might be describing embeds which WordPress supports. On https://codex.wordpress.org/Embeds you’ll find a long list of currently supported embeds simply based on the URLs added in your editor.

For the embed to work, it’s required to be on a single line with a space above and below. And generally they are constructed during the_content filter.

To test which embeds you currently support, you can force an embed to transform from a url using wp_oembed_get($url).

There are two methods you can use to add support for embeds that aren’t currently included.

For non-oEmbed sites – wp_embed_register_handler( $id, $regex, $callback, $priority )
For oEmbed-enabled sites – wp_oembed_add_provider( $format, $provider, $regex ).

In the case a site is not included, you may need to code the regular expression required to transform a URL to an Embed. But after that it’ll work like magic.

An example given for a custom embed on non-supported oEmbed site (modified from @birgire‘s answer):

/**
 * Embed support for Forbes videos
 *
 * Usage Example:
 *
 *     http://www.forbes.com/video/5049647995001/
 */
add_action( 'init', function()
{
    wp_embed_register_handler(
        'forbes',
        '#http://www\.forbes\.com/video/([\d]+)/?#i',
        'wp_embed_handler_forbes'
    );

} );

function wp_embed_handler_forbes( $matches, $attr, $url, $rawattr )
{
    // construct the video embed

    $embed = sprintf(
        '<iframe class="forbes-video" src="https://players.brightcove.net/2097119709001/598f142b-5fda-4057-8ece-b03c43222b3f_default/index.html?videoId=%1$s" width="600" height="400" frameborder="0" scrolling="no"></iframe>',
        esc_attr( $matches[1] )
    );

    // pull information from the page

    $str = wp_remote_retrieve_body(wp_remote_get($url));
    preg_match_all('/<head>(?:[^<]+)<title>([^<]+)<\/title>/', $str, $matches);
    $title = @$matches[1][0];
    preg_match_all('/<meta name="description" itemprop="description" content="([^"]+)"https://wordpress.stackexchange.com/", $str, $matches);
    $description = @$matches[1][0];
    preg_match_all('/<meta property="og:image" content="([^"]+)"https://wordpress.stackexchange.com/", $str, $matches);
    $image = @$matches[1][0];

    // prepend extra info

    $embed = sprintf('<a href="%s" target="_blank" rel="noopener noreferrer" ><img src="%s"><h1>%s</h1></a><p>%s</p>%s', $url, $image, $title, $description, $embed);

    return apply_filters( 'embed_forbes', $embed, $matches, $attr, $url, $rawattr );
}

Sample with:

http://www.forbes.com/video/5049647995001/

http://www.forbes.com/video/5037500512001/

http://www.forbes.com/video/4284088649001/

http://www.forbes.com/video/5046852474001/

While this example specifically uses an iframe you can construct anything from the url. It takes extra time but you, in theory, could pull the URL and scrape the details for a customize visual.

For Facebook, they use a service http://developers.facebook.com/tools/lint/ to cache the scraped content, then serve cached data. That’s why sometimes the first share of a page takes a while to show up. If you want to speed up this process, you would have a mechanism to cache the content to be served.

Related Posts: