Vložení videa z Facebooku

Pokud chceme na vlastní web vložit Facebook video, existuje k tomu na stránce s videem možnost Embed post.

Embedování videa

To nám připraví HTML kód a JavaScript, který připojí Facebook SDK, které oživí video.

<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/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" 
data-href="https://www.facebook.com/video.php?v=796588687069516" 
  data-width="466"
>
  <div class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/video.php?v=796588687069516">Post</a> by <a href="https://www.facebook.com/jecas.cz">Je čas</a>.
  </div>
</div>

Po vložení na stránku to vypadá takto (živá ukázka):

Ukázka embedování videa

Nevýhoda tohoto postupu je, že výše uvedený kód vytvoří 34 HTTP požadavků a stáhne cca 0,5 MB dat.

Vložení jako <iframe>

Na rozdíl od YouTube není snadno k disposici možnost vložit video na vlastní web pomocí <iframe>. Naštěstí se ale k universálnímu kódu pro <iframe> dá dopátrat skrze Graph API.

<iframe 
  src="https://www.facebook.com/video/embed?video_id=796588687069516"
  width="480" height="270" frameborder="0"
>
</iframe>

Samostatná ukázka

URL stránky vložitelné do frame je tedy: https://www.facebook.com/video/embed?video_id=796588687069516

Tento způsob je sice o trochu úspornější než předchozí – 22 požadavků a 0,43 MB, ale pořád to není žádná sláva.

Výhoda ale spočívá v tom, že s <iframe>m půjde snáze provést lazy loading.

Lazy loading

Podobně jako u videí z YouTube můžeme vytvořit na stránce atrapu, která <iframe> s videem načte až na vyžádání.

Bohužel v tomto případě půjde obtížněji získat náhled videa. Neexistuje nějaká universální adresa, kde by stačilo změnit ID a obrázek by byl na světě. URL obrázku jde získat jedině přes Graph API.

Získání URL obrázku

Automatické přehrávání Facebook videa

Spustit video rovnou při načtení není normálně dosažitelné. Jde ale využít mobilní verse, kde to funkční je (ukázka).

<iframe 
  src="https://m.facebook.com/video/video.php?v=796588687069516" 
  frameborder="0" 
  allowfullscreen
>
</iframe>

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatický lazy-loading YouTube videí

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

Facebook Like, Google Plus a Twitter tlačítka

Tlačítka pro sdílení na sociálních sítích

Různé možnosti, jak mít na webu tlačítka pro sdílení na sociálních sítích.

Odeslání příspěvku přes Facebook API

Odeslání příspěvku na stránku přes FB API

Jak v PHP odesílat příspěvky na Facebook stránku (Page) pomocí Facebook API.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Náhledy videa

Více náhledů videa

Jak při najetí myší na náhled videa zobrazovat další náhledy.

Komentáře