Kuinka nopeasti lisätä Facebook Open Graph- ja Twitter-kortteja Joomlalle

Tässä artikkelissa keskustelemme siitä, miten Facebook Open Graph- ja Twitter-kortit lisätään Joomlaan ilman laajennusta tai moduulia.

Jos et ole asunut kiven alla viimeisen vuosikymmenen aikana, olet todennäköisesti nähnyt hyvin usein ihmisiä jakamassa Facebookissa artikkeleita, joissa on mukava kuva ja otsikko, ja vastaavaa Twitterissä suurilla kauniilla korteilla, joissa on suuri kuva.

Paras tapa hallita tätä on toteuttaa niin sanottu Avaa kaavio protokolla. Tämä on joukko tunnisteita, jotka antavat vihjeitä Twitterille, Facebookille ja muille indeksoijille, mitä sisältöä heidän tulisi käyttää.

Voit tehdä tämän helposti Joomlassa asentamatta kolmannen osapuolen laajennusta luomalla mallin ohituksen.

Näin voit tehdä tämän:

Twitter-kortit Joomla

Kun otat Twitter-kortteja käyttöön Joomla-avoimen kaavion tunnisteiden avulla - sen sijaan, että kuva näytetään satunnaisesti tai kuvaa ei ole lainkaan, Joomla-artikkelisi ehdottaa parasta käytettävää kuvaa.

Katso alla oleva esimerkki CollectiveRay Twitter-syöte.

Esimerkki Facebook Open Graphista

Toisaalta - Facebookissa Joomla Open Graph -tagien avulla jakamasi viestisi näyttävät alla olevilta.

Kuinka ottaa Joomla Open Graph -tagit käyttöön

1. Luo artikkelien mallin ohitus

Laajennukset> Mallit> Mallit> (mallisi) Tiedot ja tiedostot> Luo ohitukset> Komponentit> com_content> artikkeli

Kun olet luonut artikkelimallin ohituksen, voit lisätä metatiedot ohitukseen, jota käytetään artikkelisi näyttämiseen. Pohjimmiltaan sinun on lisättävä seuraava sisältö artikkeliin siten, että metatiedot noudetaan artikkelistasi.

2. Lisää Facebook / Twitter Open Graph -metatiedot

Valitse Laajennukset> Mallit> Mallit> (mallisi) Tiedot ja tiedostot> Editori> html> com_content> artikkelit> default.php

Lisää alla oleva koodi PHP-tunnisteiden väliin: - Ole varovainen, jos haluat lisätä tämän, saatat rikkoa mallisi väliaikaisesti, jos lisäät sen väärään paikkaan ... joten tee täydellinen varmuuskopio tiedostosta, ennen kuin teet mitään näistä muokkauksista

if (isset($images->image_intro) and !empty($images->image_intro))
{
  $timage= htmlspecialchars(JURI::root().$images->image_intro);
}
elseif (isset($images->image_fulltext) and !empty($images->image_fulltext))
{
  $timage= htmlspecialchars(JURI::root().$images->image_fulltext);
}
else
{
  $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
}
$doc =& JFactory::getDocument();
$doc->addCustomTag( '
  <meta name="twitter:title" content="'.$this->escape($this->item->title).'">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@DARTCreations">
  <meta name="twitter:creator" content="@DARTCreations">
  <meta name="twitter:url" content="'.str_replace('" ','&quot;',JURI::current()).'"="">
  <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'">
  <meta name="twitter:image" content="'.$timage.'">
  <meta property="og:title" content="'.$this->escape($this->item->title).'"/>
  <meta property="og:type" content="article"/>
  <meta property="og:email" content="info@dart-creations.com";/>
  <meta property="og:url" content="'.str_replace('" ','&quot;',juri::current()).'"="">
  <meta property="og:image" content="'.$timage.'"/>
  <meta property="og:site_name" content="DARTCreations"/>
  <meta property="fb:admins" content="xxxxxxxxxxx"/>
  <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');

3. Mukauta Open Graph -tagit omiin arvoihisi

Yllä oleva koodi on räätälöity CollectiveRay, joten ilmeisesti muokkaa arvoja kohteille, jotka haluat omalle sivustollesi.

Nämä ovat linjat, jotka sinun on muutettava:

$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';

Tämän pitäisi olla oletuskuvan sijainti, jos artikkelissasi ei ole intro- tai kokotekstikuvaa.

  <meta name="twitter:site" content="@DARTCreations">
  <meta name="twitter:creator" content="@DARTCreations">

Yllä oleva @ arvo tulisi muuttaa vastaamaan Twitter-käyttäjänimeäsi.

<meta property="og:email" content="info@dart-creations.com";/>

Yllä oleva sähköpostiosoite tulisi päivittää omaksi sähköpostiosoitteeksi.

Yllä oleva tulisi päivittää sivustosi nimeksi.

Sen sijaan, että xxxxxxxxxxx fb: admins -tunnisteen, sinun on annettava sen Facebook-käyttäjän numeerinen tunnus, joka suorittaa sellaista, kuten Page Insights. Voit löytää numeron etsimällä sellaista työkalua kuin tämä työkalu - löytää Facebook-tunnukseni.

Lukijan ehdotus:

Eddie ehdotti, että voit rajoittaa kuvauksen pituuden tiettyyn merkkimäärään, jos käytät alla olevaa koodia:

Haluat ehkä rajoittaa kuvauksen pituuden noin 45 merkkiin käyttämällä mb_strimwidth tai substraattia seuraavasti:

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or 

Ed on myös tehnyt toisen ehdotuksen, jonka avulla voit itse valita tiedot artikkelin metakuvauksesta, mikä on melko hieno ehdotus.

Olen muokannut koodia hieman ja sain seuraavat:

.

Tämän tuottaa tämä koodi (huomautus ">" on poistettu):

<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('description')), 0,45, "..."). '"=" "/>

Voit nähdä, että saan metakuvauksen, rajoitettu 45 merkkiin, ja lisäämällä ellipsiä, jos kuvaus on katkaistu. Tällä tavoin voin "napsauttaa syöttiä" kuvaukseni parempaan napsautussuhteeseen pitäen intro-tekstini luettavissa verkkosivustoni "tyylin" tai "äänen" mukaisesti. Käyttämällä metakuvausta voin myös lisätä osan tästä koodista myös luokkien ohitukseen!

Toinen lukija: Thomas Meredith kommentoi alla olevaa koodia

oli haavoittuvainen XSS-haavoittuvuuksille ja oikean koodin tulisi olla: 

<meta property="og:url" content="'.str_replace('" ','&quot;',JURI::current()).'"= "">

Olemme päivittäneet koodin tällä korjauksella, ja sinun pitäisi tehdä samoin.

Lisää päivityksiä vierailijoiltamme

Jos seuraat alla olevaa keskustelua, huomaat, että vaikka yllä oleva koodi toimii useimmissa tilanteissa, on tiettyjä tapauksia, joissa koodi ei toimi. Michael N8 Solutionsista otti itselleen tehtävän löytää ratkaisu niihin tilanteisiin, joissa tämä ei toiminut. 

Avoimen lähdekoodin Joomla-yhteisön hengessä he jakoivat koodin muille kävijöille alla olevissa kommenteissa. Toistan koodin ja Michaelin kommentit sanatarkasti, selkeyden vuoksi:

Pystyin ratkaisemaan ongelman paitsi "Yhteystiedot" -sivulla myös "Blogi" ja "Esittelyssä" -valikkokohdesivuilla.

Ensinnäkin, mitä kirjoitin yllä Yhteyssivulle, "Nimen" nappaamiseksi, kontakti tallennetaan toimivan. "Twitter: title" & "og: title" pitäisi näyttää tältä, jos haluat käyttää kontaktin tallennettua nimeä.

<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />

Jos kuitenkin haluat käyttää valikon tietoja, voit tehdä sen tällä uudella koodilla, joka toimii myös "Blog" - ja "Featured" -valikkokohdesivuilla.
Voit käyttää "Valikon nimi", "Selaimen sivun otsikko" tai "Sivun otsikko". Haluan käyttää sivun otsikkoa mieluummin ja asettaa valikon näyttämään sivun otsikkoa. Tällä tavoin voin hyödyntää Sivun otsikko avointa kuvaajaa varten haluamallani tavalla, koska se ei näy missään muualla, toisin kuin valikon tai selaimen sivun otsikko.

Tätä varten sinun on lisättävä koodi "$ timage" ja "$ doc" yläpuolelle.

$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');

Sitten sinun tulisi korvata "twitter: title" ja "og: title" koodi tällä koodilla, jotta voit käyttää "Sivun otsikkoa".

<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />

Jos haluat sen sijaan käyttää "Valikon nimi" tai "Selaimen sivun otsikko", korvattaisit koodissa "$ pageheading" joko "$ title" käyttääksesi valikon otsikkoa tai "$ browserpagetitle" käyttääksesi selainta Sivun otsikko.

Voit luoda ohitukset täältä:
Luo Ohitukset> Komponentit> com_content> -luokka
Luo Ohitukset> Komponentit> com_content> Esitetyt
Luo Ohitukset> Komponentit> com_contact> kontakti

Muokkaa sitten ohituksia lisäämällä yllä oleva koodi omiin paikkoihinsa:
Editori> html> com_content> kategoria> blog.php
Editori> html> com_content> varusteltu> default.php
Editori> html> com_contact> contact> default.php

Poistin myös Open Graph Image -komennon "if", jättäen vain perusrivin:

$timage= 'https://www.domain.com/custom-open-graph-image.jpg';

Tein tämän, koska "if" -lauseke ei ole välttämätön näille sivuille, koska ei ole intro-kuvaa tai kokoteksti-kuvaa.

Toinen tärkeä asia "Kuvauksissa".

YHTEYSTIEDOT:

"Twitter: description" & "og: description" -yhteystietosivun koodissa "introtext" on korvattava "metadesc", jotta tartutaan kontaktille asetettuun metakuvaukseen. Jos et määritä kuvausta yhteystiedolle, avoimen kaavion kuvaustunnisteissa ei näytetä mitään.

BLOGI- JA SUORITETTAVAT artikkelit:
Aivan kuten yllä yhteyshenkilöille, "twitter: description" ja "og: description", "tekstiteksti" on korvattava yllä olevalla Eddie-koodilla, jotta saat napata metakuvauksen, joka on asetettu joko blogille tai Featured Article -valikkokohdalle. Jälleen kerran, jos et aseta kuvausta siellä, mitään ei näytetä. Joten sinun ei tarvitse etsiä sitä, tässä on yllä annettu koodi Eddie ja miltä kuvausrivien pitäisi näyttää.

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />

Haluan vaihtaa mieluummin merkin pituuden 45: stä 160: een, koska en ole kiinnostunut "Syötti napsauttaminen" -potentiaalisista sivuston vierailijoista.

Toivottavasti tästä on hyötyä muille!

4. Testaa Twitter-validatorilla ja Facebook Linterillä 

Tarkista verkkosivustosi artikkeli Twitter-vahvistimen avulla: https://cards-dev.twitter.com/validator 

ja

Facebook Linter:  https://developers.facebook.com/tools/debug/

Ja näin lisäät Open Graph -metatiedot Joomla-artikkeleihisi :)

Usein kysytyt kysymykset

Mikä on Open Graph Protocol?

Open Graph -protokolla on tapa antaa verkkosivustojen hallita mitä sisältöä näytetään, kun niiden verkkosivustojen sisältö jaetaan Facebookissa, Twitterissä tai muilla Open Graph -ystävällisillä alustoilla. Jos verkkosivustosi ei käytä näitä tunnisteita, alusta voi päättää näytettävän kuvan ja näyttää todennäköisesti etuyhteydettömän kuvan.

Käyttääkö Google Open Graphia?

Mikään Google ei käytä Open Graph -protokollaa hakukoneiden tulossivuilla. Sen sijaan se käyttää Jäsennelty tieto, joka on toinen tapa antaa indeksoijien ymmärtää paremmin verkkosivustosi sisältöä. Vaikka Google ei käytä OG-tunnisteita sinänsä, verkkosivustosi liikenne on sijoitussignaalia, joten todennäköisesti hyödyttää orgaanisia sijoituksiasi, jos sinulla on sosiaalisen median ystävällinen verkkosivusto.

Kuinka asetat Open Graph -tunnisteet Joomlassa?

Jos haluat asettaa avoimia kaaviotunnisteita Joomlassa, voit käyttää mallien ohituksia ja täyttää tunnisteet artikkeleidesi sisällöstä, kuten olemme kuvanneet yllä olevassa artikkelissa. Vaihtoehtoisesti voit asentaa laajennuksen, joka pystyy luomaan nämä tunnisteet automaattisesti verkkosivustosi sisällöstä.

Kuinka tarkistat Open Graph -tagit?

Voit tarkistaa Open Graph -tunnisteet käyttämällä joko Facebook Linter- tai Sharing Debugger -ohjelmaa tai Twitter-kortin vahvistajaa.

kirjailijasta

Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/Sähköposti: David@collectiveray.com

David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.