stefan,
@stefan@stefanbohacek.online avatar

My Fediverse Embeds WordPress plugin is now available in the plugin directory:

https://wordpress.org/plugins/fediverse-embeds

Huge thanks to everyone who helped me test it during the initial development!

stefan,
@stefan@stefanbohacek.online avatar

Note that only Mastodon currently supports native post embeds. You can read about this project and my approach on my blog: https://stefanbohacek.com/project/wordpress-plugin-for-fediverse-embeds/

Imoptimal,

@stefan

Looks nice, and it's a great feature to store it in the database.

stefan,
@stefan@stefanbohacek.online avatar

@Imoptimal Thank you!

docpop,
@docpop@mastodon.social avatar

@stefan hi Stefan, I installed/activated the plugin on my site, but I'm not sure how I should be using it. Should I copy the embed code from a Masto post and drop it in the html block on my site (similar to how I would normally embed a Mastodon post), or is there a different way I should be using it?

I was hoping this app would allow me to drop a url to a Masto post and would automatically turn that into a proper embed, but that might not be it's purpose.

stefan,
@stefan@stefanbohacek.online avatar

@docpop Thank you for checking out the plugin!

Yes, you are correct, you will need to use the default embed code provided by Mastodon, and later other platforms, as they add this functionality.

Basically, my approach here is to build on top of existing functionality, rather than building something new. This way, if you disable my plugin, the embeds will still work.

This is a bit buried in my blog post, let me also add it to the plugin's description for better visibility.

jwz,
@jwz@mastodon.social avatar

@stefan This is an abomination. The tag you are looking for is blockquote. BLOCKQUOTE.

stefan,
@stefan@stefanbohacek.online avatar

@jwz Good point, thank you for calling this out! (Sorry it made you angry, though.)

cybeardjm,
@cybeardjm@masto.ai avatar

Hi @stefan just tested the released version on my 2 "sandboxes" and it works fine.
Will update on my 2 blogs.

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Great, thank you!

And thank you so much, once again, for helping me test the plugin before!

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Shouldn't a link to "View details" point to the plugin's page instead of Github?

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Good catch, I'll update that. Thank you!

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Just installed on my main blog. works fine there too. 👏

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Nice!

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Tested on AMF. It works, but it seems that depending on theme (Twenty Twenty in this case), the global div's alignment is not respected and set outside the main div. Didn't happen with older versions...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Mind sharing a link?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan I deleted it, will recreate one later. Probably a theme problem, formatting.
I usually center these embeds, just to be sure, and now it was rendered properly at first and then suddenly moved to the left of the page...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Yes, this is my fault, I just switched to a blockquote for the parent element so that it's more semantic, but that caused some styling issues, which I also had to address.

The 1.0.4 version should look better.

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Nope...
https://amf.didiermary.fr/test-embed/ after emptying the site's cache.

Edit: removed align=center to be sure.

cybeardjm,
@cybeardjm@masto.ai avatar
stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Yes, this is with an older version of the plugin, which doesn't use blockquotes yet.

Could you please check if amf.didiermary.fr is running 1.0.4 version of the plugin?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Both blogs have been updated.
Let me test 1 thing...

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan
Wanted to be sure that when updating the old table/options were cleared first.
Deactivated plugin, deleted 1 table, 7 options from the DB, reactivated plugin, checked settings and saved, opened test post: same - it's a blockquote!

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Can you let me know when the plugin updates to 1.0.5?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan updated to 1.0.5 - cleared cache - same.

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Alright, it looks like it's this file: https://amf.didiermary.fr/wp-content/plugins/fediverse-embeds/dist/js/renderPost.js

I will have to look into how to add a cache buster when importing JS files dynamically, until then, is there maybe a CDN you can clear for this specific file?

When I add a cache buster, I see:

"w-100 mt-4 mb-4"

Without it:

"w-100 m-0 mt-4 mb-4"

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Just totally disabled the cache manager (WP Fastest Cache - this is a static page cache, with JS/CSS minimizing features) - same result - I don't use any CDN

stefan,
@stefan@stefanbohacek.online avatar
cybeardjm,
@cybeardjm@masto.ai avatar

@stefan OK, I'll do the following (and this is why I previously tested removing the entries in the DB, as when testing with my sandboxes, sometimes, getting rid of them was the way forward): I'll totally remove the plugin. Then reinstall, be sure to clear the cache, then disable it. Coming back soon...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Clearing the DB shouldn't be necessary, though, the file itself is just cached. Is there another caching layer that needs to be cleared maybe, outside of WordPress?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan 1st thing - without the Fedi embed plugin:
In edit mode vs viewing post
=> there's nothing!!!! although the code is in the source

published post
embed code
source code of published page

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Was this also resolved?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Nope, without the plugin, the iframe is not rendered at all.
I had this same problem in the past with Twenty Twenty on my main blog, the reason why I migrated to Twenty Twenty-Three in the 1st place on this blog.
Will probably do the same with AMF, as the global rendering times of the site are too high anyway.

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Ah, okay, I see this is an issue with the theme itself. Interesting!

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan OK,

  • deactivated/removed plugin (checked via FTP)
  • cleared WP cache.
  • purged varnish cache
  • cleared DB
  • reinstalled plugin + validated settings.
    Still the same.

Tested in troubleshoot mode (only plugin) - same

No more idea...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm I tried hard-refreshing the JS file a few more times until I saw it change.

https://amf.didiermary.fr/wp-content/plugins/fediverse-embeds/dist/js/renderPost.js

Now the embed looks right!

https://amf.didiermary.fr/test-embed/

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Seems like it's just varnish caching the file?

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan But I cleared it... still can't have the page right in FF...
OK, I'll wait a few hours, will clear the Varnish cache again and retry...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm It might just be cached in your browser at this point, can you try opening the JS file and doing a hard refresh, a few times?

https://amf.didiermary.fr/wp-content/plugins/fediverse-embeds/dist/js/renderPost.js

https://filecamp.com/support/problem-solving/hard-refresh/#firefox

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan Just cleared FF cache and all about didiermary.fr and YES!!!!!!!! it works in FF again...

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Nice!

Yeah, I will definitely look into how I can prevent the file getting stuck in the cache, it looks like this might be a bit more tricky.

Appreciate your patience debugging this with me!

cybeardjm,
@cybeardjm@masto.ai avatar

@stefan have no idea where ?cache=1234 comes from...
OK - tried with chrome, it works, still not in Firefox...
Is it a FF trick?

stefan,
@stefan@stefanbohacek.online avatar

@cybeardjm Adding some random stuff to the URL after a "?" just tricks the server and the browser into thinking you're requesting a brand new, uncached file.

https://www.curtiscode.dev/post/front-end-dev/what-is-cache-busting/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • wordpress
  • DreamBathrooms
  • mdbf
  • osvaldo12
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • cubers
  • slotface
  • khanakhh
  • kavyap
  • InstantRegret
  • Durango
  • JUstTest
  • everett
  • ethstaker
  • cisconetworking
  • Leos
  • provamag3
  • modclub
  • ngwrru68w68
  • tacticalgear
  • tester
  • megavids
  • normalnudes
  • anitta
  • lostlight
  • All magazines