Facebook Feed display issue

[Linda_Lee]

I have added the Facebook Feed widget as a page on my website…the only problem is I can’t use my website header on that page because it covers the top of Facebook newsfeed page. I’ve tried everything but there is no adjusting the height of the page to move down so I can add my header to the page. All my pages should have a header menu for easy navigation, all of them are okay except the Facebook Feed page.
It would be great if I could add it without it hiding the top of the newsfeed.
Thanks!

[Max]

Hi there, @Linda_Lee

Could you please send me a link to the page, where your widget is installed?

[Linda_Lee]

Good morning,
Thank you for responding to my display issue. Here is the link to the page I can’t seem to add the header to without overlapping the content of the page.

Squarespace — Login you for your help!
Linda

[Max]

It seems that your page isn’t published yet. Could you please share access to this page? This article explains how you can do this - Providing access to your Squarespace website - Elfsight Help Center

[Linda_Lee]

Hello,
I have granted you access to access the page! Thank you so much!
I’ve tried everything.
Sincerely,
Linda

[Max]

Accepted, thanks!

Do I get it right that the widget should be placed here?

[Linda_Lee]

UPDATE–I just added a header picture to the widget and now my website header doesn’t cover too much of the widget header…but, I just noticed that on mobile view it’s covered. I did’t have a problem with the “All In One Reviews” widget. Also…how do I change the “Load More” to a different color, it’s gray and doesn’t really stand out?

[Max]

Hi there, @Linda_Lee

We’ve fixed the issue with the header on mobile by adding this code to the Custom JS field on the More tab of your widget’s settings:

const header = document.querySelector('#header');
const widgetBlock = document.querySelector(
  '.elfsight-app-b8d133e8-f490-427d-813a-f99d4f0163a5'
);

function isOverlapping(elem1, elem2) {
  if (!elem1 || !elem2) return false;

  const rect1 = elem1.getBoundingClientRect();
  const rect2 = elem2.getBoundingClientRect();

  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  );
}

if (!isOverlapping(header, widgetBlock)) {
  return;
}

function handleUpdateSpacing(height) {
  widgetBlock.style.marginTop = `${height}px`;
}

handleUpdateSpacing(header.offsetHeight);
const resizeObserver = new ResizeObserver(([{ contentRect }]) => {
  handleUpdateSpacing(contentRect.height);
});

resizeObserver.observe(header);

To change the color of the Load More button, please use this code in the Custom CSS field on the More tab:

Check it out and let me know if it helped

.eapps-facebook-feed-posts-load-more{
background-color: black;
}

[Linda_Lee]

Awesome!! Thank You! I changed the color of the load more to blue to match the other pages of my site, is the color of the text changeable from light gray to white. Also, is there a way to fix the page from scrolling underneath the header as the “All In One Reviews” widget page is. Again thank you for the fix!

[Max]

Hi there, @Linda_Lee!

This code will help you change the color of the Load More text:

.eapps-facebook-feed-load-more-label {
color:white;
}

As for “fix the page from scrolling underneath the header”, do you want to remove this scroll bar?

If I misunderstood you, please describe your idea in more detail

[Linda_Lee]

Yes that is exactly what I mean, removing that scroll bar (the All-In-One Reviews Widget doesn’t have that). I would rather add a feature to the entire website showing a “back to top” feature. Thank you for the CSS code for the change in text color on the “load more” feature!

[Max]

Got it!

I’ve set the height to Auto in the Layout settings and this scroll has been removed

[Linda_Lee]

I just noticed it has been fixed! Thank you so much!

[Max]

No sweat!

If anything else comes up, we’ll be delighted to assist

[Linda_Lee]

I have published our website and widgets are great…although I noticed the “All in one Reviews” widget is now overlapping underneath the site header…you were able to correct this issue with the “Newsfeed” issue I had before…can you fix this on the “All in one Reviews” widget…you can’t see the header of the widget? Thanks!!

[Max]

Hi @Linda_Lee

Everything seems to be looking fine on my end:

Could you please check it in incognito mode? If you still see the issue, please send me a screenshot of how it looks on your end

[Linda_Lee]

I actually have “What our customers say..” above the Overall Rating which was hidden under the website header…
And on mobile view it looks like this…

[Max]

Thank you!

We’ve fixed the issue with this script in the Custom JS field on the Settings tab of your widget’s settings:

const header = document.querySelector("header[id='header']");
const widgetBlock = document.querySelector(
  ".elfsight-app-f97eb6e3-5a49-4e11-9933-58cea9d33b78",
);

function handleUpdateSpacing(spacing) {
  widgetBlock.style.marginTop = `${spacing}px`;
}

if (!header || !widgetBlock) {
  return;
}

handleUpdateSpacing(header.clientHeight);
const resizeObserver = new ResizeObserver(([{ contentRect }]) => {
  handleUpdateSpacing(contentRect.height);
});
resizeObserver.observe(header);

Please your website and let me know if it’s fine now

[Linda_Lee]

Yes it looks great! Thank you so much for fixing! Have a great day!

[Max]

You’re always welcome!

Have a great day