CODEWITHSUNDEEP
htmlfacebookwidget
Julián D'Alessandro
Julián D'Alessandro

Reputation: 17

Facebook Widget doesn't show

I wanted to put a Facebook widget in my HTML sheet, and I did exactly what it's supposed to, but it doesn't appear in my website.

Facebook tells me this:

  1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag:

    <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/es_LA/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

  2. Place the code for your plugin wherever you want the plugin to appear on your page.

<div class="fb-like-box" data-href="https://www.facebook.com/Queen" data-width="250" data-height="500" data-show-faces="true" data-stream="true" data-border-color="#97BB55" data-header="false"></div>

My HTML sheet is this:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>

<body>
    <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/es_LA/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
    <div id="dprenav">

        <p id="prenav">Olive</p>

        <div>
            <a id="twlogo" href="https://twitter.com/JuliDAlessandro" target="_blank" ><img id="imgtwlogo" src="bird_gray_48.png"></a>
        </div>

        <div>
            <a id="fblogo" href="http://www.facebook.com" target="_blank"><img id="imgfblogo" src="f_logo.png"></a>
        </div>

        <div>
            <a id="right-corner" href="http://www.youtube.com" target="_blank"><img id="cbanner"src="corner_banner.png"></a>
        </div>

    </div>

    <div id="barmenu">

        <a id="barmenu1" href="#">Home</a>
        <a id="barmenu2" href="products.html">Products</a>

    </div>

    <div id="bleft">

        <p>asdasdasdada</p>
        <div class="fb-like-box" data-href="https://www.facebook.com/Queen" data-width="250" data-height="500" data-show-faces="true" data-stream="true" data-border-color="#97BB55" data-header="false"></div>

    </div>

    <div id="barticle">

        <p>asdasdasdsa</p>

    </div>

</body>

</html>

I think that's alright, but it doens't show in my website. Could you tell me what is the problem?

Upvotes: 0

Views: 7653

Answers (2)

Dan A. Root
Dan A. Root

Reputation: 19

I came here after searching for answers as to why my Facebook page widget wouldn't show up on my site. So here is the answer for the rest of people....

  1. You will notice that you are not "logged in" to Facebook on the browser you are having this problem on. After logging in to Facebook using the same browser, you will see the widget displayed on your site, but that's still not acceptable because not all of your customers or website visitors will be "logged in" when they arrive. So to make certain that EVERYONE can see your Facebook page widget regardless of being logged in or not, read #2 below...

  2. Log into Facebook as an administrator of your Facebook Page. Go to your FB Page that you are trying to display using the widget. Once on your Facebook Page, click on "Edit Page" located at the top in the Admin Panel. Then click on "Edit Settings". Then, on the settings page... find the field titled "Country Restrictions". You need to make certain there are absolutely NO COUNTRIES LISTED in this setting. If your page is restricted to "United States", you need to remove that and re-save the settings.

After removing all countries from the "Country Restrictions" area of the settings page, your widget should appear on your website regardless of being logged into Facebook or not. Problem solved.

Hope this helps.

Upvotes: 1

BitLion
BitLion

Reputation: 103

Your computer might not have access to Facebook (for example, using a controlled/blocked computer, using a computer with Facebook blocked at work, or using a firewall/proxy), which might be what's causing the problem. I have an account controlled by my parents (I am a pretty addicted gamer), and Facebook will not connect. I copy and pasted the widget above into my code and, as expected, did not work.

Since the JS file is connected to a page on Facebook, not being able to have access to Facebook won't allow the browser to retrieve the JS file.

Just did it on JSFiddle. Worked fine for me.

Upvotes: 0

Related Questions