January 6, 2018

How to Use Facebook Debugger Tool Tutorial for Beginners


You can use facebook debugger Tool for improving social media presence of wordpress websites and blogs. Using facebook febugger Tool Tutorial will show you how to use this developers facebook tool for debugging and social sharing. Facebook Debugger tool is used by social media managers for professional work. Wordpress bloggers use facebook debugger tool to get a preview of the content shared in Facebook.

Facebook open graph debugger tool fetches Open Graph (OG) meta tags from websites, Wordpress blogs, social networks, blogger blogs and display them in Facebook. This post will show the best methods on How to Use Facebook Debugger to Fix Sharing on Facebook, How to Use Facebook Debugger Tool Tutorial, Fix WordPress Links on Facebook, how to use Facebook open graph debugger tool and Facebook Sharing Debugger tool and Use Facebook Sharing Debugger Tool Facebook for Developers. Many people call it wordpress facebook debugger and developers facebook tools debug sharing. I am calling it as Facebook Debugger and it is essential to make the facebook debugger work properly.

There are basically two debuggers: Open Graph Object Debugger and Facebook Sharing Debugger.

What is Facebook Debugger Tool for Beginners

Developers in facebook.com has decided to make a tool that crawl the post, find out properties inside content by accessing the og meta tags and give a preview of the post. If you find any errors, clear them and fetch new scrap information to re-fetch the post. The tool is officially called Open Graph Object Debugger


Facebook Debugger Tool for Beginners


What is Facebook Sharing Debugger

Facebook Sharing Debugger fetch posts from their website and blogs and show how they will be displayed in Facebook when other share it.. This debugger tool gave control to webmasters to redefine how their posts, images, quotes, links are shared and displayed in Facebook.

How to Use Facebook Debugger Tool Tutorial

You can access Facebook Open Graph Object Debugger by visiting developer.facebook.com. To make it easy I will explain the working of the tool. It is essential that everyone knows about it. If you do not know how to use the facebook debugger tool, your post will not displayed properly in Facebook.

Who wants to have no images, blurred images in their posts? 
Who want no links in posts? 
Who wants no author name in posts?

No one right?

Especially when the Facebook space is extremely competitive in terms of posts and articles. Your post should always stand apart to get the users to see and click on your posts. For that you should know how to effectively use debugger tool and give appropriate open graph meta tags in the website theme and templates.

How to use Facebook Debugger Tool to fix Open Graph Meta Tags

What Are Open Graph Meta Tags | Use Facebook Debugger Tool Tutorial for Beginners

Open Graph is a protocol used in Facebook and meta tags are just like keywords for bots to identify appropriate content from a post. Using a meta tag of og:image, webmasters can tell bots to identify a property of the content of article as image.

What Are Essential Meta Tags for posts for Facebook

Moz has given a list of essential meta tags to be added to WordPress themes, blogpost templates and other types of themes. Read them here Must-Have Social Meta Tags for Twitter, Google+, Facebook and More. They are;

<!-- 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" />

By adding meta tags properly to themes and templates, you can control how your posts looks like.

How to Use Facebook Sharing Debugger Tool Facebook for Developers


The home page will look like this.

How to Use Facebook Sharing Debugger Tool Facebook for Developers

Under Input URL, type or paste your post URL. A post URL will look like https://www.shipmethis.com/2017/11/facebook-debugger.html. Then click "Show existing scrape information". 

There is a chance that the debugger tool does not provide appropriate result and show you an error. Many times it gives no result or shows random parsing errors. I wished many times that it would be great if someone can sit with me and clear these errors. This majorly happens if the post newly published or has been deindexed in Facebook.

How to Use Facebook Debugger Tool Tutorial

You may get the common "Error parsing input URL, no data was cached, or no data was scraped." error like the one in the image. In the case of Error parsing input URL, no data was cached, or no data was scraped, the issue is that Facebook has not yet fetched the post data. Just click on the 'Fetch New Scrape Information' and it will be fetched and processed.

If Facebook debugger tool still fetches previous data, use the below URL and paste in the browser. Change the URL of your article and press enter.

http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912

This will consider your post as new and fetch new data. Kindly check if your post is having the original URL and not a 301 redirect.

Preview of Posts In Facebook

When clicked the "Fetch New Scrape Information", 'Facebook debugger' tool will fetch new tags and information and display a preview of the post of how it is going to appear in facebook. The debugger tool will shows you details of the post such as Time Scraped, Response Code, Fetched URL, Server IP, Graph API, redirects and raw meta tags.

How to Use Facebook Sharing Debugger to Fix WordPress Links on Facebook


Open Graph properties will appear like this.

og:url
og:type
og:title
og:locale:alternate
og:locale
og:image
og:description
og:site_name
og:updated_time
article:author
article:publisher
article:section
article:tag
og:image:alt

A Preview is what users will see when they share the URL.

If you are finding warning and errors, try to read about them in Google and fix it. Check the 11 Facebook Share Buttons And Plugins for Blogger Post to find out about how to Add Facebook og Metadata, how to verify the Meta Tags and how to Add Facebook JavaScript SDK.

Facebook Sharing Debugger How To use

Many time I shared an WordPress post in facebook and found it having no image or URL. This is majorly happens when the WordPress theme have not correctly added og meta tags. Sometimes the images are shown but they are just thumbnails of the image. Go to the debugger tool and enter URL of the post.

How to Use Facebook Debugger to Fix WordPress Links on Facebook


Facebook sharing debugger can help you to find how exactly your posts will appear in desktop and mobile display. It is suggested to use both Facebook debugger tools after you publish a post or launching a new web project.

How to Use Facebook Debugger to Fix WordPress Links on Facebook

You can use Simple Facebook open Graph plugin or Yoast SEO plugin in WordPress for resizing images while sharing a post.

You can add width and height og meta tags to resize images.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

This will server images in approximate scale.

How to Make Facebook Show CORRECT Post or Page Thumbnail

How to Fix Facebook Incorrect Thumbnail Issue in WordPress


Go to your website in Chrome or any browser
Go to the post that have a picture but Facebook is not showing post of page thumbnail correctly.
Right click and select view page source.
Press CTRL+F to find a piece of code "meta property=“og:image” without quotes.

For Wordpress blogs, add any SEO plugins that adds open graph meta tags to posts.

You can use Yoast Wordpress SEO plugin and select Add open Graph Meta Data.

Go to Wordpress, Add plugin, search for Yoast, Install Plugin and Activate.
Go to Plugin, Select Open Graph Meta data Under Facebook and save changes.

For blogspot, add following codes inside the template.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' data-page-subject='true' property='og:image:width'/>
<meta content='630' data-page-subject='true' property='og:image:height'/></b:if>

Go to blogger, open theme, Select Edit HTML, Add the above codes after <head> tag. Save the template.

Go to Facebook Debugger, select Fetch New Information and Check again if the images are appearing correctly in Facebook.

Kindly share the post for others who are searching on How to Use Facebook Debugger.

Kindly spend 5 seconds to share this post



Search Here

Whats Hot

About Author