ajax頁面加載后，facebook頁面插件無效

Question

我有一個問題，在我的網站上顯示一個Facebook頁面。 我正在使用這里的新頁面插件。

問題是，插件僅在我第一次加載頁面時顯示。 如果我轉到另一個頁面而不是返回，插件將停止工作。 我正在使用ajax在網站上導航並在頁面上加載新內容。

我試圖將facebook上的javascript代碼分別放在每個頁面上，但是沒有用。 還試圖使插件成為一個函數並在$(document).ready上調用它，並且還使用content.load(this.href,myFunction()); 但沒有奏效。

無所謂，它只會在第一次加載時顯示。

這是我正在使用的代碼：

的index.php

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

[...rest of code...]
<div id="site"></div>
</body>

home.php

<div class="col-md-6">
    <div class="fb_social">
        <div class="fb-page" data-width="500" data-href="https://www.facebook.com/mypage" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage"><a href="https://www.facebook.com/mypage">MyPage</a></blockquote></div></div>
    </div>
</div>

contact.php

<div class="col-lg-12">
    <div class="fb_social">
        <div class="fb-page" data-width="500" data-href="https://www.facebook.com/mypage" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage"><a href="https://www.facebook.com/mypage">MyPage</a></blockquote></div></div>
    </div>
</div>

Jquery / Ajax加載內容

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a"),
        firstLoad = firstLink.attr("href"),
        navLink = $(".navbar li a");

    //default load
    content.load(firstLoad);    

    navLink.on("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();

        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(this.href);

    });
});

有誰知道如何解決它？ 感謝大伙們。

Answer 1

在加載內容以解析社交插件后，您需要立即使用FB.XFBML.parse ：

content.load(this.href, function () {
    FB.XFBML.parse();
});

ajax頁面加載后，facebook頁面插件無效

問題描述

的index.php

home.php

contact.php

Jquery / Ajax加載內容

1 個解決方案

解決方案1
8 已采納 2015-04-17 19:01:20

ajax頁面加載后，facebook頁面插件無效

問題描述

的index.php

home.php

contact.php

Jquery / Ajax加載內容

1 個解決方案

解決方案1 8 已采納 2015-04-17 19:01:20

解決方案1
8 已采納 2015-04-17 19:01:20