I am developing an App that categorizes and displays Facebook (FB) videos. FB requires the placement of its javascript SDK prior to the code for the video. The pre-display code, which I have placed, in separate tests, as either a static text field or in the source code for the page on which the App resides with identical results, is:
<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_US/sdk.js#xfbml=1&version=v2.3&appId=899807173363736";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
An example of the code for the embedded video which is generated dynamically from the database field which holds the video URL is (note I have tried this with a static video embed code with the same issue) :
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153415714906729/" data-width="500"></div>
The issue is that the embedded FB video embeds properly for the rows of data on the first page of the list but upon loading more rows of data, the new rows do not show the video while the existing rows continue to work properly. I have tried the different pagination techniques ("auto fetch" and "fetch more" button).
It appears that when a new "page" of data from the list is loaded, the FB Javascript code is not recognized.
Lastly, I note that I have tried the same thing with YouTube embeded video, which does not require any pre-loaded Javascript, and it works just fine.
I assume this has something to do with how the list loads. Is there a way to force the Javascript to load each time a page is fetched or any other solution? Thoughts on this interesting problem would be greatly appreciated.
<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_US/sdk.js#xfbml=1&version=v2.3&appId=899807173363736";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
An example of the code for the embedded video which is generated dynamically from the database field which holds the video URL is (note I have tried this with a static video embed code with the same issue) :
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153415714906729/" data-width="500"></div>
The issue is that the embedded FB video embeds properly for the rows of data on the first page of the list but upon loading more rows of data, the new rows do not show the video while the existing rows continue to work properly. I have tried the different pagination techniques ("auto fetch" and "fetch more" button).
It appears that when a new "page" of data from the list is loaded, the FB Javascript code is not recognized.
Lastly, I note that I have tried the same thing with YouTube embeded video, which does not require any pre-loaded Javascript, and it works just fine.
I assume this has something to do with how the list loads. Is there a way to force the Javascript to load each time a page is fetched or any other solution? Thoughts on this interesting problem would be greatly appreciated.
Comment