Embed Facebook-videos

Hello everyone,
my question is: how do I embed Videos that were uploaded to Facebook?

The video-tag works with Youtube- and Vimeo-videos, but not with Facebook-videos. I think that’s because of the link structure…


states that those video-links are recognized

Link 1: (https)://youtu.be/g4sh_wFQuyY
Link 2: (http)://www.youtube.com/watch?v=lLuc6rtWkrM
Link 3: (http)://www.youtube.com/embed/lLuc6rtWkrM

Facebook-video-links differ from vimeo and youtube:

(https)://www.facebook.com/user/videos/video-id/
for example:
https://www.facebook.com/MuseumslandschaftHessenKassel/videos/2282719578639627/

I have found a lot of Kirby 2 plugins for embedding Soundcloud and other media hosts, but not for Kirby 3 (which I have installed).

  1. Is there a Kirby 3-plugin that I haven’t found yet?
  2. Is there a way to get an easy fix for embedding Facebook-videos?
  3. Where is defined, how Youtube- and Vimeo-Links are handled? And how can I add a rule for Facebook-Links?

Cheers

You can create a custom Kirbytag for Facebook links based on the existing tags:

@texnixe thanks. :+1:

After a bit of research I was able to write a custom Kirbytag.

<?php

Kirby::plugin('huhnapfel/video', [
  'tags' => [
      'facebook' => [
        'attr' => [
          'caption',
        ],
        'html' => function($tag) {

          $caption      = $tag->caption;

          $div_script = '<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3"></script>';
          $div_1 = '<div class="fb-video" data-href="';
          $url_of_the_video = $caption;
          $div_2 ='" data-show-text="false"></div>';

          $result = $div_script . $div_1 . $url_of_video . $div_2;

          return $result;
        }
      ]
    ]
]);

Whenever I write…

(facebook: caption: URL_of_video )

…then the URL_of_video is passed in the $caption-variable to refer the data-href="" to the URL of the video, and then…

(facebook: caption: URL_of_video)

…the script returns a <div>-object which holds the video-embed-code from facebook.

It works, so mission accomplished, I guess! :slight_smile:
Cheers
Felix


Note: If you don’t want to embed the video with a fixed pixel width, leave out the data-width

< div class=“fb-video” data-href=“URL_of_videodata-width=“500” data-show-text=“false”>

…then the video is responsive to your frame-width.

Hm, that looks a bit weird, why do you use the caption attribute for the url, instead of just

(facebook: Url_of_video)

Because, if I used $url instead of $caption, then it didn’t work (was defined like…

<?php

Kirby::plugin('huhnapfel/video', [
  'tags' => [
      'facebook' => [
        'attr' => [
          'caption',
          'url',
        ],
        'html' => function($tag) {

          $url          = $tag->url;
          $caption      = $tag->caption;

$url wouldn’t be displayed, even if I just wrote…

return ‘test’ . $url;

It would only display: test

But when I write…

(facebook: url: Url_of_video)

…and I set the $url-variable…

$url_of_video = $url;

…then it works as well. But still, it’s the same, like writing:

(facebook: caption: Url_of_video )

…because the text needs to be linked to a variable and be inserted in the <div>-container.

Don’t know why this extra step is necessary, though… :thinking:

Maybe post the complete code, I’m not sure what you are doing there that should make this extra attribute necessary when it shouldn’t be.

What do you mean exactly with ‘posting the complete code’?
Do you mean… kirby/site/plugins/facebook/index.php …?

Or something else?

Yes, exactly, your Kirbytag code.

<?php

Kirby::plugin('huhnapfel/video', [
  'tags' => [
      'facebook' => [
        'attr' => [
          
          //'caption',
          'url',
          
        ],
        'html' => function($tag) {

          $url          = $tag->url;
          //$caption      = $tag->caption;
          
          $div_script = '<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3"></script>';
          $div_1 = '<div class="fb-video" data-href="';
          $url_of_video = $url;
          $div_2 =' data-show-text="false"></div>';
          $result = $div_script . $div_1 . $url_of_video . $div_2;
          
          return $result;
        }
      ]
    ]
]);
1 Like

That should just be

$url = $tag->value;

Then your tag can look like this

(facebook: video_url)

$tag->value fetches the value after the tag name+colon.

2 Likes

Sweet! :heart:
Now, that makes sense.