0

I want to create WordPress posts where I embed external pages. As you know, when you paste a link in Facebook, it automatically grabs an image, title, and description. And when someone click it, it directs to the source website. I used iframes, but it embeds the complete page. I just want to show it as it appears in Facebook shares. I want to aggregate news from around the web on my homepage. If I can add the functionality of user voting on the stories, it would be an added advantage. PS: I am not a programmer. Example

1
  • Thank you very much @jgraup. You answer explains it very well. I have checked the WrodPress codex for embeds. It is the functionality I am looking for. But I want it for every website, not only some specific websites. And thanks for your effort to write code. However, I am not able to test it because I do not have any programming knowledge. For the time being, I am evaluating Embed Link ShortCode Plugin by Fermin Molina. Although, a custom solution would be a lot better.
    – Jamal
    Nov 11 '16 at 18:57
1

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.

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="([^"]+)"/', $str, $matches);
    $description = @$matches[1][0];
    preg_match_all('/<meta property="og:image" content="([^"]+)"/', $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.

7
  • ps: I just wanted to mention that the Forbes example from the Codex doesn't work as is, though it shows how to setup such an handler. It has caused some confusion, but I found a new iframe source for it here, until they change it again ;-)
    – birgire
    Nov 6 '16 at 21:09
  • Thanks @birgire. I think a while back I may have seen an issue with it. Maybe I'll harass someone at WordCamp US this year to change it on the spot.
    – jgraup
    Nov 6 '16 at 21:35
  • 1
    I think you should have made it neon and flashing!
    – jgraup
    Nov 6 '16 at 21:48
  • 1
    yes or maybe as a very annoying popup ad ;-)
    – birgire
    Nov 6 '16 at 21:51
  • 1
    @birgire - added some mods to your version and included here.
    – jgraup
    Nov 7 '16 at 6:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.