How to Add Social Media Embeds To Articles In WordPress – CloudSavvy IT

If you’ve sent a link to your WordPress article, and it didn’t expand to show the image, title, and description, that’s because you haven’t set up your Open Graph Meta Tags in WordPress. We’ll show you how to configure them to improve your social media presence.

What Are Open Graph Meta Tags?

The configuration for social media embeds is done through a standard format, originally created at Facebook, called “the Open Graph Protocol.”

Basically, they look like the following <meta> HTML tags, usually in the header of your site:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg"> 
<meta property="og:title" content="Website Title" /> 
<meta property="og:description" content="Website Description" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="https://example.com/" />

However, while this would work for a regular website, you can’t just paste this into your WordPress HTML. This is because WordPress is a content management system (CMS) and it needs to fill in the title, description, and image depending on the article you linked.

There are two main ways to do this — manually, with some edits to your PHP files, or automatically with a plugin. Less plugin dependencies is always better, so we recommend adding it manually if you’re tech-savvy.

But, if you aren’t, or are using shared hosting and don’t have access to your system files, there’s nothing wrong with configuring it with a plugin.

Manually Adding Tags to PHP

PHP is used to generate the HTML file automatically when a user requests it. The PHP code used to generate the header depends on which theme you’re using. It’s technically located in header.php, but this calls a function called wp_head(), so it’s better to add a new action to that in functions.php, located here:

wordpress/wp-content/themes/theme/functions.php

If you’re not comfortable with text editors, you can install a plugin called Head, Footer, and Post Injections which will let you add code through the plugin settings, though you should probably just use the plugin below if you’re adding plugins anyway.

Otherwise, you can use a command line editor like nano or micro, or you can transfer this file to your desktop to edit it. Either way, open this up in your text editor of choice, and scroll to the bottom:

Then, paste in the following function:

function fb_opengraph() {
    global $post;
 
    if(is_single()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
        } else {
            $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>
 
    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src; ?>"/>
 
<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

Essentially, this checks if the page is a single post or a main page, and configures the description and image accordingly. Note that it uses /img/opengraph_image.jpg for non-article pages, so you will need to put something there.

Then, it adds all the OG meta tags, using whatever data the page is currently using. This should take effect immediately, though you may have to wait for caches to refresh.

Using a Plugin

Configuring this with a plugin is simpler. You’ll want to search for “Open Graph and Twitter Card Tags,” and install it:

Activate it and head to the settings:

There’s not much to configure here, as it’s all set up automatically, but you can specify custom text for the homepage and default descriptions, and upload a default image for non-post pages.

You should see the changes working immediately after you hit apply.

Some other bigger plugins, like YoastSEO, will also configure meta tags, but this plugin does it simply without additional bulk.