[Resolved] Embedding facebook image posts

[Tim]

Using the Embed Post button, I got the code to an image post I want to embed on my site. However, when I put the code on a page, only the text shows up, not the image. Is there a global setting that is preventing this in the theme?

[Tim]

Links to the broken images. These are the code and the outcome on the site.

http://postimg.org/image/bq7krh6zh/
http://postimg.org/image/48tryis2l/

[Tom]

Hmm, nothing in the theme preventing this, but the WP editor may be stripping something important.

Can you link me to the page where the image isn’t showing up?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tim]

It’s on a test page off the main menu: http://www.14gwu.org/test-facebook-images/

Here’s a link to the Facebook post: https://www.facebook.com/14GWU/photos/a.379944355413962.86790.165422513532815/928433827231676/?type=3

[Tom]

What if you add this code to the wp_footer hook in GP Hooks?

<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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Then add this part to your post:

<div class="fb-post" data-href="YOUR_URL_HERE"></div>

Sometimes the WP editor strips out <script> tags.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Stefan]

Hi Tom,

Having issues with this same problem, Ive copied, then edited the html (below) from the facebook developer page to footer widget 5 , which is where i want the feed to be.

<div class="fb-page"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>

Then copied the JS SDK script into wp_footer as you have sugested . Its not presenting anything so a little confused, can you help please?

Cheers

[Tom]

Hi there,

Did you add that code into a HTML widget?

Any console errors if you right click + inspect the page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Stefan]

Hi Tom,

Yes i added the custom HTML code to footer widget 5 (can it go there?). I cannot see any errors but nothing comes up unless it is either hidden or.

No console errors.

Where am i going wrong?

[Tom]

Can you link me to your site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Stefan]

Sure,

https://www.dimensionsdetailing.co.uk/

[Tom]

Hmm, nothing is standing out to me really.

What’s the script you pasted into wp_footer?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Stefan]

Hi Tom,

Ive pulled the script from https://developers.facebook.com/docs/plugins/page-plugin/

<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 = ‘https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.0&#8217;;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Would this be correct?

Thanks

[David]

Hi Stefan, i can’t see any issue with the code but there is definitely no HTML in that widget.
Can you test the HTML code somewhere else on the page? Try adding it via an Elementor HTML Widget in the page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefan]

Hi David/Tom

Ive nailed the issue, seems that it could be something wrong with the Facebook page. Ive put in some other random Facebook companies and it works fine in the footer widgets, also using the elementor html widget. So its a specific issue to the one i want to use.

Frustrating.. very sorry!

Cheers
Stefan

[David]

Hi Stefan, glad you found out what the problem is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts