stored procedures: facebook page plugin doesn't work after ajax page load

vendredi 17 avril 2015

facebook page plugin doesn't work after ajax page load

i'm with a problem to show a facebook page in my website. I'm using the new page plugin got in here.

The problem is, the plugin only show when i first load the page. If i go to another page and than return, the plugin will stop working. I'm using ajax to navigate on the website and to load new content on the pages.

I tried to put the javascript code from facebook on each page individually, but didn't worked. Also tried to make the plugin a function and call it on $(document).ready and also with the content.load(this.href,myFunction()); but didn't worked as well.

Doesn't matter, it will only show on the first load.

This is the code i'm using:

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="http://ift.tt/1aaXbCj" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://ift.tt/1aaXbCj"><a href="http://ift.tt/1aaXbCj">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="http://ift.tt/1aaXbCj" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://ift.tt/1aaXbCj"><a href="http://ift.tt/1aaXbCj">MyPage</a></blockquote></div></div>
    </div>
</div>

Jquery/Ajax to load content


$(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);

    });
});

Does anyone knows how to fix it? Thank you guys.

stored procedures