CODEWITHSUNDEEP
facebook-like
awj
awj

Reputation: 7959

Facebook Like button not displaying

I'm trying to add a Facebook Like button to a site but it never shows up.

Here's the relevant detail from my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://www.facebook.com/2008/fbml" 
    xmlns:og="http://opengraphprotocol.org/schema/" dir="ltr" lang="en" xml:lang="en">

<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta property="og:title" content="[____].com" />
    <meta property="og:type" content="blog" />
    <meta property="og:url" content="http://www.[____].com/" />
    <meta property="og:image" content="http://[____].gif" />
    <meta property="og:site_name" content="[____].com" />
    <meta property="fb:app_id" content="[____]" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=News+Cycle" />
    <link rel="Stylesheet" type="text/css" href="../../Content/css/[____].min.css" media="screen, projection" />
</head>

<body>

    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                    appId: '[____]',
                    status: true,
                    cookie: true,
                    xfbml: true
                });
                FB.XFBML.parse(); **- 1**
        };
        FB.XFBML.parse(); **- 2**
        (function () {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        } ());
    </script>

    Like button goes here:<fb:like></fb:like>

    ...

</body>

</html>

The problem is quite simply that while the script does load, the Like button never appears. I've also run it through the Facebook Linter which doesn't highlight any problems.

Any ideas?

Upvotes: 0

Views: 1838

Answers (3)

awj
awj

Reputation: 7959

Well this is embarrassing. I eventually realised that one of my Firefox add-ons, Ghostery, was blocking the Like button.

So the code I originally posted does work.

Upvotes: 7

SeanCannon
SeanCannon

Reputation: 78006

Have you tried a synchronous reference to see if it works?

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script> 
<div id="fb-root"></div>

Upvotes: 0

Paul
Paul

Reputation: 141907

You need to make a call to FB.XHTML.parse(); after the FB object is initialized.

Upvotes: 0

Related Questions