Streaming live at 10am (PST)

Webflow site pages in a Facebook Page Tab


#1

Is anyone else having difficulty using Webflow pages as content for Facebook Page tabs? I can “embed” pages from WordPress, Squarespace, and other hosting platforms in custom Facebook page tabs with no problem, just not pages hosted on Webflow sites.

There is nothing special about the pages I’m including in the tab, no page from any of my Webflow hosted sites work.

In the tab on the Facebook page, I get the error message:

Error 503 backend read error
backend read error

Guru Mediation:
Details: cache-iad2131-IAD 1518204164 1709477613

Varnish cache server


#2

How are you doing this? Are you following some tutorial?


#3

created a facbook app with an associated page tab:

The page referenced in the page tab looks like this when view on the live site (not a Webflow site - an Adobe Business Catalyst hosted site):

…and injected into the Facebook page under the page tab created by the app. Note the page renders responsively within the Facebook page for the selected tab:

Creating content on a Facebook page associated with a page tab works for sites hosted on Wordpress, SquareSpace, GoDaddy, Adobe, etc. I can inject or embed any valid HTTPS url into a page tab of a Facebook page. Very helpful for sign-ups, listings, anything a client want to feature on a Facebook page. This approach doesn’t work for any pages on Webflow sites, I’ve tested on multiple Webflow sites, same error message. Facebook is no help, they say it is a Webflow CDN caching issue…

Now with a Webflow hosted site. Here is a similar Facebook app with a page tab, note the reference to a valid Webflow site page:

…and the resulting error on the Facebook page when the page tab is activated:


#4

Hi there! I’m on the Webflow Infrastructure team and I’m going to open a ticket with our CDN provider. Can you give me a little more information to help?

Can you give me the full URL of the site that you’ve put in the “Secure Page Tab URL” field?

Thanks!

Chris Snell
Webflow


#5

Chris,

Thanks for working on this issue. https://www.mandyandally.com/411 is the url placed in the “Secure Page Tab URL” field of the Facebook app. Let me know if you need anything else, and thanks again for your efforts!


#6

Hi @bmg,

Fastly got back to me and they’re asking for a publicly-accessible URL where they can observe the error. Can you provide me with a link to a Facebook page that causes the 503 error to happen?

Thanks!

Chris


#7

Chris, I’ve published a test Facebook page here: https://www.facebook.com/MA-Test-Page-348085149003568/app/405796053176163/

The team at Fastly will need to click on the “see more” link to open all the page tabs.

Once they have expanded the tabs, they should select the 411 from M+A tab. This tab should be fed by the valid URL on a webflow site which is: https://www.mandyandally.com/411


#8

Thanks for writing this up, Brian. I’ve forwarded your instructions to Fastly. I’ll update the thread when I hear back from them.

Chris


#9

Hi Brian, I believe I’ve identified the problem. I’m working on a fix for you. I’ll let you know just as soon as it’s done. Thanks for your patience.

Chris


#10

Hi Brian,

I have some bad news. We’re not going to be able to support this. The reason we can’t has to do with the way that Facebook implemented this feature. The tab functionality is intended to be used to embed a Facebook app that’s hosted on a third-party site, and doesn’t support the embedding of a standard web page.

If you’re interested, here’s a more technical explanation. When you add a third-party page as a tab and a user clicks on that tab, that user’s browser sends a HTTP POST request to the third-party page with some stateful data that’s meant to be consumed by a Facebook app that you write. A static website is typically fetched with HTTP GET requests, not POSTs, and nearly every web server is going to return a 405 Method Not Allowed when a POST is made to a static object (i.e., your page). That’s what we’re seeing here.

It would take a really hacky hack to make this work at all and that’s just not something we can support. If you are capable with webservers and desperate to make this work, you could set up a bespoke webserver to proxy your site and return a 200 Ok response to the POST request and deliver the content. That’s an ugly hack though, and totally not compliant with web standards.

Sorry. I tried… :frowning:
Chris
Webflow Infrastructure Team


#11

Or you could also use a third-party service like http://woobox.com/customtab


#12

Chris,

Thanks so much for your assistance and I very much appreciate your efforts.

I have to disagree that Facebook doesn’t support the embedding of a standard web page. I can show you many examples of standard web pages, pages hosted on GoDaddy (WordPress and base HTML), Adobe Business Catalyst, SquareSpace, and Wix as examples. See this “how to” page from SqureSpace: https://support.squarespace.com/hc/en-us/articles/206543737-Adding-Squarespace-tabs-to-Facebook. Click on the “Brokerage Listings” tab on this Facebook page: https://www.facebook.com/harbortowne.marine/. I can send you other examples if that would be helpful.

We have clients on all of these platforms, and all have Facebook pages tabs “powered” by standard web pages. There is something unique about how Webflow is implementing this with your CDN, and unfortunately, this is a deal killer for several of my new Webflow clients. What is even more surprising to me is that other Webflow customers haven’t raised the same issue as Facebook page tabs are often key marketing tools for our small and mid-sized business clients.

Thanks again for your efforts on my behalf, I wish the results would have been different as my clients simply love the ease of use presented by the Webflow editor. For those who demand Facebook page tab functionality, we’ll have to move those clients back to Adobe or SquareSpace.


#13

Hi Brian,

I can’t speak from the others but by the looks of the Squarespace page, it looks like you have to explicitly choose “Facebook Page” in their settings. This tells me that they’re probably running a special server/proxy configuration (like WooBox, etc. are doing) that will serve the page up when POST request is received for these pages marked as being for Facebook tabs. What they’re doing, basically, is making a static page act like a web app by responding to the POST request with the static content.

We don’t have this feature currently but I will add it as a feature request for you so that our product management team is aware of the need.

I’m sorry that I don’t have a better answer for you. :worried:

Chris


#14

@bmg I just added this feature request to our Wishlist so that you can vote for and track the feature request progress here: https://wishlist.webflow.com/ideas/WEBFLOW-I-1142 :bowing_man:


#15

Thank you Waldo and Chris for all your efforts! Very much appreciate you guys going the extra mile, says so much about you individually and the company culture at Webflow as a whole.


#16

Waldo,

With the announcement for Webflow ecommerce, I would hope that you guys take another look at the Facebook page tab integration issue.

15 of 18 of my ecommerce customers (currently Shopify or BigCommerce powered) have Facebook shops, and all 15 are in various stages of implementing shopping on Instagram. Shopping on Instagram, at least for my clients, looks extremely promising driving not only increases in sales but big increases in Instagram followers.

Facebook “shops” are enabled via page tabs, and you must have a Facebook shop in order to qualify for Instagram Shopping - no Facebook “shop” means no Instagram shopping. Both Shopify and BigCommerce power Facebook “shops” via page tabs.

My fear is that the same limitation that prevents Webflow pages from rendering in a Facebook page tab will also prevent your future ecommerce sites and pages from being usable in Facebook shops and thus also unusable for Instagram shopping.

Thanks,
Brian


#17

This topic was automatically closed after 60 days. New replies are no longer allowed.