Facebook Open Graph Tags für „embedded“ Videos?

Du möchtest deine „geteilten“ Videos bei Facebook automatisch im Newsfeed abspielen lassen – Ohne Sie nativ bei Facebook hochgeladen zu haben? Zusätzlich möchtest du Open Graph Stories nutzen?

Was zu tun ist, erfährst du hier:

 

 

 

 

Facebook Open Graph Stories einsetzen

Füge folgendes Open Graph Tags in der header.php (WordPress CMS) vor dem schließenden </head>-Tag ein:

<meta property="fb:app_id" content="[meine App ID]"/>
<meta property="og:site_name" content="[]"/>
<meta property="og:type" content="video"/>
<meta property="og:video:type" content="video/mp4"/>
<meta property="og:video" content="https://tma-renditions.global.ssl.fastly.net/strawberry-cream-puffs_l_en/strawberry-cream-puffs_l_en-720p.mp4"/>
<meta property="og:video:secure_url" content="https://tma-renditions.global.ssl.fastly.net/strawberry-cream-puffs_l_en/strawberry-cream-puffs_l_en-720p.mp4"/>
<meta property="og:video:width" content="1280"/>
<meta property="og:video:height" content="720"/>
<meta property="og:image" content="https://images.contentful.com/pxqrocxwsjcc/p4BocWGndIcE8CY6Uy4Ga/597c79eb200eec3be5aaa95364778dfe/strawberry-cream-puffs_landscapeThumbnail_en-US.jpeg?w=960&amp;fl=progressive&amp;fm=jpg"/>
<meta property="og:image:secure_url" content="https://images.contentful.com/pxqrocxwsjcc/p4BocWGndIcE8CY6Uy4Ga/597c79eb200eec3be5aaa95364778dfe/strawberry-cream-puffs_landscapeThumbnail_en-US.jpeg?w=960&amp;fl=progressive&amp;fm=jpg"/>
<meta property="og:title" content="Strawberry Cream Puffs"/>
<meta property="og:description" content="Cream Puffs, also known as profiterole or choux à la crème are made from choux pastry which will create hollow puffs while baking. "/>
<meta property="og:url" content="https://www.tastemade.com/videos/strawberry-cream-puffs"/>

Hier die verschiedenen Action Types für Videos:

og:type
og:video:type
og:video
og:video:url
og:video:secure_url
og:video:width
og:video:height

Validierung mit dem Facebook Debugger:
https://developers.facebook.com/tools/debug/og/object/

Als Button-Link
Test Video Share

Beispielcode:
 https://www.facebook.com/dialog/share_open_graph?app_id=1561091907540820&display=popup&action_type=video.watches&
action_properties={"video":"http://www.chefkoch.de/video/artikel/2990,0/Chefkoch/Halloween-Kuerbis-mit-Hackfleisch-Fuellung.html"}
&href=http://www.chefkoch.de/video/artikel/2990,0/Chefkoch/Halloween-Kuerbis-mit-Hackfleisch-Fuellung.html&redirect_uri=
http://www.chefkoch.de/video/artikel/2990,0/Chefkoch/Halloween-Kuerbis-mit-Hackfleisch-Fuellung.html

Als Script:

<script>
  document.getElementById('shareBtn').onclick = function() {
  FB.ui({
  method: 'share_open_graph',
  action_type: 'video.watches',
  action_properties: JSON.stringify({
  video:'https://www.senn-seo.de/social-media/wie-zeichne-ich-videos-mit-open-graph-tags-aus/'
  })
    }, function(response){});
     }
 </script>

Generiere den zu implementierenden Code mit dem Facebook Like-Button-Configurator:
https://developers.facebook.com/docs/plugins/like-button#configurator

 

Füge folgendes Script in der footer.php (WordPress CMS) vor dem schließenden </body>-Tag ein:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1561091907540820',
      xfbml      : true,
      version    : 'v2.6'
    });
  };

  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

 

Weitere Hilfen:
Hier kannst du deine Facebook App-ID erstellen:

https://developers.facebook.com/apps

Video-Quelle:
http://www.chefkoch.de/video/artikel/3217,0/Chefkoch/Bruschetta-italiana-traditionelle-Antipasti.html

 

(1 Bewertung, Durchschnitt: 5,00 von 5)

Loading...