So apparently, to embed facebook video, and I would guess instagram video also, we need to somehow make TINYMCE use this type of code into posts.. I found this link..
https://developers.facebook.com/docs/pl ... deo-player
It would be really great if someone made a plugin for the editor to embed facebook and instagram video clips. Or an all in one plugin so youtube and facebook and instagram and X and other popular social media embeds can be used in bludit blog posts.
So I asked AI how to do it.. but, I don't know enough about it to do it myself.
Here's what AI said:
Creating a plugin for TinyMCE to embed videos from Facebook and Instagram into a Bludit blog involves several steps. Here's a high-level overview:
### 1. **Understand the Requirements**
- TinyMCE supports custom plugins.
- Bludit uses Markdown or HTML in its editor, so the plugin must output embed-compatible HTML.
### 2. **Create the Plugin**
- Structure your plugin according to TinyMCE's API.
- Use Facebook and Instagram oEmbed endpoints to fetch the embed HTML for videos.
### 3. **Steps to Develop**
#### **a. Plugin Structure**
- Create a JavaScript file for your plugin.
- Register a new button in TinyMCE.
javascript
Code: Select all
tinymce.PluginManager.add('facebook_instagram_embed', function(editor, url) {
editor.ui.registry.addButton('embedVideo', {
text: 'Embed Video',
onAction: function() {
editor.windowManager.open({
title: 'Embed Facebook/Instagram Video',
body: {
type: 'panel',
items: [
{ type: 'input', name: 'url', label: 'Video URL' }
]
},
buttons: [
{ type: 'cancel', text: 'Cancel' },
{ type: 'submit', text: 'Insert' }
],
onSubmit: function(api) {
const data = api.getData();
const videoUrl = data.url;
// Embed logic using oEmbed API
fetch(`https://graph.facebook.com/v12.0/oembed_video?url=${encodeURIComponent(videoUrl)}`)
.then(response => response.json())
.then(embedData => {
editor.insertContent(embedData.html);
})
.catch(error => alert('Failed to embed video. Check URL.'));
api.close();
}
});
}
});
});
#### **b. Include the Plugin in TinyMCE**
- Add the plugin to TinyMCE when initializing it in your Bludit setup.
javascript
Code: Select all
tinymce.init({
selector: '#your-textarea',
plugins: 'facebook_instagram_embed',
toolbar: 'embedVideo',
// other options
});
### 4. **Integration with Bludit**
- Ensure Bludit processes the embedded HTML correctly.
- Test to confirm the embed codes render in the final post.