我在我的网站上想展示一个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 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);
});
});
有人知道如何修复它吗?谢谢大家。