Cum se integrează Facebook Open Graph Cu WordPress

Protocolul Facebook Open Graph vă permite să partajați conținutul blogului dvs. nu numai cu cititorii dvs., ci și cu prietenii lor din Facebook. Cea mai bună parte este - ori de câte ori cineva plăcut conținutul dvs., va fi publicat pe profilul lor de pe Facebook. Dar asta nu este tot, Open Graph vă permite să explorați modalități mai interesante de a interacționa și de a vă angaja cu cititorii dvs. În cele din urmă - dacă acest lucru se întâmplă corect - vă construiește brandul și crește traficul site-ului dvs..

În postul de astăzi vom examina cum să integrați Facebook Open Graph cu un WordPress găzduit de sine într-un ghid detaliat pas cu pas. Aceasta va necesita editarea temelor dvs. WordPress existente și crearea unei aplicații Facebook (dacă nu aveți una).

Gata? Să lansăm browserul și editorul dvs. de cod preferat. Ghid complet după salt.

Pasul 1. Creați o aplicație Facebook

Avem nevoie de un ID-ul aplicației și pentru a obține asta, va trebui să creați o aplicație Facebook. Dacă aveți deja unul, treceți la pasul 2.

Crearea unei aplicații este ușoară, iată ce faceți:

1. Conectați-vă la Facebook, accesați pagina dezvoltatorului.
2. Dați clic pe "Creați o aplicație nouă"din colțul din dreapta sus.
3. Dă-i un nume la noua aplicație, de acord la termenii Facebook, lovit Creați aplicația.
4. Mergi la Site Web filă, umpleți-o Adresa paginii și Site-ul site-ului.
5. Notați valoarea de ID-ul aplicației undeva și a lovit "Salvează modificările".

Asta e tot! Vă puteți întoarce întotdeauna mai târziu pentru a umple restul informațiilor.

Pasul 2. Înlocuiți Etichetă

Deschideți fișierul cu antetul temei (Header.php) în editorul dvs. preferat. Păstrați întotdeauna o copie de siguranță doar în cazul în care ceva nu merge bine.

Căutați următoarea linie de cod sau una care începe cu >

Înlocuiți-l cu:

Păstrați header.php deschis, vom avea nevoie de acesta pentru pasul 3.

Pasul 3. Introduceți OG Etichete

Lipiți următorul cod imediat după etichetă sau înainte etichetă.

      "/>          

Iată câteva dintre valorile pe care trebuie să le modificați:

• Linia 3: Înlocuiți your_fb_app_id cu ID-ul aplicației din etapa 1.
• Linia 4: Puteți obține your_fb_admin_id sub pagina dvs. Insights Facebook (Mai multe informații). Faceți clic pe "Insight pentru site-ul dvs.butonul verde, apucați întregul șir de cod și înlocuiți linia 4.
• Linia 12: Această linie determină imaginea care reprezintă postarea dvs. Dacă tema dvs. acceptă WordPress Post Thumbnails, ar trebui să funcționeze bine. Dar dacă nu, va eșua grațios fără o imagine. Consultați pasul 3a pentru o soluție alternativă.
• Linia 19: Înlocuiți logo.jpg cu o adresă URL pentru sigla blogului tău. Acesta va fi afișat atunci când o pagină non-post de pe blogul dvs. este distribuită pe Facebook.

Pasul 3a - Când "wp_get_attachment_thumb_url" eșuează

Cand wp_get_attachment_thumb_url () nu ați reușit să lucrați, probabil că veți ajunge la un atribut de conținut fără valoare, cum ar fi cel prezentat mai jos:

O soluție simplă va fi înlocuirea liniei 12 cu următorul cod:

Apoi, deschide-te functions.php și introduceți următorul cod:

funcția catch_that_image () global $ post, $ posts; $ prim_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('/ i ', $ post-> post_content, $ meciuri); $ first_img = $ meciuri [1] [0]; dacă (gol ($ first_img)) // Definește o imagine implicită $ first_img = "/images/default.jpg";  return $ first_img; 

Acest cod de înlocuire încearcă să utilizeze un apel pentru funcții catch_that_image () pentru a apuca și a afișa adresa URL a primei imagini pe care o întâlnește. Înlocuiți linia 10 cu adresa URL la o imagine implicită dacă funcția nu reușește să găsească prima sa imagine.

Pasul 4. Introduceți Javascript SDK Facebook

Următorul Javascript vă oferă acces la toate caracteristicile graficului API și a dialogurilor. De asemenea, vă permite să integrați cu ușurință pluginuri sociale Facebook, cum ar fi butonul Like, Facepile, Recomandări etc..

Pune-l înăuntru header.php, imediat dupa

A inlocui your_fb_app_id în linia 4 cu ID-ul aplicației de la Pasul 1 mai devreme.

Pasul 5. Să încercăm!

Am terminat integrarea Facebook Open Graph pe blogul WordPress. Să-i dăm câteva încercări pentru a ne asigura că am făcut lucrurile în mod corect.

Testarea # 1 - Vizualizați codul sursă

Aruncați o privire la codurile sursă ale unuia dintre postările de pe blog, ar trebui să aveți ceva de genul:

Verificați proprietățile și valorile acestora, asigurați-vă că acestea sunt corecte.

Testarea # 2 - Instalați o casetă asemănătoare

Dacă nu ați instalat un Facebook Like Button, atunci este probabil timpul să obțineți unul. Plasați următorul cod oriunde (de preferat înainte de conținut sau după conținut) în interiorul single.php:

Apoi, adu-ți un prieten Ca aceasta. Ar trebui să vedeți ceva similar care apare în profilul său de pe Facebook:

Extra: WordPress Plugin

Dacă într-un fel nu ați reușit să instalați codurile sau trebuie să faceți acest lucru rapid și ușor - există un plugin WordPress pentru asta.

Facebook Open Graph Meta în WordPress este un plug-in WordPress care adaugă meta date Facebook pentru a evita orice problemă de miniatură, problemă de titlu greșit, problemă de descriere greșită etc..