Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Omar Suriel
Omar Suriel
5,403 Points

I am trying to insert the facebook page widget in my html page. it wont work :(

https://developers.facebook.com/docs/plugins/page-plugin

I am designing one of my first big projects in my computer rather than workspaces and for some reason the widget wont load on the website. i do exactly as the instruction say...

does my website have to be up in hosting service before the facebook widget works?

Sara Hardy
Sara Hardy
8,650 Points

If you could post your code, it would much easier to figure out why it's not working.

Omar Suriel
Omar Suriel
5,403 Points

<!DOCTYPE html> <head> <meta charset=UTF-8" /> <title>widget text</title> </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/en_US/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/1053thesurge" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/1053thesurge"><a href="https://www.facebook.com/1053thesurge">105.3 The Surge</a></blockquote></div></div>

</body> </html>

1 Answer

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points
Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hello Omar, how are you? I took a closer look at the problem and I think I found a solution to your problem.

As far as I could see, when comparing my version of the code and the one you provided, I saw that you were missing 2 important attributes and their values included in the div tag (the one with the class of "fb-page").

data-width="350" data-height="550"

The exact code should look like this:

              <div class="fb-page" data-href="https://www.facebook.com/1053thesurge" data-width="350" data-height="550" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/facebook">
                        <a href="https://www.facebook.com/facebook">Facebook</a>
                    </blockquote>
                </div>
            </div>

Noe that, it was just easier for me to work with the code indentation and line breaks, so I could trace the missing lines from the code, though the minified version of the code (without any spaces, line breaks, etc that the facebook provides you with) will work just fine and should be parsed by the web browser with no problems at all.

Hope that helps. Anyways, I just though I should perhaps include the working version of the code, if you don't feel rewriting the whole thing again:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> <!-- Title of the website you're working on --> </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-cale=1">
    </head>

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

            <div class="fb-page" data-href="https://www.facebook.com/1053thesurge" data-width="350" data-height="550" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/facebook">
                        <a href="https://www.facebook.com/facebook">Facebook</a>
                    </blockquote>
                </div>
            </div>
        </aside>

        <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/sr_RS/sdk.js#xfbml=1&version=v2.4";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    </body>
</html>

Cheers pal!