Where/How to add FB API info for Open Graph

[Scott_Herder]

Hi there,

I am trying to get FB to display properly when people share from our URL directly into FB. Currently it just pulls our logo. Which is set by default.

The issue (in my opinion) seems to be that I haven’t installed the following code.

    <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '170084820009460',
      xfbml      : true,
      version    : 'v2.11'
    });
    FB.AppEvents.logPageView();
  };

  (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 = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

My dilemma is I am not sure where I need to put this code to active the Facebook App.

For google analytics it was really easy to add, is there a place like that where i need to inser that code to make this all work correctly.

Thanks for your time,
Scott

[friech]

Hi Scott,

Thank you for writing in, you can have the FB Open Graph without having that JavaScript SDK code added on your site. You can enable the Open Graph under Theme Options > Social

Then debug your page here so Facebook will scrap a new data for your site.

Hope it helps,
Cheers!

[Scott_Herder]

So I can get to the step you are talking about, but the thumbnail images don’t load right.

I get a gray thumbnail icon instead of my actual image. I press scrape and debug again and again, but nothing happens.

This is what the debugger says - Based on the raw tags, we constructed the following Open Graph properties

fb:app_id	170084820009460
og:url	https://www.boboandchichi.com/2018/01/one-stop-guide-coolest-things-cleveland/
og:type	article
og:title	The One Stop Guide for the Coolest Things to do in Cleveland - Bobo and ChiChi
og:description	Cleveland, Ohio is one of those cities we have been to many times but never wrote about. Why, you may ask? Because, Megan, aka Chichi, grew up here and it’s so ... Read More
og:image	https://cdn1.boboandchichi.com/wp-content/uploads/Downtown-Cleveland-3.jpg
og:image:alt	

Thanks for your help,
Scott

[christopher]

Hi there,

Actually, the code is correct and the image you have in the code is not a grey one and is the big one:

https://cdn1.boboandchichi.com/wp-content/uploads/Downtown-Cleveland-3.jpg

It seems that the theme already does its job. Now you need to clear browser cache and wait for the Facebook to detect as there is nothing more we can do, the image is there as it should.

Thank you.

[Scott_Herder]

Haha wow, that is crazy. I’ve tried it on a couple computers now and the debugger still shows a gray box, but when doing the social shares it is working perfectly.

So bizarre, sorry for taking up the time on this strange issue.

Thanks so much and have a great day,
Scott

[ruenel]

You’re most welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.