We all share and promote our website’s contents on Facebook and this really helps us get traffic and authority . If you want the shared content to look more attractive then it should be properly formatted, now Facebook is smart that it will get the data directly from your blog post. But in some theme is may not work well and we cannot predict that it will work in other themes well so adding this makes your site more compatible with Facebook open graph rules. So in this post , will show you How to Add Facebook Open Graph Meta Tags in WordPress so that the necessary data can be correctly

Setup Using WordPress SEO Plugin by Yoast

If you are using WordPress SEO plugin by Yoast then this is an easy task and can be done with a few clicks, so let’s see how to add Facebook Open Graph meta tags in WordPress using Yoast SEO plugin. Hoping that you have installed and activated Yoast SEO plugin, or you can download it from here then install and activate it, see How to properly install a plugin in WordPress .

  • After installing and activating it, go to  SEO>Social.

seo-social-yoast

 

  • On Facebook tab, just enable “Add Open Graph meta data”

Facebook Open Graph Meta Tags In WordPress

  • Now save the settings that’s all . Further more you can add a separate image to shown when the home page is shared on Facebook.

 

How to Add Facebook Open Graph Meta Tags in WordPress Using Facebook’s Official Plugin

If you are not using WordPress SEO plugin by Yoast or don’t wanna use it, then Facebook has its own plugin that will do the job. For that, you will need to install and activate the Facebook plugin, see our guide on How to properly install a plugin in WordPress.

Facebook Open Graph Meta Tags In WordPress

Just activate the plugin and then the open graph tags will be added to your header section. With this plugin, you can also add Facebook like box/Fan box, Author Follow button and embed you Facebook status updates.

How to Add Facebook Open Graph Meta Tags in WordPress Manually

If you don’t want to use any plugin then you can do this by editing your theme’s functions.php file. As this procedure involves editing your theme file, we recommend you to download a copy of the functions.php before you edit it . After just copy and paste the code below to your theme’s functions.php file just after ‘ <?php ‘ line.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
    return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
  }
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {
  global $post;
  if ( !is_singular()) //if it is not a post or a page
    return;
        echo '<meta property="fb:admins" content="YOUR USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME"/>';
  if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
    $default_image="http://yoursite.com/facebook-og.jpg"; //replace this with a default image on your server or an image in your media library
    echo '<meta property="og:image" content="' . $default_image . '"/>';
  }
  else{
    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
    echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
  }
  echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
  • Now change “YOUR USER ID” on line 13  with our Facebook user id, you can find your ID by visiting http://graph.facebook.com/yourfacebookurl (Change “yourfacebookurl” with our facebook address).
  • Change “Your Site NAME” on line 17 with your website’s name.
  • On line 19 change the URL “http://yoursite.com/facebook-og.jpg” with the URL to an image which will be shown instead if Facebook can’t find a thumbnail from your site.

Now you have manually added Facebook’s open graph tags to your site. This code will automatically allow Facebook to fetch the title, featured image, excerpt and URL of the particular post being shared.

If you have any problem then you can leave a comment or use our forum.

Subscribe to our Weekly
SUBSCRIBE
WPDeve WordPress Forum

Leave a Comment