CODEWITHSUNDEEP
htmlfacebookapifacebook-javascript-sdk
user5330988
user5330988

Reputation:

Facebook website plugins

For adding Facebook page plugin I am using the following code

'<html>
   <head>
   <title>Your Website Title</title>
      <!-- You can use open graph tags to customize link previews.
      Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
       <script>(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#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      </head>
      <body>



 <div class="fb-page" data-href="https://www.facebook.com/TheDivert/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/TheDivert/"><a href="https://www.facebook.com/TheDivert/">The Divert</a></blockquote></div></div>
  </body>
  </html>

But the result is that only a hyperlink is created and the result shown on https://developers.facebook.com/docs/plugins/page-plugin from where the code is taken is not shown. Could anyone find the problem with my code as I assume face books code will be correct.

Upvotes: 1

Views: 626

Answers (1)

Optimae
Optimae

Reputation: 1002

Try this:

<html>
   <head>
   <title>Your Website Title</title>
      <!-- You can use open graph tags to customize link previews.
      Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
      <div id="fb-root"></div>
      <script>(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#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      </head>
      <body>



 <div class="fb-page" data-href="https://www.facebook.com/TheDivert/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/TheDivert/"><a href="https://www.facebook.com/TheDivert/">The Divert</a></blockquote></div></div>
  </body>
  </html>

Same code as before, except that you were missing:

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

and the XFBML version number:

&version=v2.5

I figured this out by comparing your code against the code generated from https://developers.facebook.com/docs/plugins/page-plugin

I've tested this on a live server and it works, but if it doesn't, let me know.

Sidenote: Remember to turn off Ghostery and/or other FB blocking browser extensions when testing.

Upvotes: 1

Related Questions