Hello Guys!
I hope this post will help someone who's in need it.
Sharing your URL within photo, Manually Implementing Open Graph Protocol:
If you want to add these Meta tags manually then follow the steps below:
Step1: Note down the value of the application ID if you have created a Facebook App. Otherwise, just note down the value of Facebook Admin ID which you can determine from your Facebook Insight Page.
Step2: Note down the value of the application ID if you have created a Facebook App. Otherwise, just note down the value of Facebook Admin ID which you can determine from your Facebook Insight Page.
Step3: Open your theme’s header file (generally header.php) and add following code just before the <head> tag on your web page:
<html xmlns="
https://www.w3.org/1999/xhtml" xmlns:og="
https://ogp.me/ns#" xmlns:fb="
https://www.facebook.com/2008/fbml">
Step4: Copy-paste the following code at the bottom of your functions.php file and upload it to the server. This code will get the first image from the post and display it.
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\' "]([^\' "]+)[\' "].*>/i', $post->post_content, $matches);
$first_img = $matches [1]
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
Step5: Add following open graph protocol meta tags in the head section (<head>…</head>) of your header.php page:
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<meta property="fb:admins" content="your_fb_admin_id" />
$facebook_image= catch_that_image();
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="<?php echo $facebook_image;?>" /> <?php } ?>
NOTE1: Replace ‘your_fb_admin_id’ with your Facebook Admin ID.
NOTE2: og:type means the type of the object. Since our object is a piece of content (article, blog post, video, photo, etc) I have used ‘article’ as the object type. You can see the complete list of supported object types from:
https://developers.facebook.com/docs/sharing/opengraph#types Step6: Once you have added your special meta tags, you can now add the Facebook ‘like’ button code into the body section (<body>..</body>) of your web pages. You can get the ‘like’ button code from:
https://developers.facebook.com/docs/plugins/like-buttonStep7: Test your open graph meta tags here:
https://developers.facebook.com/tools/debugThat’s it. You have successfully used the open graph protocol.
Here is: Example of a Web Page Which Uses The Open Graph Protocol<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
https://www.w3.org/1999/xhtml" xmlns:og="
https://ogp.me/ns#" xmlns:fb="
https://www.facebook.com/2008/fbml">
<head>
<title>Open Graph Protocol</title>
<meta http-equiv="Content-Type" content="text/html;charset=WINDOWS-1252" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="event-education.css" />
<meta name="verify-v1" content="so4y/3aLT7/7bUUB9f6iVXN0tv8upRwaccek7JKB1gs=" >
<meta property="og:title" content="Open Graph Protocol"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="
https://www.eventeducation.com/test.php"/>
<meta property="og:image" content="
https://www.eventeducation.com/images/982336_wedding_dayandouan_th.jpg"/>
<meta property="fb:admins" content="M1940H"/>
<meta property="og:site_name" content="Event Education"/>
<meta property="og:description" content="Event Education provides free courses on event planning and management to event professionals worldwide."/>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=501839739845103";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
.
.
.
</body>
</html>
If there is some better solution, let us know please.
