Bluesky Embeds - Calgarypuck Forums - The Unofficial Calgary Flames Fan Community

PsYcNeT · 11-15-2024, 04:38 PM

Now that we're seeing the site finally picking up and becoming a bit of a news source, any chance we can get an embed tag for it?

Or is this something vBulletin would have to add first?

Supposedly the embed code looks like this:

Code:

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:3xnrlwp67442gjlndrbxcprv/app.bsky.feed.post/3lax6gpkye22p" data-bluesky-cid="bafyreie5ogbltpdborg3asaxhwv3rkaxskmesf3dbee4wt75hqhzutb74e"><p lang="en">im tweeting on this site</p>&mdash; aLec robBins (<a href="https://bsky.app/profile/did:plc:3xnrlwp67442gjlndrbxcprv?ref_src=embed">@alecrobbins.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:3xnrlwp67442gjlndrbxcprv/post/3lax6gpkye22p?ref_src=embed">November 14, 2024 at 6:00 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

photon · 11-15-2024, 06:42 PM

Yeah was talking with Cheese about this too.

With the YouTube and Twitter embeds it's a simple pattern of putting in the video identifier in a standard set of HTML (for YouTube) or the tweet identifier in a specific place and some Twitter provided Javascript automagically replaces that with the full HTML to display the content.

The embed example you posted has the content already in that info which is the content I need to get since I don't already have.

Plus a Bluesky link actually has the user profile in the URL too (i.e. https://bsky.app/profile/seanmcarrol.../3layjfivwxs2n) so I need TWO pieces of information to identify a post, the unique identifier and the profile of who posted it.

But that's not the real problem, I can make the code require the whole URL instead of the ID like the youtube or twitter codes.

Looking at their documentation there is a way to get the HTML needed to show a post: https://docs.bsky.app/docs/advanced-guides/oembed

Unfortunately that doesn't really work easily in the same way the YouTube or Twitter where I can just say "when someone uses this BBCode just replace that with this HTML template".

With the oembed what it looks like I'd need to do is the forum would have to reach out to the bluesky oembed API and get the full data for a given post, extract the HTML from that response, then put that HTML on the page before it gets sent to the user.

This is problematic for a number of reasons. Not the last of which is that it requires server side processing of ALL Bluesky links to get the HTML, on every single pageview, for every single embeded Bluesky post. Plus I'd probably get banned from the API if I did that, it's probably expected of me to cache the HTML responses for a given amount of time.

The YouTube and Twitter embeds don't have to do that because for YouTube the embed HTML is the same every single time, only the identifier changes. For Twitter the reaching out to the Twitter API to get the HTML happens after the page is sent from our server to the user's browser by Javascript that runs in the user's browser.

It's not impossible, but it's also not trivial to add unfortunately from what I can see.

I see a few different ways forward.

1) Write an extension to the forum software that gets the HTML for Bluesky posts and stores them in a database. High complexity, lots of effort.

2) Write some Javascript that would recognize a specific HTML output in the forum pages and reach out to the oEmbed API, get the HTML, and replace it on the page in the same fashion as the Twitter API. More straight forward, but I don't know Javascript and not sure how easy/hard this would be to make that's well supported by all browsers.

3) Kind of taking a different angle on it is something I thought about when doing the Twitter one too.. have a service that accepts the URL to a Bluesky post and returns an IMAGE of that post. That way embedding is simple and is not dependent on the browser OR the forum software. This is probably even more complicated (you have to render the website in code on a server, create an image, create a cache so you don't re-render the same ones over and over, etc) but it's something I understand better.

The thing is there might already be some variation of 2 or 3 already out there but I haven't been able to find it.

Or there might not be since discussion forums like this are a dying breed.

photon · 11-15-2024, 06:57 PM

I typed all that out and then I was looking at the HTML the oEmbed returns...

Code:

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:7odhgjrqjyqrjqvzxxmqzlz6/app.bsky.feed.post/3layjfivwxs2n" data-bluesky-cid="bafyreiakoqpncjodpxgsqhm6oardao3ybziagsvuppo2jcqybkgn7haxsa"><p lang="en">I suspect partisan split on trust in science is a matter of positive feedback. One side doesn\u0026#39;t like what science is saying (climate, vaccines), so they attack it. Scientists argue back. Partisans react defensively, giving their side more reason to attack science. Repeat.\nwww.vox.com/future-perfe...</p>\u0026mdash; <a href="https://bsky.app/profile/did:plc:7odhgjrqjyqrjqvzxxmqzlz6?ref_src=embed">Sean Carroll (@seanmcarroll.bsky.social)</a> <a href="https://bsky.app/profile/did:plc:7odhgjrqjyqrjqvzxxmqzlz6/post/3layjfivwxs2n?ref_src=embed">2024-11-15T13:49:45.092Z</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

It appears that it kind of does work the same way as Twitter.. there's a blockquote of a given class and then a reference to some Javascript which appears to replace the blockquote with the desired HTML of the actual post. The portion of the post with the preview of the text is just that; preview text. Not necessary.

So in theory I could make a BBCode that includes the blockquote and include the Javascript on every page like I do with Twitter.

The only problem I see is these values in the blockquote:

Code:

data-bluesky-uri="at://did:plc:7odhgjrqjyqrjqvzxxmqzlz6/app.bsky.feed.post/3layjfivwxs2n" 
data-bluesky-cid="bafyreiakoqpncjodpxgsqhm6oardao3ybziagsvuppo2jcqybkgn7haxsa"

In the first one data-bluesky-uri the value 3layjfivwxs2n is the unique identifier of the post, but

Code:

did:plc:7odhgjrqjyqrjqvzxxmqzlz6

is some unique identifier of the user's profile, which is information the person posting the Bluesky link would not have.

The second one data-bluesky-cid is worse, I don't know what it is, all I know is if I request a different post I get a different number.

So I don't really see a way around that; every blockquote will probably need those magic numbers in place to properly find and display the post in question.

Which still makes option 2 and 3 the only things I can think of.

Maybe web savvy devs have a different idea?

Cheese · 12-05-2024, 12:58 PM

Any Devs here that can help?

photon · 12-06-2024, 10:16 AM

I was thinking about option 3 and it wouldn't work for videos, only for static posts.

I also was looking at the newest version of vBulletin just to see if an upgrade would give that to us for free, and doesn't look like even the newest version has it, the person who looked at it said basically what I did about the dynamic info coming from Bluesky.

KelVarnsen · 12-10-2024, 02:08 PM

How does the Twitter embed work?

photon · 12-10-2024, 04:48 PM

Twitter provides a Javascript script that does it. So the forum server sends the web page code to your browser that includes what amounts to "INCLUDE TWEET NUMBER 12345 HERE!!!" code as part of the page code. Then the Javascript code runs, gets the proper code from Twitter for the desired tweet and replaces the "INCLUDE" code with actual code that displays the tweet.

KelVarnsen · 12-13-2024, 02:32 PM

Does it use oembed to create the iframe?

photon · 12-13-2024, 03:27 PM

It does, which is why it'd need to be Javascript as the HTML including the iframe returned by the oembed API is in json. The Javascript probably isn't that complicated to make the API call, extract the HTML and update the page but to do it well (so it doesn't block the page, works with lots of embeds, etc) isn't something I know how to do.

I did find this: https://embed.ly/

I'll probably play around with that a bit to see how it is but I suspect that the # of page views we get is way above their cheap tier.

KelVarnsen · 12-16-2024, 08:47 PM

Using the https://docs.bsky.app/docs/advanced-guides/oembed link you provided for this post https://bsky.app/profile/aoc.bsky.so.../3ldhirk3zcc2c

I send this as my request

PHP Code:


			
https://embed.bsky.app/oembed?url=https://bsky.app/profile/aoc.bsky.social/post/3ldhirk3zcc2c

Which gave me

PHP Code:


			
<iframe data-bluesky-id="38770813747062216" src="https://embed.bsky.app/embed/did:plc:p7gxyfr5vii5ntpwo7f6dhe2/app.bsky.feed.post/3ldhirk3zcc2c?id=38770813747062216&amp;ref_url=https%253A%252F%252Ftol.ybddev.ca%252F404" width="100%" frameborder="0" scrolling="no" style="border: none; display: block; flex-grow: 1; height: 174.5px;"></iframe>

photon · 12-17-2024, 12:23 PM

How did you send the request? If I use that embed.bsky.app/oembed link with a an HTTP GET I get JSON in response:

Code:

{
  "type": "rich",
  "version": "1.0",
  "author_name": "Alexandria Ocasio-Cortez (@aoc.bsky.social)",
  "author_url": "https://bsky.app/profile/aoc.bsky.social",
  "provider_url": "Bluesky Social",
  "cache_age": 86400,
  "width": 600,
  "height": null,
  "html": "\u003Cblockquote class=\"bluesky-embed\" data-bluesky-uri=\"at://did:plc:p7gxyfr5vii5ntpwo7f6dhe2/app.bsky.feed.post/3ldhirk3zcc2c\" data-bluesky-cid=\"bafyreicdxbmcddjjho4zdtfw6xinbnr2b2ywzgdvup7sl66sue4cexumbm\"\u003E\u003Cp lang=\"en\"\u003ESTAY POSITIVE!\u003C/p\u003E&mdash; \u003Ca href=\"https://bsky.app/profile/did:plc:p7gxyfr5vii5ntpwo7f6dhe2?ref_src=embed\"\u003EAlexandria Ocasio-Cortez (@aoc.bsky.social)\u003C/a\u003E \u003Ca href=\"https://bsky.app/profile/did:plc:p7gxyfr5vii5ntpwo7f6dhe2/post/3ldhirk3zcc2c?ref_src=embed\"\u003E2024-12-16T23:38:54.582Z\u003C/a\u003E\u003C/blockquote\u003E\u003Cscript async src=\"https://embed.bsky.app/static/embed.js\" charset=\"utf-8\"\u003E\u003C/script\u003E"
}

That iframe code though would still require some Javascript to make that request and embed that iframe html into the page.

photon · 12-17-2024, 12:36 PM

The iframe is almost enough for me to be able to create a working BBCode. At first I thought the data-bluesky-id="38770813747062216" would be some kind of unique identifier that is needed but the iframe works without it. Same with the "?id=38770813747062216&ref_url=https%253A%252F %252Ftol.ybddev.ca%252F404" on the src parameter in the iframe, it works ok without that too.

The only problem then is converting the profile.

If I go to the web page for that post it's https://bsky.app/profile/aoc.bsky.so.../3ldhirk3zcc2c which has aoc.bsky.social as a profile in the URL of the post.

But in the iframe it goes to

Code:

"did:plc:p7gxyfr5vii5ntpwo7f6dhe2"

as the profile identifier so the API to generate the iframe is looking up that information.

I could make a BBCode that works with an iframe but since BBCode only works on a single input parameter the user would have to get both the post identifier and the profile unique identifier and create their own URL for every post.

Or we could make a separate webpage that does that API call for the person and generates the URL for them to put into the BBCode. Very confusing but at least it would work.

Javascript is still the only way to do it clean and have it work just like other BBCode; it would take the normal browser URL, make the same API call you made with it, get the iframe code and replace the code on the web page with the iframe.

KelVarnsen · 12-17-2024, 01:13 PM

Is it possible to use the entire post URL as BBcode? Then get the iframe from there?

photon · 12-17-2024, 02:34 PM

For sure, though it depends on which URL you mean.

For the https://bsky.app/profile/aoc.bsky.so.../3ldhirk3zcc2c browser URL, could use that but something would have to reach out to Bluesky to get the URL that the iframe code would want (i.e. https://embed.bsky.app/embed/did:plc.../3ldhirk3zcc2c). That would either have to be Javascript that would run in the browser after the page loads, or it would have to be a server side component that would have to be coded as a plugin into the forum software (and forum software would probably need to have some database code as well otherwise every page view it'd request the same iframe component code over and over and I assume they rate limit things at some point).

If someone already had the https://embed.bsky.app/embed/did:plc.../3ldhirk3zcc2c URL then yeah the BBCode to embed that is simple.. I could put that in right now though it would be too hard to use for most people. Hence the idea that someone could take the normal URL https://bsky.app/profile/aoc.bsky.so.../3ldhirk3zcc2c and paste it into a page and it would spit out the https://embed.bsky.app/embed/did:plc.../3ldhirk3zcc2c URL which could then be used in a BBCode.

Or could put that kind of functionality into the forum but again that would involve adding to the forum software code.

photon · 12-17-2024, 02:40 PM

photon · 12-17-2024, 02:42 PM

Yeah see that works if I have the full URL that's normally in the iframe: https://embed.bsky.app/embed/did:plc.../3ldhirk3zcc2c

KelVarnsen · 12-18-2024, 01:32 PM

Maybe we need to upgrade the forum?

photon · 12-18-2024, 03:09 PM

We definitely do for lots of reasons, but I haven't seen that the natural upgrade (vBulletin 6) has Bluesky embeds either and I've seen several people that have looked at making a plugin for it and ran into the same issue that I have.

There are other forum software available but then it comes down to how much effort it is to migrate to it and still have everything working.

Maybe I should ask AI to write the Javascript

KelVarnsen · 12-20-2024, 04:14 PM

If we can add our own Javascript, could we create something similar to what we have with Twitter? I know we have the countdown script so I think we can add our own Javascript.

photon · 12-20-2024, 05:40 PM

Yeah for sure we could add some Javascript that could do the deed. It shouldn't be overly complicated, but would need to be done well enough that it doesn't break the site in different browsers or whatever. I don't really know Javascript much though so I could be wrong as to the effort.