1 Topic by 35ol (edited by 35ol 2016-05-23 10:29:55)

  • 35ol
  • Member
  • Offline
  • Registered: 2016-01-16
  • Posts: 15

Topic: Add facebook like/share button on mp4 [SOLVED]

How to add facebook like/share button on my own mp4 video which in "Basic page"

I don't want to use youtube、vimeo .....

thanks

  • Registered: 2012-12-16
  • Posts: 938

Re: Add facebook like/share button on mp4 [SOLVED]

Create the code for a Like Button or a Share Button using one of Facebook's links below.
You can then copy and paste the code into your Showkase 'Basic' page in the text editor (in 'Source' mode).

Like Button: https://developers.facebook.com/docs/pl … ike-button
Share Button: https://developers.facebook.com/docs/pl … are-button

  • 35ol
  • Member
  • Offline
  • Registered: 2016-01-16
  • Posts: 15

Re: Add facebook like/share button on mp4 [SOLVED]

I can embed like/share button in URL page.
But don't know how to embed to <iframe> or <video> media file.

  • Registered: 2012-12-16
  • Posts: 938

Re: Add facebook like/share button on mp4 [SOLVED]

You can insert whatever HTML code you like (for example an <iframe> or <video> tag) into the text editor on your 'Basic' page.
Just make sure that your text editor is in 'Source' mode (click the 'Source' button in the text editor's toolbar).

For example, if you want to host a video on your own web server and embed it into a 'Basic' page, then try the following:

(1) Upload the video file to your web server. In this example, we'll call it 'movie.mp4' and upload it to the root directory.
(2) Enter something like the following code into the text editor (in 'Source' mode), changing the width as necessary:

<video src="/movie.mp4" width="800" controls>Your browser does not support the video tag.</video>

The leading slash in the 'src' attribute denotes your root directory. If you upload your video file to a location other that your root directory, make sure that the path to the video file is correct. (If it is a relative path, then it should be relative to the 'Basic' page's location, i.e. one directory down from the Showkase directory.)

More information about the <video> tag and its attributes can be found here: https://developer.mozilla.org/en/docs/W … ment/video

5 Reply by 35ol (edited by 35ol 2016-05-23 04:00:27)

  • 35ol
  • Member
  • Offline
  • Registered: 2016-01-16
  • Posts: 15

Re: Add facebook like/share button on mp4 [SOLVED]

I think you misunderstood

I want insert facebook link/share button mouseover the video, not below the video, like youtube、viemo or juicebox image

  • Registered: 2012-12-16
  • Posts: 938

Re: Add facebook like/share button on mp4 [SOLVED]

Thank for you the clarification.

Here is one possible solution. Hopefully the comments in the code will help.

It uses the JavaScript SDK Version of the Facebook Like Button. You'll need to replace the sample Facebook Like Button code below with your own (and also make sure that the path to your video file is correct in the video tag).

<!-- Wrap video tag and Facebook Like Button in parent container with position relative -->

<div id="wrap" style="position: relative;">

    <!-- Video tag -->

    <video src="/movie.mp4" width="800" controls>Your browser does not support the video tag.</video>

    <!-- Facebook Like Button - JavaScript SDK Version - Code from Step 2 -->

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Facebook Like Button - JavaScript SDK Version - Code from Step 3 -->

    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

</div>

<!-- jQuery script section -->

<script>

    // Execute following when DOM is complete

    $(document).ready(function() {

        // Show Facebook Like Button only when mouseover video

        $('#wrap').hover(function(){

            // Mouseenter

            $('.fb-like').first().show();
            }, function(){

            // Mouseleave

            $('.fb-like').first().hide();
        });

        // Initially hide Facebook Like Button, stack it on top of video and position it in corner of video

        $('.fb-like').first().css({
            'display': 'none',
            'position': 'absolute',
            'top': '10px',
            'left': '10px',
            'z-index': '999'
        });

    });

</script>
  • 35ol
  • Member
  • Offline
  • Registered: 2016-01-16
  • Posts: 15

Re: Add facebook like/share button on mp4 [SOLVED]

Excellent

thank you so much

  • Registered: 2012-12-16
  • Posts: 938

Re: Add facebook like/share button on mp4 [SOLVED]

You're welcome.