plugin Facebook Embeds

codejet

got this working as well...

takes a link https://www.facebook.com/wbgerona/posts/10203505782789554 (click on the time of post to get link )

embeds the post, noticed it also needs a page reload every time to view the embed. Is there a better way to do this than reloading the entire page with javascript? perhps reload just the div id="" or something

Aza Noriega

@Codejet said:

noticed it also needs a page reload every time to view the embed

Explain please what do you mean?

If you mean the magic with embedded elements doesn't happens within posts, which are newly loaded by infinite scrolling, take a look at https://github.com/NodeBB/NodeBB/pull/2682

codejet

@Mega If i want the newly embeded link to show up I can't simply just embed it in the post. Although the embed should work it shows nothing (Twitter one works well, but Instagram and Facebook need a page reload every time just to display something) If you go back and then revist the link , nothing appears, but you can reload again and it appears. (if you get me)

The page will need a reload every time, thus I have added to the start of the embed code some javascript to reload the page every time the embed page is opened.

embed = '<script><!-- $(document).ready(function(){if(document.URL.indexOf("#")==-1){url=document.URL+"#";location="#";location.reload(true);}});//--></script><div class="fb-post" data-href="https://www.facebook.com/$1/posts/$2" data-width="500"></div>';

Code that will reload the embed everytime the page is loaded:

<script><!-- $(document).ready(function(){if(document.URL.indexOf("#")==-1){url=document.URL+"#";location="#";location.reload(true);}});//--></script>

Div facebook post will embed/show in:

<div class="fb-post" data-href="https://www.facebook.com/$1/posts/$2" data-width="500"></div>';

There's also some code I put in after the <body> in the header.tpl of lavender theme
<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.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

If there is a better way to do this please advise

Aza Noriega

@Codejet said:

The page will need a reload every time

I guess it's because of window.fbAsyncInit.hasRun=true. Apparently you need to rerun FB SDK init methods each time action:ajaxify.end and action:posts.loaded fired. Although it doesn't seems like the best way.

codejet

@Mega I've just used facebook's own way of doing it, but it meant adding some custom code in the admin panel 'custom header' and editing the header.tpl of the theme.

Just again, doesn't update the front page categories well, I've got new posts switch off on these categories anyway (set to 0).

I've played around a bit with the css as well, seems the post embed data doesn't load at all on the front page.

They don't make it easy....

Aza Noriega

I'm sorry @Codejet I completely don't understand you