Social Media Embeds

[TA2Web]

Is there a way to embed social media like youtube can be embedded?

I would like to be able to embed Facebook, Instagram, Tiktok, etc .. Just like the youtube plugin allows to embed youtube video.

Perhaps someone can create a plugin that allows for most all social media embeds?

The bludit editor is key to allow posting of ANYTHING. Crucial.

Thank you for any input of this.

[Edi]

With the editor TinyMCE this can be done with a plugin (of the paid plans):

https://www.tiny.cloud/blog/social-media-embed/

Yes, we should find another way... Perhaps it's possible using a custom field.

[TA2Web]

With the editor TinyMCE this can be done with a plugin (of the paid plans):

https://www.tiny.cloud/blog/social-media-embed/

Yes, we should find another way... Perhaps it's possible using a custom field.

Yes, that would be good if possible. $67 a month to upgrade TinyMCE to embed social media into posts just doesn't seem conducive to my blogging endeavors these days.

How does phpbb get to use bbcode editor with media embedding? Is bbcode editor something that bludit could use instead of TinyMCE?

My appeal to bludit is that it can be used along with bootstrap and work with a pre-existing website template structure. Unlike wordpress where to edit and build your own template that fits with your existing website scheme/theme is practically impossible.

I like bludit's simple cms mechanism just to record and display blogs. However, blog content articles are key. It needs to be able to post pretty much any type of media content these days and not just YouTube media.

[TA2Web]

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.

[TA2Web]

Ok, well, I didn't know I could paste embed code in the editor. I feel dumb now since nobody told me that was possible. Gotta love figuring things out on your own. lol.