If you have a good contents in you bog and if it attracts to the readers then some reader share their favourite articles in the social networking site. But, a problem comes when the shared articles do not properly share on the Facebook wall. It may be caused due to the thumbnail image as it des not come correctly or there a problem in the title and description.
Is the link of the article not showing in the social networking site (Facebook / Google Plus / Twitter)? How to solve the problem by using the Open Graph Meta.
Don’t worry. There is a solution of this problem. All of us know about the Meta tag, for example: title tag and description tag. But, most probably all of us do not know that there is so many Meta tags such as: Google+, Facebook. Twitter, and Pinterest which read the social Networking site. By using these special Meta description, the social networking sites present the shared contents’ images, description, and links beautifully. If these Meta description are mentioned correctly, then the readers share the contents very easily.
Every social networking sites have their own choice. Twitter gives the priority to Twitter card. Google+ and Pinterest give the priority to Schema tag, but they also supports the open graph protocol which Facebook gives the priority. Through using of open Graph protocol, Facebook is called how the shared content will share in the Facebook? I will show in the today’s tips that how do you add the open Graph Meta description in the WordPress theme?
Make a Facebook Application:
If you conduct a Facebook page which is attached to the website, then it will be very useful to set up the Facebook app. To make a Facebook app is a very easy process:
#1. Log in the Facebook and open the developer page https://developers.facebook.com/ and click on the “Add a New app”.
#2. A Pop Up window will come, from there clicking on the webpage link, a pop up window will come just like below picture.
#3. After filling all the fields, click on the Create App ID and generate a unique app in Facebook. You will get the app ID in the dashboard.
#4. Now, go to the insights page, from Domain Insights, click on the Add your Domain button, and a Pop up window will come just like the below picture.
#5. Provided Meta tag put in the <head></head> sections and save it, and then click on the Get Insights button.
#6. Now, put the JavaScript code before the </body> tag in the footer.php file and put the new created Facebook app ID in the place of your_fb_app_id.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'your_fb_app_id',
xfbml : true,
version : 'v2.2'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Facebook and open graph XML Nameservers add in the <html> tag. For this, copy the snippet code and put in the functions.php file.
//Adding the Open Graph in the Language Attributes
function t4b_opengraph_doctype($output) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 't4b_opengraph_doctype');
The below code will replace in the <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes('xhtml'); ?>>
By the below mentioned code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
Set the Open Graph Image
First of all, put the below code snippet in functions.php file.
//Defines a default image
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] [0];
if(empty($first_img)) {
$first_img = bloginfo('template_directory')."/images/logo.png";
}
return $first_img;
}
If you do not find any featured image in any single page, then the image at the top of the first page, that link will show. If there is no image, then logo.png will show. You change it by giving the default image.
Now, we will watch that any featured image is available or not. If there is no featured image, then the link will show, or it will call the above function hat any image will available or not. If you don’t find any image, then a default image will display. In others page, I will recommend to show the default image. For executing the full tasks, put the snippet code in functions.php file.
//Lets add Open Graph Meta Info
function fb_opengraph_images() {
global $post;
if(is_single()) {
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID));
if(has_post_thumbnail($post->ID)) {
$img_src = $src[0];
} else {
$img_src = catch_that_image();
}
} else {
$img_src = get_stylesheet_directory_uri() . '/images/logo.png';
}
return $img_src;
}
The Process of adding Open Graph Tag in the Facebook
Now, I will add the open Meta Tag. There are so many types of Meta tag, but we will mention some important tags:
- og:title
- og:description
- og:url
- og:sitename
- og:image
- og:type
First of all, open the header.php file and according to the rules, put the open graph tags in the <head></head>.
Step:1
The two tags are same in the all pages. These two are: fb:admins and og:sitename. So, put the two tags according to the below codes:
<meta property="og:site_name" content="your_site_name" /> <meta property="fb:admins" content="your_admin_id" />
How do you add admin ID, I have showed you previously. Now, you change the name of the site by giving the site name of the blog.
Step: 2
oq:type single page and page.php is in the same. But, it is quite difference in the rest of the page. So, you put the og:type tag according to the below codes.
<meta property="og:type" content="<?php if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>" />
Step: 3
<?php if (is_single()) : if (have_posts()) : while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php echo single_post_title (''); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php endwhile; endif; elseif(is_home()) : ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>"/>
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php elseif(is_page()) : ?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php get_the_excerpt(); ?>"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php elseif(is_category()) : $category_id = get_cat_ID(single_cat_title("", false)); ?>
<meta property="og:title" content="<?php echo 'This is category for ' . single_cat_title(); ?>"/>
<meta property="og:description" content="<?php echo category_description($category); ?>"/>
<meta property="og:url" content="<?php echo get_category_link($category_id); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php elseif(is_author()) : $author = get_queried_object(); ?>
<meta property="og:title" content="<?php echo 'All Posts by ' . $author->display_name; ?>"/>
<meta name="description" content="<?php echo wp_trim_words(strip_tags(get_the_author_meta('description')), 20, '[...]'); ?>" />
<meta property="og:url" content="<?php echo get_author_posts_url($author->ID); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php elseif(is_archive() && !is_post_type_archive()) : ?>
<meta property="og:title" content="<?php echo 'Archive page for '; wp_title('', true, 'right'); ?>"/>
<meta property="og:description" content="Welcome to the archive page of <?php wp_title('', true, 'right'); ?>? You will get all the posts of <?php wp_title('', true, 'right'); ?> in this page."/>
<meta property="og:url" content="<?php echo get_month_link(get_the_date('Y'), get_the_date('m')); ?>"/>
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>"/>
<?php elseif (is_search()) : ?>
<meta property="og:title" content="<?php echo 'Search results for "'.esc_html($s).'"'; ?>" />
<meta property="og:description" content="<?php echo 'Search results for "'.esc_html($s).'"'; ?>" />
<meta property="og:url" content="<?php echo get_search_link(); ?>" />
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>" />
<?php elseif(post_type_exists('custom_post')) : ?>
<meta property="og:title" content="<?php echo wp_title('', false, 'right'); echo ' page'; ?>" />
<meta property="og:description" content="Welcome to our <?php echo wp_title('', false, 'right'); ?> Page." />
<meta property="og:url" content="<?php echo get_post_type_archive_link('custom_post'); ?>" />
<meta property="og:image" content="<?php echo fb_opengraph_images(); ?>" />
<?php else : ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:image" content="<?php echo $facebook_image;?>" />
<?php endif; ?>
You may take the above codes as your guidelines which give you the concept about how do you put the open graph Meta information? Here, all pages are tagged. You may customize it as your wish. Since the Meta description 165 characters are good, so you can give the expert limit in the case of description. How do you give the limitation, that is described in our tips.
Debugging and Validating:
There is a debugging or validator in every social networking sites for testing or previewing the shared links.
Google Structured Data Testing Tool
This tool will show the preview of the shared tune and the existence of data and the readable of the Google. The characteristics of the page will display under the characteristics of RDFA node.
Twitter Validation Tool:
For twitter Validation tool, you can use twitter card which you have to set up in header.php like open graph. If you set up the twitter card, then you will preview this.
Facebook Debug
After putting the open graph Meta data, click on the debug by pasting link of the page. It displays the characteristics of the object. You have to keep in watch in the case of image that the size of the image is at least 200*200. Facebook does not seem to display the appropriate size of the image below.
Pinterest Reach Pin Validator
Like a twitter card, in here, you also do validate the reach pins before using the Pinterest. If everything is all right, then you will get a message “You Pin’s been validated! Apply Now”.
For testing, you share in any social media networks and check that all of these have happened correctly or not. For avoiding any disturbance, yopu may use various plug ins such as: All in One SEO Pack and WordPress SEO by Yoast which are very much remarkable. About these, you find out so many tunes from Internet.
It is just for today. I will come with another tune. If you want to enjoy this tune, then you must tell your others friends and also share it. If you have any comments or if you face any difficulties to understand it and if you want to recommend anything, then you definitely pass your comments. Thank you, for reading this article and for giving valuable advice.
