CODEWITHSUNDEEP
javascriptfacebookfacebook-graph-apishareembed
Sm00rf9000
Sm00rf9000

Reputation: 541

Facebook open graph embed video issue

I have a Facebook share button on one of the pages on my website, this share button is used to share another page on my site. The only specific task that I wan't it to do besides share the website, is to include an embedded Vimeo video, which is also on that particular page. Thus having a Facebook shared post, which links to my particular page, but also has a video playing. I have gotten pretty far in the process so far, now my issue is just that the shared post has the right title, description, image and video, it seems, but when pressing the "play" button on the Facebook post. It starts to buffer and has the right length and the right Vimeo title, but it just keeps buffering and never actually plays.

If I would say what is wrong I recon it is the Flash player link, which is wrong, but I am unable to figure out where the Vimeo flash player link for the video is. Currently my code looks like below.

On the page I wan't to share I have the following "open graph" tags. 

<meta property="og:title" content="Test title" />
    <meta property="og:type" content="movie" /> 
    <meta property="og:url" content="http://website.com/siteNum1.html" />
    <meta property="og:description" content="Test description" />

    <meta property="og:image" content="https://i.vimeocdn.com/filter/specialThumbnailImage.png"/>
    <meta property="og:video" content="https://vimeo.com/moogaloop.swf?clip_id=specialID" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:video:width" content="640" />
    <meta property="og:video:height" content="360" />

    <meta property="og:video" content="https://player.vimeo.com/video/specialID?autoplay=1&title=0&byline=0&portrait=0" />
    <meta property="og:video:type" content="video/mp4"/>
    <meta property="og:video:width" content="640" />
    <meta property="og:video:height" content="360" />

On the page, where I have the share button it is integrated like below.

<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_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="col-lg-4">
                <div class="faceBkShare">
                    <h3>Share on Facebook</h3>
                    <img src="fbPost1.png" alt="fb post inspiration" class="img-responsive center-block">
                    <p>Some text</p>
                    <div class="fb-share-button" data-href="http://website.com/siteNum1.html" data-layout="button" data-size="large" data-mobile-iframe="true">
                    </div>
                </div>
             </div>

I have drawn inspiration from the following question/answer

Upvotes: 1

Views: 1253

Answers (1)

Sm00rf9000
Sm00rf9000

Reputation: 541

I figured out that Vimeo has a need link, where they have an example of all the open graph tags you will need when trying to share a video and have it link to your site. This is that link

Using this link the following code is what I ended up with. 

    <meta property="og:site_name" content="My sites name">
<meta property="og:url" content="http://website.com/siteNum1.html">
<meta property="og:type" content="video">
<meta property="og:title" content="Title of site/video">
<meta property="og:description" content="the description">
<meta property="og:image" content="https://longlinkforthumbnailimage.png">
<meta property="og:image:secure_url" content="https://longlinkforthumbnailimage.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:video:url" content="https://player.vimeo.com/video/SpecialID?autoplay=1">
<meta property="og:video:secure_url" content="https://player.vimeo.com/video/SpecialID?autoplay=1">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:url" content="https://vimeo.com/moogaloop.swf?clip_id=SpecialID&amp;autoplay=1">
<meta property="og:video:secure_url" content="https://vimeo.com/moogaloop.swf?clip_id=SpecialID&amp;autoplay=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

I hope this helps, if anyone has the same issue as myself.

Upvotes: 1

Related Questions