Dynamic Page Descriptions or Facebook Open Graph

Does anyone know if there’s a way to make each page description in Bubble dynamic? Preferably, I could use Facebook Open Graph ( https://developers.facebook.com/docs/sharing/webmasters/ ) that would even be better…

Thanks in advance!

2 Likes

We don’t support this yet (as it requires some computation which is performance sensitive when we generate the page).

Ouch!

Anyone know of any hacks? Basically all I am trying to do is when a user shares a page using the share on Facebook etc for example, I’d like a photo show up as well as text description as it does when sharing a Bubble app in Live Mode. Looking for the same thing really… :grin:

This is a crucial thing for all of us building user generated content apps. Our users want to share there own content and images from our app. Not our standard stuff.

Anyone with a brilliant hack on this for now?

5 Likes

The way I have seen developers do this in the past is to create on the fly webpages with just the sharing content in the OG tags, that then 301 redirects to a page.

I have no idea how to do that in bubbleland !

Yes…and in our case the event the users want to share is na “event page” on our app in wich it´s possible to write in the header of that page.

However bubble only pull the meta object from the main settings. It would be great if we could write dynamic meta data on page level.

I´ve tried all kind of long shots to work around this with no success.
But I´de hope someone brighter than me would have a brilliant solution for this!

This feature has become vital for the development of our app.
Our users wants to share there own events on our app, with their FB-friends.

Anyone else interested in looking in to crowd funding this feature?

1 Like

@emmanuel, is it possible to implement inserting dynamic content on the “Edit Page” interface, in the Page’s “Description (for search engines)” field? I noticed that both in Page Title and in Page HTML Header that is possible, and this would be crucial for SEO purposes. This might be a bit of a spin off from the original topic, since this would have nothing to do with Facebook Open Graph, but I thought it was related, which is why I’m posting it here. Thanks in advance!

Why don’t you build the descriptions tag in the custom header section for now? We added this feature so that you can do this as well.

2 Likes

You’re absolutely right, I just didn’t think of that! I just checked, and if page description is empty, no “description” META tag is output, so this would work perfectly. Thanks! :slight_smile:

1 Like

I could be interested in this, as this is vital for my app as well.
Depends on the cost of it.

We support dynamic header at the page level (was built for that purpose), so you should be able to add them yourself.

1 Like

@emmanuel It appears that the “Insert Dynamic Data” in the “Page HTML Header” property is only showing the “Current User” object and the object set in the “Type of Content” property. It used to show the “Do a search for…” option, as well as the many other page properties, but I cannot see them anymore.

I am also trying to insert dynamic data to create the OG tags in the header.

Any help is appreciated.

Thanks

Yes, that was a bug :wink: because it’s server side it has to be that way for performance reason

So are you saying that I cannot insert dynamic data into the HTML header anymore, or is there a workaround?

Thanks.

You can, you can use the current page’s thing and the current user, which are dynamic and basically what you need. An event page (to be shared on facebook for instance) needs the current page’s event.

There’s no change with before. What you used to be able to select wasn’t working anyway.

2 Likes

When you say “Current Page’s Event”, i’m assuming we can use “When Page Is Loaded” event, then add the dynamic data into the current page’s thing.

I still do not see dynamic data when using the Current Page thing in the “Page HTML Header”. Is the event being triggered after the static HTML header is already generated? Is their an earlier page event that can be triggered? I think the static HTML (and thus the page header) has already been written.

Here is my sample app https://bubble.io/page?name=index&id=facebook-share-example&tab=tabs-1

This is what I did:

  1. “When On Page is Loaded” event is triggered
  2. Make a Change to current page thing (Since this is the starting page, there is no previous page to pass a page Thing)
  3. Set the values into the current page thing
  4. Add the Open Graph tags into the “Page HTML Header” with dynamic data coming from the Current Page Thing
<meta property="og:title" content=" DYNAMIC DATA FROM PAGE THING " />
<meta property="og:type" content="website" />
<meta property="og:url" content=" DYNAMIC DATA FROM PAGE THING " />
<meta property="og:image" content=" DYNAMIC DATA FROM PAGE THING " />
<meta property="og:description" content=" DYNAMIC DATA FROM PAGE THING " />

As a result, I would expect that when the page is loaded, the Page HTML Header has the dynamic data in it.

Any help/advice here would be greatly appreciated!

Cheers,
Bryan

You can set a page thing by redirecting a page to itself. Updating the “current page thing” as data isn’t what it means.

The page “thing” is a reference in the URL…

https://facebook-share-example.bubbleapps.io/version-test/index/1473165975818x677335249725729300

Here it is pointing to the :firstitem on your FB data.

I have updated, and from the Facebook Linter … seems to work.

1 Like

Thanks Nigel for the very helpful response.

Just so I am clear, Feeding this link to FB doesn’t achieve the desired result.

https://facebook-share-example.bubbleapps.io/version-test/index/sample:custom.fb_data

But ONLY a link with the page thing in the URL will work

https://facebook-share-example.bubbleapps.io/version-test/index/1473165975818x677335249725729300

Thanks,
Bryan

Well, it sort of works, in that there is no page thing so you get “lorem ipsum” in the meta data.

The 2nd link has a page thing, which means you get data.

The index page will redirect itself to add in the page thing.

So dynamic data is either on the page thing, or on the user. And if your page doesn’t have a thing … this is probably the way to do it other than just hard coding the data in the meta data.