Forum Academy Marketplace Showcase Pricing Features

Dynamic Page Descriptions or Facebook Open Graph

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.

Hi @NigelG and @emmanuel
On

What should I use to get the current URL? I tried copying and pasting “This URL” and it leads to the Index apparently. In this example, one should know in advance the URL that Bubble will use to add it on the database? Is there an easier way?

Thanks!

any plan to make this easier? I understand what you, but maybe with the new database platform this wouldn’t be a problem anymore. I still couldn’t figure out how to make it work with meta tags as I don’t have how to get the current URL.

Why do you need the current page URL, it will be set to the current URL in the share anyway. You only really need to override the URL if you want to point it at the Index so you share the whole site, not the page.

Thanks @NigelG, I don’t think I need to overwrite, but using the URL parameter or not, it always show the meta image and description of my index. I’ll try to replicate it in a simple app.

1 Like

It shouldn’t work like that.

Be interesting to see if that has changed.

p.s. what are you using for the sharing mechanism ? Addtoany ? Because that still seems to work OK if you put the current page URL in the URL to share box.

1 Like

Mario,

were you able to resolve the problem? I have the same issue.
No matter what I put in the Header it always shares the meta description of my index. However, I am able to share the current pages image and URL but Description and title do not change.

Edit:
Ok, I tested it. The problem is gone when I delete the general SEO Facebook & Twitter Fields. I guess they should stay empty when you have dynamic pages which share individual texts etc

I had the same issue. My solution was to remove the general site description from settings (Facebook description), and just have individual descriptions for every page.

5 Likes

Yes, I just discovered this one minute ago!
Wow…I spent some hours on this and changed the OG: tags quit a lot… :smiley:
But I am happy it works now. And thank you for pointing this out I should have asked earlier :wink:

1 Like

Man, you really saved my day, I would never had thought about that! Now just the picture is not appearing for me. I’ll check my meta image code.

I just discovered the problem with the image: the image URL was not coming with http: and facebook could not figure out what to do with “//s3…”

I just added the http and it worked.

1 Like

Guys, the app example is no longer available. Do you have any link to share and see what you have done about it!?

Thanks in advance!

Regards
Pedro