Dodavanje Open Graph protokola u Joomla. Koja je upotreba Open Graph za like dugmad? Hajde da navedemo glavne karakteristike ekstenzije?
Open Graph je koristan za korištenje na Facebooku, VKontakteu i drugim mrežama.
Idemo sada na praksu. Šta tačno webmaster treba da uradi kako bi osigurao da slika koja vam je potrebna bude snimljena?
Ako dodate novu objavu pomoću dugmadi instaliranih ručno na stranici, već ste primijetili da se bilo koja sličica uz objavu može objaviti. Uključujući brojač krpelja umjesto lijepog i posebno odabranog dizajna. Ako ga dodate ručno, možete ga, naravno, odmah ispraviti i izbjeći neprikladnu grafiku. Ali uvijek želite sve učiniti bez nepotrebnih klikova. Osim toga, sa automatskim cross-postingom, slika se ne može mijenjati.
Postoje i drugi apsurdi sa prikazom naslova, opisa i sl., pa su programeri društvenih. mreže su osmislile posebnu oznaku ]]> Open Graph ]]> .
Treba napomenuti da Yandex nudi 5 rješenja za instaliranje mikro označavanja.
Kako bi izbjegli razne incidente, webmaster može dodati sljedeće Open Graph meta oznake između oznaka
To tag dodajte putanju do xmlns, ne zaboravite staviti sav kod u zagrade:
html xmlns:og="https://ogp.me/ns#"Još jedan primjer koda, stavite kod u zagrade:
Html xmlns="https://www.w3.org/1999/xhtml" xml:lang="bs-BS" lang="bs-BS" prefix="og: https://ogp.me/ns# video : https://ogp.me/ns/video# ya: https://webmaster.yandex.ru/vocabularies/"
Gotova rješenja motora za dodavanje Open Graph meta tagova
Za WordPress dodatke:
Facebook OpenGraph Meta- preuzmite https://wordpress.org/plugins/facebook-opengraph-meta/
Opengraph i generator mikropodataka- preuzmite https://wordpress.org/plugins/opengraph-and-microdata-generator/
Za Drupal module:
Otvorite Graph meta tagove preuzmite za verzije 6 i 7 sa linka https://drupal.org/project/opengraph_meta
Modul Meta Tags konfiguriše meta oznake u Drupal 7 i neke parametre iz Open Graph protokola. Preuzmite https://drupal.org/project/metatag
Dodatak za Joomla
Easy Open Graph objavljuje malu sliku, kratku najavu i link do odjeljka interesovanja na Facebooku. Odaberite verziju Joomla i preuzmite https://extensions.joomla.org/extensions/social-web/facebook-integration/17883
Pogled og: markup kada mijenjate slike, naslove, itd., možete koristiti URL Linter alat na https://developers.facebook.com/tools/debug
Nažalost, na Internetu je vrlo malo informacija o ovom pitanju, posebno u RuNetu. Sve što nam Google može ponuditi da riješimo problem umetnuti otvoren graf protokol u joomli? Ovo je nekoliko dodataka koji vam omogućavaju da ubacite vlastite meta i head oznake. Jedan od popularnih je ITP Meta. Njegov princip rada besplatna verzija u najmanju ruku čudno. Nakon što ste kreirali članak, potrebno je da napišete meta oznake zasebno za svaki materijal. Ne želeći da trpite takav rutinski posao, predlažem da koristite moj metod.
Dakle, prije svega, da bude potpuno jasno zašto trebate instalirati Open Graph protokol za facebook u glavu Joomle. Ovako izgleda materijal bez posebnih napomena.
A ovako to izgleda sa svim potrebnim unosima. Pod suštinskim mislim na osnovno. S obzirom da ima dosta zapisa, neke od navedenih mesnih oznaka Open Graph protokola koje će biti u ovom članku nisu baš potrebne Facebooku, ali su potrebne za, recimo, Pinterest.
Dodavanje Open Graph protokola u Joomla
- idemo ovdje: /components/com_content/views/article/tmpl
- Otvorite fajl: default.php
- Zatim potražite 14. red sa komentarom: // Kreirajte prečice do nekih parametara.
- Zatim morate definirati varijablu za datum kreiranja članka. Da biste to učinili, dodajte sljedeći red bilo gdje na listi varijabli. Kao rezultat, trebala bi se pojaviti nova varijabla $datepubl. Na primjer, evo kako to radi kod mene.
Kao što vidite, sve je jednostavno. Što se tiče slika, slijedi sljedeći redoslijed: ako nema slike za uvodni dio materijala, slika se kompletan materijal, ako nije dostupan, snima se logo stranice. Naravno, morate to naznačiti tako što ćete ga zamijeniti svojim u retku "http://komarovdesign.com/images/logo_12x.png"
Zatim, također morate ručno napisati opis vaše stranice u liniji “og:site_name”. Navedite autora članka "članak:autor". U red "fb:admins" morate unijeti ID vašeg Facebook profila.
Ako ste ga pažljivo pročitali, primijetili ste da nema glavne oznake “og:description”;
- idemo ovdje: libraries/joomla/document/html/renderer/
- Otvorite fajl: head.php
- Tražimo otprilike 106. red sa komentarom: // Ne dodaj prazne opise
- I nakon glavnog opis umetnite meta oznaku Open Graph protokola. Rezultat bi trebao biti sljedeći.
Facebook je jedan od glavnih alata za povratne informacije sa posjetiteljima stranice i, naravno, alatom za promociju bilo kojeg resursa. Dugmad "Dijeli" I "Sviđa mi se" od vitalnog značaja za vaš resurs. Ali kakve informacije bi robot trebao pokupiti nije jasno. Svaka stranica je drugačija po svojoj strukturi i po čemu bi robot Facebook Nisam nasumično analizirao materijal, postoji protokol Otvorite Graf. Šta je to i kako olakšava život robotima i webmasterima?
Pokazat ću vam jasan primjer da vam bude jasno zašto trebate postaviti Otvorite Graf Za Facebook u delu glave Joomla. Ovako izgleda materijal bez posebnih unosa:
A ovako to izgleda sa svim potrebnim zapisima meta svojstava. S obzirom da postoji mnogo zapisa, neke od navedenih meta svojstava su protokolarne oznake Otvorite Graf koji će biti u ovom članku zapravo nisu potrebni Facebook, ali su obavezni za ostale društvene mreže.
Struktura vlastite izlazne oznake komponente je vrlo jednostavna:
/templates/html/component_name/view_name/markup_filename.php Pogledajmo primjere. Ako želimo da prepišemo podrazumevane oznake za izlaz članka, prvo moramo kopirati ovu datoteku: /components/com_content/views/article/tmpl/default.php na ovu lokaciju, kreirajući odgovarajuće direktorijume u slučaju da već ne postoje: /templates/template_name/html/com_content/article/default.php U datoteci default.php nakon ovog bloka: /** * @package Joomla.Site * @subpackage com_content * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. Sva prava zadržana.
* @license GNU Opšta javna licenca verzija 2 ili novija; vidi LICENSE.txt */ definisan("_JEXEC") ili umri; JHtml::addIncludePath(JPATH_COMPONENT . "/helpers"); // Kreirajte prečice do nekih parametara. $params = $this->item->params; $images = json_decode($this->item->images); $urls = json_decode($this->item->urls); $canEdit = $params->get("pristup-uređivanje"); $user = JFactory::getUser(); $info = $params->get("info_block_position", 0); JHtml::_("behavior.caption");
Dodajte sljedeći kod:
//OpenGraph start $datepubl = $this->item->created; if (isset($images -> image_intro) i !empty($images -> image_intro)) ( $timage = htmlspecialchars(JURI:: root().$images -> image_intro); ) elseif (isset($images -> image_fulltext) i !empty($images -> image_fulltext)) ( $timage = htmlspecialchars(JURI:: root().$images -> image_fulltext); ) ostalo ( $timage = "default_logo.jpg"; ) $document =& JFactory::getDocument(); if($this->item->metadesc == "") ($mmd = strip_tags($this->item->introtext);) else ($mmd = $this->item->metadesc;) $document - > addCustomTag(" escape($this -> item -> title).""/> "); //OpenGraph kraj
Kao što vidite, sve je jednostavno. Slike se prikazuju po sledećem principu - ako nema slike za uvodni deo materijala, prikazuje se slika kompletnog materijala, ako je nema, snima se podrazumevana slika. Mora biti naznačen tako što ćete ga zamijeniti svojim vlastitim u redu
$timage = "default_logo.jpg";
Glavna oznaka "og:description" se generira na sljedeći način: ako nema dovršenih meta opisnih oznaka za članak, uzima se uvodni tekst materijala.
Nakon svih ovih operacija možemo provjeriti da li smo sve uradili kako treba, alat će nam pomoći u tome Open Graph Protocol Solution
za Joomla je pionirska komponenta Joomle, koja omogućava potpunu kontrolu nad sadržajem Joomla stranica, za sve vrste postavki Open Graph Protocol.
Trenutno, verzija proširenja vam omogućava rad sa Joomla 2.5 i 3.6x. Rad sa sadržajem raznih sajtova dolazi do izražaja za sve vlasnike. Zanemarivanje ove tačke neće vam omogućiti da povećate svoje ocjene tražilice
Otkako je obim podataka na društvenim stranicama i web lokacijama koji koriste web2.0 počeo da raste, Open Graph Protocol tehnologija je zauzela jedno od važnih mjesta u upravljanju. Open Graph Protocol (OGP) omogućava programeru ili vlasnicima web stranica da integriraju svoje stranice/stranice/objave sa društvenim prometom. Koristeći OGP, može se prenijeti velika količina informacija, kao što su naslov, opis, slika, geolokacijske oznake, autor itd. OGP je postao važan entitet koji vaše stranice čini prilagođenijim društvenim medijima.
Open Graph Protocol Solution, jednom instaliran, dodaje OGP ikonu na dno uređivača članaka u Joomla backendu, gdje možete unijeti OGP oznake. Ova komponenta takođe pruža mogućnost popisivanja svih članaka radi boljeg upravljanja oznakama OGP članaka.
Navodimo glavne mogućnosti proširenja:
osnovne opcije
- Mogućnost uklanjanja iskačućih prozora;
- Ukloni RSS;
- Podrška za Ajax funkciju brisanja.
Podržane komponente:
- ComContent (menadžer artikala);
- K2 (Comk2);
- Flexi sadržaj (ComFlexicontent);
- Virtualmart (ComVirtuemart);
- DJ-katalog (Comdj-katalog);
- Zoološki vrt (ComZoo);
- Omogućavanje ili onemogućavanje bilo koje komponente od strane administratora ili dijela frontenda zasebno;
- Mogućnost konfigurisanja administratorskih funkcija za zadane otvorene oznake.
U ovom članku ćemo pogledati konkretan primjer kako implementirati Open Graph protokol (mikromarkiranje) za članke na web stranici kreirane pomoću CMS Joomla 3. Hajde da razgovaramo o glavnim oznakama, prefiksima i metapodacima ovog protokola, kao io greškama koje mogu nastati tokom rada.
Osnovne oznake Open Graph protokola
Da biste postavili Open Graph protokol na vašoj web stranici, trebate znati samo mali skup osnovnih meta oznaka koje koristi ovaj protokol. Koristeći Open Graph protokol, možete dati opis za članak, muziku, video i neke druge objekte. Ali prije nego što pričamo o raznim objektima, pogledajmo kako bi mogao izgledati pregled web stranice na društvenim mrežama, posebno kada se objavi objava na Facebooku:
Pogledajmo sada glavne oznake korištene u opisu članka, koji treba dodati isključivo između oznaka glave dokumenta:
- og:title - pomoću ove oznake možemo prenijeti naslov objave na društvene mreže;
- og:opis - kao što naziv govori, oznaka služi za prenošenje kratkog opisa posta, dužina kratkog opisa ne smije biti veća od 300 karaktera;
- og:type - označava vrstu objekta, može biti članak, muzika, video itd. U Open Graph protokolu nema toliko sličnih objekata, a ako ih ima nekoliko na stranici, navedite samo jedan za koji smatrate da je glavni;
- og:url - adresa stranice koja će se koristiti kao trajni identifikator;
- og:image - oznaka je neophodna za označavanje slike koju treba snimiti prilikom kreiranja objave. Koje bi slike trebale biti, odnosno koje veličine je prilično zanimljivo pitanje o kojem ćemo raspravljati sljedeći put;
- og:site_name - naziv stranice (njegov naziv) na kojoj su postavljene iste informacije o objektu.
Implementacija Open Graph protokola u Joomla 3
Sada pređimo na praksu i pokušajmo implementirati Open Graph protokol u našu Joomla 3 web stranicu. Ali postoji jedna kvaka - sve stranice web stranice generiraju se dinamički, kao i svaki drugi sistem za upravljanje sadržajem, stoga morate razmisliti o tome kako prenijeti potrebne informacije u glavni blok dokumenta.
Kao i uvek najviše jednostavna opcija Rješenje ovog, da tako kažem, problema bit će korištenje posebnih dodataka ( Easy Open Graph , Phoca Open Graph , Otvorite oznake grafikona , Global Open Graph ). Ali da budem iskren, nijedan od mnogih dodataka koje sam testirao nije me impresionirao, pa sam odlučio da sve uradim sam, što vam savetujem.
Kako dodati podatke u glavni blok Joomla 3 dokumenta? U tome će nam pomoći standardna klasa JDocument, uz pomoć koje možemo implementirati sve što želimo u glavni blok dokumenta. Da ne bismo tukli okolo, pogledajmo odmah kod koji treba dodati u datoteku koja odgovara izgledu članka /components/com_content/views/article/tmpl/default.php , ali prvo vam savjetujem da kreirate zamjenu (copy ovaj fajl u folder /templates/template_name/html/com_content/article ). Više detaljne informacije Ovo je pokriveno u članku “Preoglašavanje u Joomli 3”.
//Open Graph Protocol $document =& JFactory::getDocument(); if($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item-> $document -> addCustomTag(" escape($this -> item -> title)."" /> image_fulltext." /> item->created." /> item->modified."" /> ");
Kod nije komplikovan, u početku izjavljujemo da ćemo koristiti klasu JDocument, a zatim pomoću metode addCustomTag možemo dodati bilo šta u glavni dio dokumenta, u našem slučaju to će biti Open Graph meta tagovi.
Želim da se konvertujem posebnu pažnju o tome kako se formira opis publikacije, ovdje koristimo određeni uvjet za provjeru prisutnosti teksta u metaoznaci opisa, onda će se uvodni tekst materijala koristiti kao kratak opis; stranica. Za to je odgovoran sljedeći red koda:
If($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item->metadesc;) //Opis //Opis publikacije
Zatim koristeći metodu addCustomTag Počinjemo da dodajemo informacije potrebne za Open Graph protokol u zaglavlje dokumenta - naslov, opis, tip objekta, sliku, kao i datum objavljivanja i izmjene članka. Osim toga, obratite pažnju na nekretninu fb:app_id, ovo je identifikator vaše aplikacije (stranica, grupa) na društvenoj mreži Facebook, ovaj identifikator možete dobiti na stranici Alati i podrška -> Moje aplikacije -> Dodaj novu aplikaciju.
Provjera oznaka Open Graph
Nakon što je Open Graph mikro oznaka popunjena i prenesena u zaglavlje dokumenta, vrijeme je da provjerimo ispravnost njegovog rada. U ove svrhe možete koristiti validator mikro markupa iz Yandexa ili repost debugger iz Facebooka.
Počnimo s “bookfaceom”, unesite u odgovarajuće polje adresu web stranice koju želimo provjeriti i kliknite na dugme “Debug”. Ako je sve urađeno kako treba, ne bi trebalo biti grešaka, a rezultat bi trebao biti otprilike ovako:
Sada ćemo učiniti istu stvar u validatoru mikro markupa iz Yandexa, ali se pokazalo da nije sve tako sjajno, i Imam grešku koji glasi:
GREŠKA: prefiks članak je nepoznat validatoru, navedite ga eksplicitno s atributom prefiks
Ova stvar izgleda ovako:
Kakav je ovo atribut i zašto nije poznat validatoru? Ispostavilo se da je sve jednostavno, da biste se riješili takve greške, sve što trebate učiniti je eksplicitno naznačiti Yandexu da koristimo Open Graph mikromarkiranje (protokol). Da biste to učinili, morate pronaći početnu HTML oznaku u indeksnoj datoteci našeg predloška:
I zamijenite ga sljedećom linijom:
Nakon toga, greška u Yandex validatoru će nestati. Usput, može biti slučajeva kada Yandex ne voli fb prefiks umjesto članka, u tom slučaju se mora dodati dodatni red u html tag fb: http://ogp.me/ns/fb# i tako dalje:
Problemi s dupliranim oznakama Open Graph
Ako koristite neke dodatke na Joomla 3 sajtu, postoji velika verovatnoća da oni umetnu svoje metapodatke Open Graph protokola u glavu dokumenta, čak i ako nemaju nikakve veze sa ovim protokolom.
Konkretno, uspio sam saznati da dodatak mAvik Thumbnails za kreiranje pregleda slika po zadanim postavkama dodaje oznaku og:image u glavu dokumenta, i prvu sliku iz tijela članka, i njegovu smanjenu kopiju, se uzima kao vrijednost. Ovo možete provjeriti tako što ćete pogledati snimak ekrana rezultata verifikacije mikro oznaka u Yandex validatoru (snimak ekrana iznad). Štaviše, čini se da niko ne traži od njega da doda baš ovu oznaku, ali on to ipak čini.
Naravno, ovo nije greška programera dodataka, jer će možda nekome biti od koristi, ali ja ga se ipak radije riješim. Dakle, da biste uklonili ponovljeni meta tag og:image, trebate samo napraviti male promjene u postavkama dodatka mAvik Thumbnails. Da biste to učinili, na kartici "Kontekst" trebate postaviti prekidač "Dodaj og:image meta tag" na poziciju "Ne dodaj", nakon čega će se duplikat meta tag og:image ukloniti:
Ovo je oznaka stranice (posebno Joomla materijal) korištenje Open Graph protokola je završeno, kao što vidite, ovdje nema ništa komplikovano i nema potrebe za korištenjem dodatnih dodataka za koje se još ne zna šta mogu dodati kodu stranice.
Društvena mreža VKontakte ne prihvata kratak opis (opis)
Nakon implementacije Open Graph-a, svi će vjerovatno primijetiti jednu neugodnu osobinu prilikom objavljivanja zapisa socijalna mreža U kontaktu sa. Činjenica je da upravo ova mreža, prilikom kreiranja pregleda (isječaka), tvrdoglavo odbija uzeti u obzir Kratki opis artikla naveden u polju za opis. Sve ostale društvene mreže to rade, ali VKontakte odbija.
Da bih shvatio razlog ove pojave, odlučio sam da postavim pitanje službi podrške, na koje sam dobio sasvim razumljiv odgovor:
Od jeseni pretprošle godine, isječci više nemaju opise. Ovo je svjesna odluka programera; očigledno vezano za kompromise u vezi sa web dizajnom i pitanjima interfejsa. Po njihovom mišljenju, smisleni tekst gotovo nikada nije bio stavljen tamo;
Ispostavilo se da je VKontakte namjerno prestao da uzima kratke opise u svoje isječke od jeseni 2016. Šteta, naravno, ali šta možete učiniti? Dakle, ako primijetite sličan problem, znajte da niste krivi vi, već neke zabrane na društvenoj mreži.
U zaključku, želio bih napomenuti da pored Open Graph protokola, postoje mnogi drugi formati mikropodataka, posebno Schema.org, o čemu smo govorili u članku “
