Blog

Debugging Sharing to Facebook

Unlike most of our other services, Facebook doesn’t use the data we send about the text and link to share in order to determine the content that’s posted. Instead, Facebook’s servers request a copy of your page and look for Open Graph tags you set to determine what information to display. Open Graph tags are special meta tags developed by Facebook that give you a lot more flexibility in how your content appears on a person’s Facebook Timeline.

Figuring Out What Facebook Sees

If your shares to Facebook aren’t showing the correct information your best bet is to submit the URL that’s not being shared correctly to Facebook’s URL Debugger. This tool will let you know what data Facebook has about your URL and will highlight any errors.

Facebook’s URL Debugger
Facebook’s URL Debugger

Two common errors are:

  1. Facebook not being able to access your page because your site is down or behind a firewall. This will prevent your page from being shared on Facebook at all.
  2. Missing, incomplete, or invalid Open Graph tags which will be highlighted in yellow. Facebook will use other tags on the page, such as the <link rel=“canonical”> tag and the <title> tag, along with other <meta> tags and <img> tags to attempt to infer the content that should be shared.

Other useful items on this page are Facebook’s Graph API URL for your page, which gives you access to the content that will be shared in a JSON document and a link to see exactly what Facebook sees when they scrape your page. This is helpful for figuring out if Facebook’s scraper bot isn’t able to access your page.

Tip: You can get a JSON output of the number that will show up in the Facebook Like button’s counter (so you can see what Facebook says the count should be) for a specific URL by appending the URL to https://graph.facebook.com/ like this:

Graph Output
Graph Output

Adding Open Graph Tags to Your Page

The next step is putting Open Graph tags on your page. Facebook makes a very nice tool for this on their Facebook Like button page.

Open Graph Configurator
Open Graph Configurator

This will generate your Open Graph tags for you to paste into the head section of your HTML document.

Generated Open Graph Tags
Generated Open Graph Tags

For adding Open Graph tags to your WordPress blog we recommend the Facebook Revised Open Graph Meta Tag plugin. If you’ve got a great plugin for Magento, Joomla, Drupal, or another content management system let us know about it in the comments.

Using Open Graph Tags to Their Fullest

One great thing about Open Graph tags is that they let you control very precisely how your content shows up. For instance, if you have a video site then you can have it say “John Q. User watched a video” instead of “John Q. User likes a link.” These built-in types also allow you to set other information such as the names of the actors, directors, release date, and full description. More information about the built-in types that Open Graph supports is available here. With some work you can even create custom types and actions so users can “cook a recipe” or even “spot a leopard.”

Other Services That Use Meta Tags

Other services we support, most notably LinkedIn, also use your sites meta tag information to determine what content is shared, so that’s the first thing you should check when you’re not seeing what you expect when sharing to a specific service.

Hopefully this answers your questions about Open Graph tags. If you’ve got any other questions we’re here to answer them. Happy leopard spotting!

  • This is VERY helpful information! I’ve been struggling with this for awhile. Thanks for sharing.

  • Anne Dougherty

    Thank you very much for this update. It’s helpful to have these tips and techniques. What isn’t so helpful is the fact that your documention continues to proffer using addthis:url, addthis:title, addthis:description as customization options for Facebook as a custom service. The time I wasted trying to figure out what I was doing wrong even though I was following your examples exactly is time I could have used to do something else.

    Please, please, please update your documention to reflect that these options no longer work.

  • Paul

    Thanks for the tip, Anne! The addthis:url, addthis:description, and addthis:title options still work for most other services. However, I’ve updated our documentation to help anyone else who’s having trouble with it.

  • Jeffrey

    The addthis:url works for my Like button to know which page it is on.

  • Great stuff. So if we add open graph tags for FB, we don’t need to add addthis:url to our FB addthis button?

  • Thanks for posting, was driving me nuts trying to figure out why different platforms share titles differently!

  • Jen

    How do I handle a page that loads in dynamic content (via ajax) and also uses a facebook button within that dynamic content? I’m able to get the code running just fine using addthis.toolbox(‘.addthis_toolbox’); I’m also able to update the attributes for the addthis:url. It all works correctly with the exception of my button_facebook. When I try sharing to facebook it will only look at the Open Graph tags on the main page and uses that for the sharing URL. How can I make it instead use the URL specific to the content that I’m ajaxing in?

  • Matt

    As long as addthis:url is set correctly, then the Open Graph tags are normally also grabbed from the same URL. Can you send us the URL of the page where you’re seeing this behavior to help@addthis.com? Thanks!

  • Romeo Javellana

    Hello,
    How can we edit the api.addthis.com text under the title?

    Thank you.

  • Sounds like you just need to add an og:description. Have you tried that?

  • Treasure Chia

    谢谢

  • David Copperfield

    Hi! A really informative blog. By the way, do you know how to add line break to the og:description because “n” doesn’t seem to work. Thanks in advance.

  • Many people recommend not putting line breaks in meta tags. It might be better to keep the description short, instead. :)

  • alberto

    we wont wiat

  • Priya

    Hi I am Priya I have an Entertainment blog >> Chudai Kahani
    When i trying to share on facebook my blog post its dont showing my blog description
    Plz tell me the blog solution
    If any kind here plz plz plz help me how to fix it .. when not showing my post description
    really i am suffering for this .. plz dont delete my comments really i need to solve this problem
    if any kind here knock me here to help me

  • It sounds like you need open graph tags. Here’s a blog post with some info on that: http://www.addthis.com/blog/2014/07/03/optimize-your-content-recommendations-with-open-graph-tags-2/#.U_tKYIBdVig

  • Thanks a lot. It helps

  • Ashwin G

    I have new webpages created every few days. But unless I have the url fetched in the OG debugger, the share information looks odd or junk information. I do need to have the url fetched once I publish the page. Is there a way to trigger the Facebook fetch?

  • Test

    asd

  • Just want to share something that might be useful to your social media site, just try buyrealmarketingdotcom, it’s for boosting your site.

  • Hi Daniel, can you please email our support team directly at help [at] addthis [dot] com? That way they’ll be able to take a closer look at your site and assist. Thanks!

  • Thank you for your informative post on debugging sharing to face book keep post the valuable information like this….

  • Hello! Are you referring to when you share to Facebook to your site using our share buttons? If so, please email our support team directly at help [at] addthis [dot] com and they can take a closer look at your site to figure out what’s happening. Thanks!

  • Hi Bertahan, can you please email us at help@addthis.com with these details? Our support team will be able to take a closer look for you and assist. Thanks!

  • Thank you for your informative post on debugging sharing to face book keep post the valuable information like this….