WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 24.07.2021 14:19:24

losttrip
Member

Embedding facebook videos - ckEditor News with Images

WBCE Version: 1.5.0
PHP Version: 7.4.19
CKEditor Developer Edition 4.16.1
News with Images 5.0.7

I had built facebook video embed into a custom One For All module, where the user simply entered the video URL into a short text box, and the video was embedded on their page.  this was the code used:

<div class="facebook_video_wrapper">
<div class="fb-video" data-href="[CUSTOM_CONTENT]" data-width="242" data-show-text="false" mute="false"></div>
</div>

But now I have a client who has a blog type section using News with Images, and they want to be able to EASILY embed facebook videos into their posts in ckEditor.  They actually wanted the ability to optionally embed the video in place of the preview image in some posts.  I told them the preview image is for IMAGES only.

I know they can copy the facebook video embed code and switch the editor to source view and paste it, but using this properly seems to baffle some users.

I was hoping this would work with the WBCE Embed plugin, but that works with Youtube, Vimeo & Dailymotion URLs only.  I did look around at the code for that plugin to see if I could incorporate facebook video, but I am not skilled enough.  This is unfortunate because facebook, instagram and youtube seem to be the choices for video (in North America at least).

What would everyone suggest as the best approach to this.

Offline

#2 24.07.2021 17:13:36

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

Could a droplet be an option, e.g. the customer just places sth. like [[fbvideo?id=abc123]] in the post, where the video should appear (abc123 is the video id, idk how the embed code actually looks like, but I guess each video has an id like yt videos)
The droplet would generate the complete html code to show the video, this would have to be developed first, there is no droplet for this yet.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 25.07.2021 17:47:54

berny
Member

Re: Embedding facebook videos - ckEditor News with Images

but is it ok, to emmbed fb videos without hint to the privacy rules?

Offline

#4 25.07.2021 21:24:02

mrbaseman
Developer

Re: Embedding facebook videos - ckEditor News with Images

Depends on the privacy statement and on the implementation of the opt-in. If you declare which 3rd-party content is used and the visitors reach the page only after accepting this declaration, everything should be fine in my opinion.

Offline

#5 25.07.2021 22:38:30

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

florian wrote:

Could a droplet be an option, e.g. the customer just places sth. like [[fbvideo?id=abc123]] in the post, where the video should appear (abc123 is the video id, idk how the embed code actually looks like, but I guess each video has an id like yt videos)
The droplet would generate the complete html code to show the video, this would have to be developed first, there is no droplet for this yet.

Yes, a droplet is an option and it's one I had already tried, but my client still found it cumbersome having to add "?url=" and then their link URL into a source code editor.

Here is the droplet I created (I have never created a droplet, so I was guessing)

Name:
FacebookVideo

return '<div class="fb-video" data-href="'.$url.'" data-width="242" data-show-text="false" mute="false"></div>';

Comments:

Droplet shows [[FacebookVideo]]
Before the closing double brackets ]] Add ?url= followed by Your Facebook Video Share Link
e.g.:
[[FacebookVideo?url=https://fb.watch/12345678/]]

The other downside to the droplet approach is the end user doesn't SEE the video in their backend admin ckeditor window, just the droplet code.  I'm not complaining, but this user is very visual, so they find it "disjointed" to have cryptic code text in place of where their video should be.

That is why I was hoping to be able to incorporate facebook video into the WBCE Embed plugin in ckEditor.  Perhaps I will play around with WBCE plugin and see if I can get it to work.  But, then I will have the issues of losing changes when ckEditor (WBCE Embed plugin) updates.

Maybe I should try making a copy of WBCE Embed Plugin, strip it down for JUST facebook video and save as a new plugin for my clients use alone?  But I thought this might be a plugin that would be useful to others as well.  But if there are privacy issues (maybe in other countries?) I am not aware of, perhaps this is not something that would be universally wanted.

Last edited by losttrip (25.07.2021 22:47:31)

Offline

#6 25.07.2021 22:41:47

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

berny wrote:

but is it ok, to embed fb videos without hint to the privacy rules?

I have to say, I am not aware of what you are referring to.  My client lives in Canada (as do I) and I have never seen or heard of any issues with embedding facebook videos on websites.  I've searched facebooks developer and terms of service pages and can't find anything related.

Not sure if it matters, but the videos are produced by my client, on her facebook business page, and being embedded on here company website.

I'm interested in learning more, if I am missing something.

Offline

#7 26.07.2021 05:56:03

bernd
Developer

Re: Embedding facebook videos - ckEditor News with Images

Berny is likely referring to the GDPR (DSGVO) here. The Canadian counterpart is probably the PIPEDA.

Apart from the legal basics, it wouldn't be too difficult to adapt wbembedDialog.js so that it outputs a Facebook div instead of the Youtube iframe.
But! For the display of the embedded video, a script from the FB-Developer Framework must be loaded. This script writes a lot of stuff dynamically into the div - and of course this doesn't work in the editor window, so your client doesn't get a preview in the backend with this method either ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#8 26.07.2021 06:07:38

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

Bernd was faster...

The worries about privacy are valid if you would address european customers due to the GDPR. Embedding contents from external sources means that at least the IP of the one who aims to watch the video is transferred to Facebook, and, if the one is currently logged-in to Facebook, the fact that he watches the video is added to his profile. Thus, personal data is transmitted to Facebook, and the GDPR says that this may only happen with explicit opt-in. So this is why many sites in Europe do not embed videos from other sources directly, but show a dialogue for an opt-in before. (For WBCE, there are the modules TwoClickContent and DSGVO Video embed for this).

The problem with the code from FB is, beside the issue mentioned by Bernd:
If you click on "copy Link", you get https: //fb.watch/v/ABC-1234/
But the embed code looks like this:

<iframe src="https://www.facebook.com/plugins/video.php?height=245&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%XXXXXXXXXXXXX%2F&show_text=false&width=560&t=0" width="560" height="245" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>

So the media embed video can not simply be enhanced, since it can't figure out the real embed code from the video URL.

The easiest solution is maybe adding the plugin "Paste Code"
1. Download it from https://ckeditor.com/cke4/addon/pastecode
2. unzip it, copy the wohle directory it into /modules/ckeditor/ckeditor/plugins
3. Add "pastecode" to the line which starts with "$ckeditor->config['extraPlugins']    =" in the /modules/ckeditor/include.php

Edit: For implementation in CK Editor Developer Edition, see additional information in https://forum.wbce.org/viewtopic.php?pid=37785#p37785

Then appears an additional button where the embed code from FB can be pasted without switching to the source code view first.
attachment.php?item=3010&download=1
attachment.php?item=3011&download=1

Last edited by florian (28.07.2021 06:02:35)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

losttrip

#9 26.07.2021 06:09:46

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

You're absolutely right about the lack of preview with this wbembed method.  I had overlooked that.  I was forgetting that the tests I had done which show the preview in the backend were actually the tests where I used the full facebook video embed code (iframe).  I also now realize that my One For All workflow also did not provide any sort of preview, so that is less of a concern anymore.

Okay, so as far as adapting the wbembed plugin, I was hoping having the option to embed facebook video in addition to the current supported formats would be more desireble, as opposed to replacing the youtube embed, which is also popular.  That way this plugin would be strengthened.  But if having the ability to embed facebook video using WBCE embed is not a need, I will work on adapting it just for my clients purposes.

Out of curiosity, did someone from WBCE create/adapt WBCE Embed, or was it from the WB days - hence the wbembed plugin name.  I see the credits in the plugin show a date of 2020, so I assumed it's still being supported, but I did not recognize the credited name.

Offline

#10 26.07.2021 06:33:14

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

Hi Florian.  I was typing my last reply when your response was posted.

I'm not clear on your explanation on why facebook video could not be added to the WBCE embed plugin.  But then again, I do not fully understand how that plugin works, although I've looked at the code to see if I can muddle through it.
Can I not tell the plugin to insert the facebook share link URL into the code I used similar to how the droplet I created works?  Replacing the $url with the actual share link url?

<div class="fb-video" data-href="'.$url.'" data-width="242" data-show-text="false" mute="false"></div>

If not, I will definitely experiment with the "Paste Code" plugin, thank you.

Offline

#11 26.07.2021 06:41:08

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

The mediaembed plugin needs the real ID of the video, which is only in the full embed code or the real link to the video, but not in the link which is offered in the "copy URL" dialogue. It appears, when watching the video, but looking at the address bar of the browser, selecting ot and copying it to the clipboard will probably overwhelm your client too. (At least for some of mine this is already too complicated.)

Last edited by florian (26.07.2021 07:11:54)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#12 26.07.2021 06:50:24

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

Sorry for my ignorance, but why does the plugin need the "real ID of the video"?

On the facebook video, If I click "Share - Embed" to get the embed code for one of my client's facebook videos:

<iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Fclient-site%2Fvideos%client_video-embed-code%2F&show_text=false&width=214&t=0" width="214" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>

and then replace the embed URL with the url from the same video's "Share - Copy Link":

<iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https://fb.watch/abc-123/&show_text=false&width=214&t=0" width="214" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>

The video embed still works in ckEditor.  Can the WBCE embed plugin not do something similar to this?

Last edited by losttrip (26.07.2021 06:54:34)

Offline

#13 26.07.2021 07:08:28

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

I don't understand you. I'm out.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#14 26.07.2021 14:09:59

bernd
Developer

Re: Embedding facebook videos - ckEditor News with Images

losttrip wrote:

Can I not tell the plugin to insert the facebook share link URL into the code I used similar to how the droplet I created works?  Replacing the $url with the actual share link url?

Of course you can do it that way.
This is exactly the "Facebook div" I meant in my previous post.
However, as mentioned, this div only works in conjunction with the additional FB javascript and thus cannot generate any output in the backend.
As a result, you don't see anything in the WYSIWYG view, it is only visible in the source code view.
In this case, I would prefer the droplet solution, because then you can at least see the droplet call in the WYSIWYG.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#15 26.07.2021 15:21:58

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

florian wrote:

I don't understand you. I'm out.

Sorry.  I likely made this more confusing than it needed to be.  I do appreciate your suggestion and detailed instruction on adding the Paste Code plugin.  If I am not able to achieve what I am trying to accomplish using the wbembed plugin (with some custom adjustments), I will most likely use Paste Code.

Offline

#16 26.07.2021 15:24:13

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

@bernd - I understand.

Offline

#17 26.07.2021 17:08:29

bernd
Developer

Re: Embedding facebook videos - ckEditor News with Images

I would say the easiest way is really to use the Pastecode plugin as described by Florian in #8 (I just tried it).

With this, you immediately have a preview in the backend
No need to load the additional script from Facebook.

Your client just has to copy the embed code from Facebook instead of the share link.

Last edited by bernd (26.07.2021 17:20:12)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#18 26.07.2021 17:17:06

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

bernd wrote:

I would say the easiest way is really to use the Pastecode plugin as described by Florian in #8 (I just tried it).

With this, you immediately have a preview in the backend
No need to load the additional script from Facebook.

Your client just has to copy the embed code from Facebook instead of the share link.

I agree.  As usual, Florian provided a best use case option.
I was being stubborn trying to make wbembed bend to my client's needs, because I had spent the most time thinking and experimenting in that direction.  My mistake.

Thank you Florian!

Offline

Liked by:

florian

#19 26.07.2021 17:20:40

bernd
Developer

Re: Embedding facebook videos - ckEditor News with Images

To make it even clearer for your customer, you can replace the icon in
plugins/pastecode/icons and rename the "button" and "title" in plugins/pastecode/lang/en.js, e.g. "Embed Facebook Video".


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

Liked by:

losttrip

#20 26.07.2021 18:12:09

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

Thank you all.  I have implemented florian's suggested Paste Code plugin along with Bernd's clarity suggestion.  This will work perfectly.

@florian - The only step I needed to add to your excellent instruction was to add the plugin to my custom wb_ckconfig.js
under:
config.toolbar_WB_Default
add 'PasteCode' to the 'clipboard' items - e.g.:

{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','PasteCode','-','Undo','Redo' ] },

Not sure if you wanted to add this to your original post for future clarity for other users.

Offline

Liked by:

florian

#21 28.07.2021 06:06:59

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

Thank you for your friendly words, losttrip.

About installing the plugin: I had tested it on the CK Editor Standard Edition (where no wb_ckconfig.js exists), so I have editited the post now with the link to your explanation for adding it to CKE Dev Edition.
Maybe we should consider to include the paste code-plugin to cke by default. I think it can be useful in other cases too.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

losttrip, webbird

#22 28.07.2021 10:39:57

losttrip
Member

Re: Embedding facebook videos - ckEditor News with Images

florian wrote:

Maybe we should consider to include the paste code-plugin to cke by default. I think it can be useful in other cases too.

I support that idea.
I know I will be including this plugin in more of my installations.

Offline

#23 29.07.2021 12:52:21

colinax
Administrator

Re: Embedding facebook videos - ckEditor News with Images

florian wrote:

Maybe we should consider to include the paste code-plugin to cke by default. I think it can be useful in other cases too.

I don't think we need that, we have enough possibilities with Source Mode and Syntaxhighlight in Dev Edition and some other modules like code2.

Besides, PasteCode is no longer supported since 2013 and I have no idea how the module will cope with recent changes.

Notice: CKEditor is a text editor and it can still break HTML, if you need a valid or special HTML code, it is necessary to use the droplets or modules like code2.

Offline

#24 29.07.2021 19:02:44

florian
Administrator

Re: Embedding facebook videos - ckEditor News with Images

Mmh... well, the plugin is from 2016, not 2013. Yes, it's abandoned, but we've tested it with the current CKE, and it works...
The only issue I see at the moment is, that by adding this plugin there would be a bunch of "paste" icons (paste as text, paste from word, paste as code), what could be overwhelming to non-technical affine users. But switching to the "spooky" source code view every time when a code snippet should be pasted is neither a solution.

Nevertheless you're right, the CKE is primary a text editor, not a code editor, and also breaks in many cases code if it does not know/like it, what might causes issues or unwanted results. So the "paste code" plugin has indeed some disadvantages.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Board footer

up