OpenGraph.ioOpenGraph.io
Log inStart Free

WordPress & Gutenberg embeds

Fetch embed HTML from OpenGraph.io on the server or in a custom block, then render it in WordPress posts and pages. Works for native oEmbed providers and fallback cards.

Recommended approach

Call the OpenGraph.io oEmbed API from PHP (server-side) so your App ID is never exposed in the browser. Store or cache the returned html in post meta, or render it at request time for dynamic embeds.

For user-submitted URLs, check source in the response. Fallback cards (og_frame) include an embed_id you can use to refresh stale previews later.

PHP helper

functions.php or plugin
function opengraph_oembed_html( $url ) {
    $app_id = getenv( 'OPENGRAPH_APP_ID' );
    $endpoint = 'https://opengraph.io/api/3.0/oembed?url=' . rawurlencode( $url ) . '&app_id=' . rawurlencode( $app_id );
    $response = wp_remote_get( $endpoint, array( 'timeout' => 15 ) );
    if ( is_wp_error( $response ) ) {
        return '';
    }
    $body = json_decode( wp_remote_retrieve_body( $response ), true );
    return isset( $body['html'] ) ? $body['html'] : '';
}

Custom Gutenberg block (JavaScript)

In a dynamic block, call your WordPress REST route that wraps the PHP helper above, then inject the HTML into a sandboxed container:

Block save / render
async function fetchOembedHtml(url) {
  const res = await fetch(
    `https://opengraph.io/api/3.0/oembed?url=${encodeURIComponent(url)}&app_id=YOUR_APP_ID`
  );
  if (!res.ok) throw new Error('Embed failed');
  const data = await res.json();
  return data.html;
}

Shortcode pattern

Shortcode
add_shortcode( 'og_embed', function ( $atts ) {
    $url = isset( $atts['url'] ) ? esc_url( $atts['url'] ) : '';
    if ( ! $url ) return '';
    $html = opengraph_oembed_html( $url );
    return $html ? '<div class="og-embed">' . $html . '</div>' : '';
} );

Usage in editor: [og_embed url="https://example.com/article"]

See also