Facebook video on Wordpress

În urmă cu câteva zile citeam pe blogul lui Francisc un articol despre “Cum pui în Wordpress un film de pe Facebook?“. Francisc prezenta pentru cititorii săi, metoda “Embed Post” oferită de către cei de la Facebook, pentru a adăuga filmulețe video de pe Facebook, pe Wordpress.
Ei bine, am explicat și acolo (în comentarii) că metoda prezentată de Facebook este într-adevăr una “ușoară” pentru utilizatorii de WP mai puțin “avizați”, însă personal nu-mi place pentru că încarca fără rost baza de date a siteului. Cum? Simplu. Practic, același cod va fi adăugat în baza de date pentru fiecare filmuleț de pe Facebook pe care-l adăugați pe Wordpress!

Există bloggeri care au ceva vechime în “online” (ani de zile) iar în tot acest timp au scris o mulțime de articole. Dacă vă numărați printre cei care obișnuiți să utilizați frecvent filmulețele de pe Facebook în articolele voastre și utilizați metoda “Embed Post” oferită de Facebook, trebuie să știți că același cod va fi adăugat de fiecare dată când adăugați un filmuleț în articol! În timp, toate aceste coduri vor însemna o parte semnificativă (ca spațiu) din baza voastră de date, bază de date care pe măsură ce devine mai mare, va deveni tot mai greu de “citit” iar asta va duce la mărirea consumului de resurse de pe serverul pe care este găzduit blogul. Și uite-așa, site-ul vostru va începe să se încarce pe zi ce trece tot mai greu, iar cei de la firma de hosting vă vor trimite un mail de amor de avertizare că depășiți consumul de resurse alocat și că trebuie să vă optimizați siteul, ori că trebuie să alegeți un abonament mai mare deoarece site-ul vostru consumă prea multe resurse pentru un cont de “shared hosting”.

Ei bine, “optimizarea” unui site web se face în pași mărunți, în timp și cu foarte multă răbdare, iar gestionarea bună a resurselor și a codului fac parte din această “optimizare”. Pentru a rezolva problema încărcării fără rost a bazei de date cu coduri/scripturi adăugate de o mie de ori, soluția este să găsim o metodă prin care, cât mai puțină informație de acest gen să fie scrisă în baza de date. Iar pentru adăugarea filmulețelor de pe Facebook pe Wordpress, am creat o funcție cu ajutorul căreia veți putea adăuga foarte ușor filmulețe video de pe Facebook pe Wordpress, fără să copiați întreg codul “embed” oferit de Facebook.

Ce aveți de făcut? Este simplu …

Va trebui să creați un fișier .js care să conțină următorul script Java:

1
2
3
4
5
6
7
8
9
10
11
12

window.fbAsyncInit = function() {
    FB.init({
        xfbml      : true,
        version    : 'v2.3'
    });
    }; (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'));

Denumiți fișierul astfel: facebook_videos.js

Apoi, încărcați fișierul “facebook_videos.js” în folderul “/js” pe contul vostru de hosting.
Dacă aveți deja creat un director “/js“, atunci încărcați fișierul “facebook_videos.js” în directorul deja existent.
Dacă nu aveți încă un director “/js” creat în “root” (/), atunci creați voi directorul “/js” în “root”.

Deschideți fișierul “header.php” al temei voastre și căutați următorul cod:

1

</head>

Deasupra lui, adăugați acest cod:

1

<script src="/js/facebook_videos.js" type="text/javascript"><!--mce:0--></script>

Apoi, deschideți fișierul “functions.php” al temei voastre și undeva la final, adăugați următorul cod:

1
2

function fbv_shortcode( $atts, $content = null ) { return '<center><div class="fb-video" data-href="https://www.facebook.com/video.php?v='.$content.'" data-width="450" data-allowfullscreen="true"></div></center>';
} add_shortcode( 'fbv', 'fbv_shortcode' );

În funcție de layout-ul temei voastre, puteți modifica data-width=”450″ cu ce dimensiune doriți, pentru ca filmulețul video să fie încadrat bine în pagina voastră. Dacă aveți instalat ceva plugin de cache, atunci va trebui să goliți cache-ul pentru a vă asigura că noile date sunt încărcate din fișierele modificate și nu din cache-ul existent.

Iar acum, pentru a adăuga un filmuleț în articolul vostru de pe blog, pur și simplu mergeți pe pagina filmulețului și copiați ID-ul filmulețului video de pe Facebook …

Pe Facebook, dați click pe link-ul “video” al filmulețului pe care vreți să-l adăugați pe blog:

De pe pagina filmulețului, din bara de adrese a browserului, copiați doar ID-ul filmulețului:

Acest ID îl introduceți în articolul vostru, între tagurile “fbv“, astfel:

[fbv]ID[/fbv]

EXEMPLU:

[fbv]1194611790554701[/fbv]

Rezultatul obținut va fi acesta:

Succes!