Embed fediverse posts on your WordPress site. You can download it from the WordPress plugin directory, and read about the motivation behind this project on my blog.
Feedback and help will be very appreciated!
- see open issues or create a new one
- contact
A few examples of the plugin in use:
- Show or hide post metrics
- Automatic dark and light theme
- Labels for bots 🤖 and server admins 👑 (optional)
- Labels for updated 📝 and deleted posts 🗑️ (see notes on how deleted posts are handled)
- Download and install the plugin.
- Add the embed code to your post.
This plugin only works with fediverse platforms that provide embed code. This way, if you ever decide to stop using the plugin, your embeds will still work.
As more platforms add this feature, this plugin will continue to get updated.
| Platform | Supported |
|---|---|
| Mastodon | ✔️ How to embed |
| Pleroma | ❌ |
| Akkoma | ❌ |
| Friendica | ❌ |
| Misskey | ❌ #17 |
| Calckey | ❌ #16 |
| Peertube | ❌ #2 |
| Pixelfed | ❌ #14 |
When embedding a post from a fediverse server, the content of the post needs to be fetched from that server, which is then stored in your site's database. Based on the way you configure the plugin, additional requests will be made periodically to refresh the cached data.
When making requests to a third party server in general, the server will receive and may record the IP address of the server hosting your website.
# install dependencies
npm install
# build front-end scripts and styles
npm run dev
# when adding new PHP classes inside `includes`
composer dumpautoload -o - "Broken image" icon by Hea Poh Lin https://thenounproject.com/icon/broken-image-583402/
Please make sure to copy the full embed code from the original URL of the post, including the iframe and the script tag.
Please make sure that you're not blocking /wp-json/ftf/* endpoints, either via a plugin like Disable WP REST API, or through server configuration or your firewall.
Note that individual servers have an option to prevent this plugin from loading data, see more details below.
The plugin fires a custom ftf_fediverse_embeds_posts_processed event that passes the list of processed embeds. Here's an example of how it can be used:
document.addEventListener('ftf_fediverse_embeds_posts_processed', (event) => {
// All embeds are ready.
event.detail.forEach(embed => {
// Do something with each embed.
});
});Or with jQuery:
$(document).on('ftf_fediverse_embeds_processed', () => {
// All embeds are ready.
$('.fediverse-post').each(() => {
const $post = $(this);
// Do something with each embed.
});
});The JS and CSS files are only loaded when needed. If you for some reason need to include them on every page, you can use the FTF_FE_ALWAYS_ENQUEUE environmental variable.
define( 'FTF_FE_ALWAYS_ENQUEUE', true );An example use case would be if you want to use some of the internal functions, eg:
if (class_exists('\FTF_Fediverse_Embeds\Embed_Posts')){
$fediverse_embeds = new \FTF_Fediverse_Embeds\Embed_Posts();
$embed = $fediverse_embeds->process_embeds($iframe, array(
"blockName" => "core/html"
));
}The plugin will use the following user agent when making requests to your fediverse servers:
FTF: Fediverse Embeds; WordPress/VERSION; https://WEBSITE.COM
VERSION is the version of the WordPress website making the request, and WEBSITE.COM is its URL, this is the default user agent used by WordPress.
The admin of your instance can then block any requests where the user agent contains FTF: Fediverse Embeds.