Embedding Facebook Reviews

Hi,

I want to discuss two issues regarding embedding facebook reviews on a site developed in Bubble.

1. Auto update of facebook reviews on my website
I was hoping, I would get a direct widget to put facebook reviews on my website. But I couldn’t get.

I got this: https://developers.facebook.com/docs/plugins/oembed

However, these APIs give you HTML for an individual post.

Then I got this: https://developers.facebook.com/docs/plugins/embedded-posts/

This also does the same thing, just manually.

So, basically what this probably means is that if I get a new review on facebook, I would have to add that post manually on my website each time. Is there a way to avoid that?

2. Manually embedded posts are not being responsive

Secondly, I used https://developers.facebook.com/docs/plugins/embedded-posts/ to generate the code and embed in my website. I created an html element and added the given code.

The post is rendering, but unfortunately it is not resizing on mobile even though the documentation says that it would. I saw somewhere on stackoverflow that I should set the data-width to “auto” for that to happen. However, that doesn’t work either. I am wondering if it is something specific to Bubble.

I have tried “show it as iframe” option too.

Anyone here can help with these two points?

Thanks,
Mukesh

The first potion should be solveable with an API…I don’t know how to do it, but I think you’d be searching for APIs and create one using the API connector.

The second could be ensuring your HTML element is not set to fixed width.

Thanks @boston85719 for the reply.

  1. The link that I gave earlier (oEmbed - Social Plugins - Documentation - Meta for Developers) is for APIs only. But from what I see there is API only for individual posts, and not for like “give me all the reviews for this page”. Or am I reading it wrong?

  2. HTML element is not set to fixed width.
    This is how it is set:

If you’d like to see how it is behaving right now, you can check: https://beegle.app/version-test/reviews-testimonials

Max width of 100% and min width of 85% is very close to fixed width…this means it will not expand and will only shrink to no less than 85%…so a 320px HTML element will never be wider than 320px and never be narrower than 272px.

Right. But I don’t really want it to go narrower than that. Issue is not that whether it is going narrow or not. Issue is that on mobile, when the parent element’s width is reducing, the facebook review widget is getting cut instead of resizing itself to fit content in new width. New width is being applied to the element, but the text in it is getting cut.

Here’s how it looks.
Screenshot 2020-12-31 at 11.10.57 PM

Might need to adjust the code then

Yes, I tried that, but couldn’t see much.

Here’s the code that I get.

<div class="fb-post" data-href="https://www.facebook.com/mira.roy00/posts/3544572758922075" data-width="350" data-show-text="true"><blockquote cite="https://www.facebook.com/mira.roy00/posts/3544572758922075" class="fb-xfbml-parse-ignore"><p>I was skeptical at first but this is such a great service. Binod was very good at his job.</p>Posted by <a href="#" role="button">Mira Roy</a> on&nbsp;<a href="https://www.facebook.com/mira.roy00/posts/3544572758922075">Friday, 11 December 2020</a></blockquote></div>

Like I said in my initial post, I tinkered with different values of “data-width”. I tried empty string, removing it, putting low value like 200, putting “auto” as its value etc.

Any other thoughts?