Plugin on Facebook page on dynamic page
How can I reload a facebook page element in a single page app? https://developers.facebook.com/docs/plugins/page-plugin
If I remove the facebook inline div from the DOM and add that div again, the facebook plugin doesn't automatically regenerate. I guess I need to do some extra javascript work for the plugin to update.
I'm using the code that loads the facebook plugin.
<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_GB/sdk.js#xfbml=1&version=v2.4&appId=xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then on the home dynamic tab, I use the code to embed the facebook page in a single page app:
<div class="fb-page" data-href="https://www.facebook.com/facebook" 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>
It loads fine the first time I see the embedded facebook page. But if I change the tab and go back home again, the facebook code fails and I don't see the facebook page anymore.
At this point, can I manually reload the embedded Facebook page?
source to share
Call
FB.XFBML.parse();
after uploading new content to update the Facebook SDK.
<div class="fb-page" data-href="https://www.facebook.com/facebook" 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>
On the page. If you only need to reload Facebook plugins on a specific DOM element, pass it as an argument to this function:
FB.XFBML.parse( document.getElementByID('certain-plugins-holder') );
Full link: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
source to share
What I did was move
<div class="fb-page" data-href="https://www.facebook.com/facebook" 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>
To the hidden div at the end of the document. As soon as facebook loads it, I use javascript to clone the element to where I need it. This example uses jQuery. Anywhere where I need a plugin to display I have placed
<div id="facebook-timeline"></div>
Then in javascript that dynamically loads the page or section, I run the script below
$('.fb-page').clone(true).replaceAll('#facebook-timeline');
source to share