Open Graph Not Functioning

Hi, my feature image is not showing when I post on Facebook. It’s showing a blank space. I have tried switching the open graph feature on x theme options and even switched it on again with no success. Is there a way you can assist?

TIA

Hi @Bonnie87,

Thanks for reaching out.

Have you try fetching the new data using the Facebook tools? Please go to this tool https://developers.facebook.com/tools/debug/

Then input the URL that has the issue and hit Debug button.

Then click the fetch new scrape information

What facebook displaying is the cache data of your site.

Thanks!

I keep getting error after error no matter what the changes I make. I give up!!!

Hi Bonnie,

Could you please provide us with an example page/post URL to your site, so that we can check your issue.

Alternatively, you can also use Yoast SEO plugin which has more options to set and control meta data. You can refer to the following detailed post (https://theme.co/apex/forum/t/how-to-change-og-description/46939/2?u=mldarshana).

Thanks!

Nothing seems to be changing. https://bonniecharmer.com/quizzes/

Hi There,

Upon checking your website, I could see that the og:image meta tag is blank:

Please make sure you’ve set the Social Fallback Image under Theme Options > Social:

If it still doesn’t help, would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

Hi Bonnie,

I checked the code and the image is there,

<meta property="og:image" content="https://bonniecharmer.com/wp-content/uploads/2018/11/Charmer-Header-1.jpg">

The problem is that Facebook can’t parse your site’s HTML correctly due to malformed HTML code. And it’s because of this

<div id="fb-root"></div>

It should be added within <body></body> and not on <head></head>. Please remove that code, this is the complete code

<meta property="fb:app_id" content="2075876142471555">
<div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '2075876142471555',
          xfbml   : true,
          version : 'v2.1'
        });
      };

      (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/'.$tco_fb_locale.'/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

The <meta> and <script></script> blocks are fine, except the <div></div> block.

Once fixed, please use the Facebook tool to re-scrape it.

Thanks!

Kindly forgive my inexperience and allow me to ask, where do I add the code? i didn’t see much code on header.php on my theme files. How do I go about it?

Hi,

First, you need to set-up a child theme.

Then create file _header.php in wp-content/themes/x-child/framework/legacy/cranium/headers/views/global
and copy the code below into that file

<?php

// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================

?>

<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

  <div id="x-root" class="x-root">

    <?php do_action( 'x_before_site_begin' ); ?>

    <div id="top" class="site">

    <?php do_action( 'x_after_site_begin' ); ?>

Then add your FB code right after this line <body <?php body_class(); ?>>

Please note that this path legacy/cranium/headers/views/global does not exist in your child theme yet. You will need to create those folders.

Thanks

I did all the above.

  • Created a child theme
  • Added the code in body
  • Disabled open graph in jetpack and xtheme option, leaving only yoast to handle the open graph
  • Most issues on the facebook debugger have been fixed, but the og:image is still missing.

Recently I am getting this error on meta tags;

Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.

Should I go back to the child theme and move the fb:app_id to head?

I see that you didn’t remove that code in the <head></head> as instructed by Rad.

It is worse now because it’s also added below the body.

Please remove the FB code from the head and body and check if the issue persist.

Either it is fixed or not though, you will need to forward this to a third party developer to integrate Facebook correctly in your site. Moreover, since you’re now using Yoast SEO’s Open Graph, X now has no connection with Facebook nor other services that uses Open Graph.

Thank you for understanding.

I am a little confused. I added the code in in the child themes _header.php file. Do you mind directing me to the file with the code in ? I believe that will fix the problem because all the other og parameters are okay

Hi Bonnie,

Prior to the _header.php you already have this code on the head part of the site, and until now I can see it there. So you have 2 instances of this on your site, one on the <head> part and one on the <body> via (_header.php file)

<meta property="fb:app_id" content="2075876142471555">
<div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '2075876142471555',
          xfbml   : true,
          version : 'v2.1'
        });
      };

      (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/'.$tco_fb_locale.'/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

I tried to find it on your site, but I could not find it (this could be a caching related). Do you recall where did you put this block of code originally? (No, not the one on _header.php)

Rad instruction above is to remove this line only: <div id="fb-root"></div> on the <head> and add it on the <body> instead.

Can you recall where did you add that originally?

Thanks,

I did not put any code initially. The only place I have added code is on the child theme. @Rad adviced me to fix that small code. I didn’t know where to find it. When I asked where the code was, @paul.r adviced me to create a child theme. Which I did. The child theme and the code I added there solved a lot of other errors that I was getting on FaceBook debugger before. The only problem now is the og:image attribute. To fix that, I need to fix some code I’m not sure where it is. I have checked the header codes for xtheme, but I can’t see the code I’m supposed to fix

I can’t seem to find that block of code. either. I wish @Rad would tell me where he saw it

Sorry for the confusion. I’ve investigated further and our assumptions are wrong.

  1. The code in the head that we were referring to is actually coming from our Facebook Comments plugin. We’re sorry. Even with the code outputted in the head, this does not cause the image issue nor the meta issue you described.

  2. Regarding the image not showing in Facebook, the theme has not connection with this anymore because you’ve disabled X’s Open Graph. The fallback image you’ve set in Theme Options will not take effect. Nothing in the theme is connected to Open Graph now.

  3. I’ve assigned a featured image to your Quizzes page and the image issue’s resolved. This is a Yoast SEO feature and not the theme’s. You’re now left with the meta error which you should continue resolving with Yoast SEO.

I’d recommend that you delete _header.php because you’re loading the FB sdk twice since your using the Facebook Comments extension. I’ll post in our issue tracker that the code is outputted in the <head> when it should ideally be placed after the <body>.

Hope that clarifies things now.

By _header.php file you mean the one I had created in the child theme?

Hi Bonnie,

Yes, the _header.php that you created in the child theme.

Thanks,

I guess I’ll just have to admit that it will never work. Even after all the errors have been fixed it’s not working. Every link shared seems to have it’s own issues. I don’t know whether to delete the whole site and start over from scratch, or count my loses and shop for another theme. I have built lots of sites before and have never ran into this issue. Anyway, I appreciate your efforts

Hi Bonnie,

In that case, I recommend deactivating the child theme (by activating the parent theme), then deactivate all other plugins (except for conerstone). Once they are inactive, please test it again using that Facebook tool.

Thanks!