Facebook Page Plugin

Site URL: https://developers.facebook.com/docs/plugins/page-plugin

Hello,

Does anyone have experience adding the Facebook Page Plugins to their Squarespace site?

I have tried following every tutorial online to no avail, it always ends up in a random string of code, or just the title of my Facebook page in black letters instead of the embedded object. Neither the iFrame or the Javascript option have brought about any results. I have the Apps installed in the developer tools for Facebook.

Thanks for your help

J

Can you clarify this question: "adding the Facebook Page Plugins"?

Get iframe embed code > Add Code Block > paste code (remember DO NOT CHECK DISPLAY SOURCE)

Hi Tuanphan,

Thanks for your reply.

I would like to embed the facebook page feed to my Squarespace site, and I followed the instructions that you said there and it doesn't work.

It is just a blank block, nothing, that shows up...

On 3/21/2020 at 2:18 AM, jayh said:

Hi Tuanphan,

Thanks for your reply.

I would like to embed the facebook page feed to my Squarespace site, and I followed the instructions that you said there and it doesn't work.

It is just a blank block, nothing, that shows up...

 

Can you share link to the page where you inserted FB code?

Hi there tuanphan,

I am having the same issue.  I retrieved the code from the Facebook developer site, applied it to the code block, and have a blank box. Not sure how to proceed. 

Any help is appreciated

I also have a similar problem. If anyone has a recommendation it would be very welcome right now as scouring Facebook Developers support doesn't surface anything and Squarespace can't support it either. https://www.stroudvalleysproject.org/svp-eco-shop (bottom of the page)

5 hours ago, SamM33 said:

If anyone has a recommendation it would be very welcome

Can you provide more details of what you've tried so far? Screenshots often help. For example:

1. Where should the Facebook feed appear (which page and position)? 
2. Which Squarespace Block have you used and what are the settings? 
3. Please share the code that you added.
4. What symptoms you are seeing?

Thanks @paul2009 I'd like to embed the Facebook page plugin with timeline tab at the bottom of this page: https://www.stroudvalleysproject.org/svp-eco-shop. Presently I've generated the code from developers.facebook.com and have added it as follows:

Within settings > advanced > code injection > footer:
<!-- for FB feed -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0" nonce="AcU7VpiV"></script>

Within an embed block on the page:
<div class="fb-page" data-href="https://www.facebook.com/stroudvalleysprojectecoshop" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/stroudvalleysprojectecoshop" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/stroudvalleysprojectecoshop">Stroud Valleys Project eco shop</a></blockquote></div>

Oddly, my browser will let me see what I want when I'm signed in to Squarespace (previously it wouldn't even render in Squarespace), but when I launch an incognito window or alternative browser I get the following...

Incognito window:

Safari browser (loads the header but no timeline posts):

18 hours ago, SamM33 said:

I'd like to embed the Facebook page plugin with timeline tab at the bottom of this page

The first section of code (the JavaScript SDK) should be in site's header (not footer) or, if you only want the Facebook feed to appear on this page, add it to the injection header of that page instead. You'll find this in the Advanced Settings of the page.

The second section of code (the HTML) should be added to a Code Block wherever you want this to appear. 

Give this a try and let me know how you get on.

Hello @paul2009, I moved the first part of the code to 'Header' injection, and added the second part on the page in a 'code' block. I've also cleared the cache on both my browsers (chrome and safari). It seems to work on chrome in the live site. On safari however I don't get the posts from the timeline, but I do get the header. I'll ask the clients to check it in a few browsers as this feels like a step forward! Thanks, Sam

@SamM33 Have you solved this yet?

Hello @tuanphan - i've got it working properly in some browsers but not others, using the instructions given by @paul2009 above... I hope this helps others too as it seems to be a common problem...

I was able to embed an FB page. I don't know if you created a Meta developer account https://developers.facebook.com/ but I think that's the first step because it includes  "app id" info that goes into the code you put in Squarespace. I also added some code into my "site.region" file (Squarespace Developer mode) I think I saw you can add. I think there is a browser compatibility issue because on Chrome it doesn't load the feed correctly for me.