How to Add Facebook Open Graph Meta Data into Your WordPress Theme?

User avatar
Wild_Beast
Posts: 3
Joined: Mon Feb 06, 2017 5:09 am

How to Add Facebook Open Graph Meta Data into Your WordPress Theme?

Tue Aug 28, 2018 9:29 pm

Hi Guys, It's been a long time since my last post here. I think this tutorial is very helpful to everyone who don't want to install too many plugins on their wordpress theme, or you want to have facebook meta data in your board.

I hope this will you guys...

This method requires you to edit your theme files, so make sure that you backup your theme files before making any changes. Simply copy and paste this code in your theme’s functions.php file. Just to be safe copy your function.php file before you add this code just in case you made some mistake. obscene/drinkingdrunk
//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 Goes HERE"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://example.com/image.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 );
Note: Remember to change the Site Name where it says “Your Site Name Goes Here”. Also change the default image URL with the image of yours. We would recommend putting an image with your logo there, so if your post does not have a thumbnail, then it pulls your site’s logo. Studies show that posts shared without a thumbnail are less effective than those with thumbnails. Also don’t forget to add your USER ID. You can find your Facebook user ID by going to this URL: http://graph.facebook.com/dohangoutcom (Just replace dohangoutcom with your own username).

Additional, you can also use this below code too:
function doctype_opengraph($output) {
return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');
This will ensure that the proper doctype is added to our HTML. Without this code, most platforms would simply skip over our webpage, and the tags we are about to add would never get parsed. The next function is where we will actually add the proper metadata for Open Graph to work. The full function looks like this:
//Add Open Graph Meta Info from the actual article data, or customize as necessary
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/logo.jpg'; //your logo incase you do not have a featured img
}
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);

You’ll need to customize a few of the tags above, such as replace the og:site_name with the actual name of your site. You’ll also need to discover your Facebook admin id and replace it in the value of the fb:admins content tag.


flags/wavegreatbritain
User avatar
Magdalo
Posts: 12
Joined: Fri Mar 17, 2017 2:17 pm

Re: How to Add Facebook Open Graph Meta Data into Your WordPress Theme?

Fri Aug 31, 2018 2:21 am

Hi Wildbeast,

Welcome back!!! On my wordpress blog website. I decided to use plugin first - then i start to play with function.php created some trouble for me at first, but what I do is I put the metas straight to the header.php before the </head> close.
<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="fb:app_id" content="my apps ID">
<meta property="fb:pages" content="my facebook page url link ID">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="<?php echo $img_src; ?>"/>
This work great to me without any issues., then i deleted my plugin.

I hope this add up...goodpost
User avatar
Princess Anna
Posts: 23
Joined: Fri Feb 03, 2017 2:40 pm

Re: all the meta TAG for GOOGLE, Twitter, and Facebook

Thu Sep 06, 2018 6:18 pm

In Addition this are all the meta TAGs for GOOGLE, Twitter, and Facebook below:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
User avatar
Princess Anna
Posts: 23
Joined: Fri Feb 03, 2017 2:40 pm

Re: Full Meta tags for social Media

Thu Sep 06, 2018 6:21 pm

Here are the list of all meta tag require for social media
Full Social Media Tag Template: Article
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

Return to “WEBSITE AND WEB DESIGN”

Links

In total there are 4 users online :: 0 registered, 0 hidden and 4 guests
Registered users: No registered users
Most users ever online was 156 on Sun Jun 17, 2018 7:42 am
Total posts 449
Total topics 328
Total members 62
Our newest member anonymous-kali
No birthdays today