Web Sitelerinde Facebook Videolarını Oynatma Özellikleri

Sitelerde Facebook Videoarı Oynatma Özellikleri


En çok kullanılan sosyal medya ortamı Facebook servisinden istediğiniz videoları sitenize ve blogger blogunuza eklemeniz mümkün. Bir çok webmaster standart ekleme yollarını tercih etsede bazı durumlarda özelleştirme yapmak gerekiyor. Şimdi neler yapabileceklerimize beraber bakalım...

Öncelikle Facebook dan ilgili videonun embedded kodunu almamız gerekiyor. Burada dikkat etmemiz gereken nokta paylaşılan videonun " Herkese Açık " bir şekilde paylaşılmış olması gerekir.

Facebook Videolarını Siteme / Bloguma Nasıl Eklerim , Nasıl Özelleştiririm ?


1-) Site yada blogunuza varsayılan düzende eklemek için :

Videonun üst sağda bulunan açılır pencere okunu tılayın.
Açılan pencereden " Gönderiyi Sitene Göm " alnına tıklayın.


Çıkacak olan pencereden ilgili kodları kopyalayın. Size maalesef flash yapıda bir kod verecektir. bu kodu kopyalayarak sitenizde yayınlayabilirsiniz.

<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/tr_TR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-post" data-href="https://www.facebook.com/video.php?v=914517535277555" data-width="500">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/video.php?v=914517535277555">
<br /></blockquote>
</div>
</div>
<iframe frameborder="0" height="360" src="http://www.facebook.com/video/embed?video_id=914517535277555" width="540"></iframe>


Bu kodu direk HTML olarak yayınladığınızda video ve ilgili içerik birlikte yayınlamakta olursunuz.

Yani video şöyle gözükecektir.



2-) Site yada blogunuza özelleştirilebilir kod ile eklemek için :

Neyseki facebook denen emperyalizmin kapitalist oyuncağı HTML5 desteği vermektedir.

Facebook dan aldığımız kod :

<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/tr_TR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-post" data-href="https://www.facebook.com/video.php?v=914517535277555" data-width="500">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/video.php?v=914517535277555">
<br /></blockquote>
</div>
</div>
<iframe frameborder="0" height="360" src="http://www.facebook.com/video/embed?video_id=914517535277555" width="540"></iframe>



HTML5 içine ekleyebiliyoruz

<iframe width="560" height="315" src="http://www.facebook.com/video/embed?video_id=***" frameborder="0" allowfullscreen></iframe>


id=*** : İlgili yer ile facebook videosunun id nosunu ekliyoruz, örneğin 914517535277555 gibi

Yani kodumuz

<iframe width="560" height="315" src="http://www.facebook.com/video/embed?video_id=914517535277555" frameborder="0" allowfullscreen></iframe>


Şekline gelmelidir.


iframe : Çerçeveye alınmış alanı temsil eden etikettir.

width="560" : Video çerçevesinin genişliğidir ve 560 px değerindedir. İstenilen boyuta ayarlanabilir.

height="315" : Video çerçevesinin yüksekliğidir ve 315 px değerindedir. İstenilen boyuta ayarlanabilir.

src="http://www.facebook.com/video/embed?video_id=914517535277555" : İlgili videonun embed yani gömüldüğü adrestir.

frameborder="0" : Çerçevenin kenarlık etiketi 1 kenarlık var, 0 kenarlık yok anlamındadır.

allowfullscreen : Tam ekran görünümüne izin vermek anlamındadır.



Böylece facebook videsunu sitemizde gösterme özelliği vermiş olduk.
HTML olarak kodu istediğimiz yere ekleyebiliriz. Tıklamadan başlamayacağını unutmayın.

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için : 
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.


Yorumlar

  1. Adsız15.4.15

    TEŞEKKÜRLER ÜSTAD YİNE GÜZEL VE FAYDALI BİR PAYLAŞIM OLMUŞ

    YanıtlaSil

Yorum Gönder

🔺 YUKARI ÇIK 🔺