Hvernig á að bæta fljótt Facebook Open Graph og Twitter Cards við Joomla

Í þessari grein ætlum við að ræða hvernig bæta á Facebook Open Graph og Twitter Cards við Joomla án viðbótar eða einingar.

Ef þú hefur ekki búið undir kletti undanfarinn áratug eða svo, þá hefurðu líklega mjög oft séð fólk deila greinum á Facebook með flottri mynd og titli og svipaðan hlut á Twitter með stórum fallegum kortum sem sýna stórt mynd.

Besta leiðin til að stjórna þessu er að innleiða það sem kallað er Opna línurit siðareglur. Þetta er sett af merkjum sem gefa Twitter, Facebook og öðrum skriðveiðum vísbendingar um hvaða efni þeir ættu að nota.

Þú getur auðveldlega gert þetta í Joomla án þess að setja upp neina viðbót frá þriðja aðila með því að búa til sniðmát fyrir sniðmát.

Svona á að gera þetta:

Twitter kort Joomla

Þegar þú innleiðir Twitter kort með Joomla opnum línuritum - frekar en að mynd sést af handahófi, eða alls engin mynd, mun Joomla greinin þín gefa til kynna bestu myndina til að nota.

Sjá dæmið hér að neðan úr CollectiveRay twitter fæða.

Dæmi um Facebook Open Graph

Á hinn bóginn - á Facebook, með Joomla Open Graph merkjum, munu færslurnar þínar þegar þeim er deilt líta út eins og hér að neðan.

Hvernig á að virkja Joomla Open Graph merki

1. Búðu til sniðmát fyrir greinar

Viðbætur> Sniðmát> Sniðmát> (sniðmátið þitt) Upplýsingar og skrár> Búa til ofgnótt> Íhlutir> com_content> grein

Þegar þú hefur búið til greiningu sniðmát greinarinnar geturðu bætt lýsigögnum við hnekkjuna sem á að nota til að birta grein þína. Í meginatriðum þarftu að bæta eftirfarandi efni við greinina þannig að lýsigögnin séu tekin upp úr greininni þinni.

2. Bættu við lýsigögnum fyrir Facebook / Twitter Open Graph

Farðu í viðbætur> Sniðmát> Sniðmát> (sniðmátið þitt) Upplýsingar og skrár> Ritstjóri> html> com_content> greinar> default.php

Bættu kóðanum hér að neðan efst á milli php tags: - passaðu þig svolítið hvar á að bæta þessu við, þú gætir brotið sniðmát þitt tímabundið ef þú bætir því við á röngum stað ... svo taktu öryggisafrit af skránni að fullu áður en þú framkvæmir einhverjar af þessum breytingum

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. Aðlaga Open Graph merkin að gildum þínum

Ofangreindur kóði er sérsniðinn að CollectiveRay, svo augljóslega breyttu gildunum í þau atriði sem þú vilt fyrir þína eigin síðu.

Þetta eru línurnar sem þú þarft að breyta:

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

Þetta ætti að vera staðsetning sjálfgefinnar myndar, ef greinin þín hefur ekki kynningarmynd eða mynd í fullum texta.

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

Ofangreindu @ gildi ætti að breyta til að endurspegla Twitter notandanafn þitt.

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

Ofangreint netfang ætti að vera uppfært á eigið netfang.

Ofangreint ætti að uppfæra í heiti vefsvæðisins.

Í staðinn fyrir xxxxxxxxxxxx af merkinu fb: admins þarftu að slá inn númer auðkennis Facebook notandans sem mun framkvæma efni eins og Page Insights. Til að finna númerið gætirðu viljað skoða slíkt tæki sem þetta tól - finna Facebook auðkenni mitt.

Tillaga lesanda:

Eddie lagði til að þú gætir takmarkað lengd lýsingarinnar við tiltekinn fjölda stafa ef þú notar kóðann hér að neðan:

Þú gætir viljað takmarka lengd lýsingarinnar við c.45 stafi með því að nota mb_strimwidth eða substr svona:

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

Ed hefur einnig komið með 2. tillögu sem gerir þér í raun kleift að velja gögnin úr metalýsingu greinarinnar, sem er ansi frábær tillaga.

Ég hef lagfært kóðann aðeins og hef eftirfarandi:

.

Þetta er framleitt með þessum kóða (athugið ">" er svipt út):

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

Þú sérð að ég er að fá metalýsinguna, takmörkuð við 45 stafi, og bæta við sporbaug ef lýsingin er stytt. Þannig get ég „smellt beitu“ lýsingu minni til að fá betri smellihlutfall á meðan ég held að intro textinn minn sé læsilegur í samræmi við „stíl“ eða „rödd“ vefsíðu minnar. Með því að nota metalýsinguna get ég líka bætt einhverjum af þessum kóða við ofgnótt fyrir flokka líka!

Annar lesandi: Thomas Meredith sagði hér að neðan að kóðann

var viðkvæmt fyrir XSS veikleika og rétti kóðinn ætti að vera: 

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

Við höfum uppfært kóðann með þessari leiðréttingu og þú ættir að gera það líka.

Fleiri uppfærslur frá gestum okkar

Ef þú fylgist með samtalinu hér að neðan kemstu að því að jafnvel þótt ofangreindur kóði virki í flestum aðstæðum eru ákveðin dæmi þar sem kóðinn virkar ekki. Michael frá N8 lausnum, tók að sér að finna lausn fyrir þau tilfelli þar sem þetta virkaði ekki. 

Í anda Joomla samfélagsins með opnum heimildum deildu þeir kóðanum með restinni af gestunum í athugasemdunum hér að neðan. Ég er að afrita kóðann og athugasemdir Michaels orðrétt, til glöggvunar:

Mér tókst að leysa vandamálið ekki aðeins fyrir „Tengiliðasíðuna“ heldur einnig fyrir „Blog“ og „Valin“ síðurnar í matseðlinum.

Í fyrsta lagi það sem ég skrifaði hér að ofan fyrir tengiliðasíðuna, fyrir að grípa í „nafnið“ er tengiliðurinn vistaður eins og gengur. „Twitter: title“ & „og: title“ ætti að líta svona út ef þú vilt nota vistað nafn tengiliðarins.

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

Hins vegar, ef þú vilt nota upplýsingarnar úr valmyndinni geturðu gert það með þessum nýja kóða sem mun einnig virka fyrir „Blog“ og „Valin“ síður matseðilsins.
Þú getur valið að nota „Valmyndarheiti“, „Titill vafrans“ eða „Fyrirsíðu síðu“. Ég vil frekar nota síðufyrirsögnina og stilla valmyndina til að sýna ekki síðufyrirsögnina. Þannig get ég nýtt síðufyrirsögnina fyrir Open Graph eins og ég vil þar sem hún birtist ekki annars staðar en ólíkt titlinum í valmyndinni eða titill vafrans.

Til að gera þetta þarftu að bæta kóðanum hér að neðan á milli „$ timage“ og yfir „$ doc“.

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

Síðan ættir þú að skipta um kóða fyrir „twitter: title“ & „og: title“ fyrir þennan kóða hér að neðan til að nota „Page Heading“.

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

Ef í staðinn, vilt þú nota „Valmyndarheiti“ eða „Vafra blaðsíðuheiti“, í kóðanum sem þú myndir skipta um „$ pageheading“ með annað hvort „$ title“ til að nota valmyndartitilinn eða „$ browserpagetitle“ til að nota vafrann Síðuheiti.

Þú getur búið til ofgnóttina hér:
Búðu til ofgnótt> Íhlutir> com_content> flokkur
Búðu til ofgnótt> hluti> com_content> lögun
Búðu til ofgnótt> Íhlutir> com_contact> tengiliður

Breyttu síðan hnekkjunum, bættu kóðanum hér að ofan, á viðkomandi stöðum:
Ritstjóri> html> com_content> flokkur> blog.php
Ritstjóri> html> com_content> featured> default.php
Ritstjóri> html> com_contact> tengiliður> default.php

Ég fjarlægði einnig „ef“ yfirlýsinguna fyrir Open Graph Image og skilur aðeins eftir grunnlínuna:

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

Ég gerði þetta vegna þess að „ef“ yfirlýsingin er ekki nauðsynleg fyrir þessar síður þar sem engin kynningarmynd eða mynd í fullum texta er til.

Annað sem skiptir máli varðandi „Lýsingar“.

Fyrir samskipti:

Í kóðanum fyrir tengiliðasíðuna fyrir „twitter: lýsingu“ og: og: lýsingu „þarf að skipta um„ innri texta “fyrir„ metadesc “til að ná í lýsinguna á meta sem er stillt fyrir tengiliðinn. Ef þú stillir ekki lýsingu fyrir tengiliðinn mun ekkert birtast fyrir opnu línuritið.

Fyrir BLOG & EIGINLEGAR greinar:
Rétt eins og hér að ofan fyrir tengiliðina þarf að skipta um „twitter: description“ & “og: lýsinguna„ introtext “fyrir kóða Eddie hér að ofan til að ná í lýsinguna á Meta sem er stillt fyrir annaðhvort bloggið eða valin atriði í valmynd greinarinnar. Aftur, ef þú setur ekki lýsingu þar þá birtist ekkert. Svo þú þarft ekki að leita að því, hér er kóðinn sem Eddie gaf hér að ofan og hvernig lýsingarlínurnar ættu að líta út.

<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, " ...").'" />

Ég kýs að breyta stafalengdinni úr 45 í 160 þar sem ég hef ekki áhuga á „Bait Clicking“ hugsanlegum gestum á síðunni.

Ég vona að þetta sé gagnlegt fyrir aðra!

4. Prófaðu gegn Twitter löggildingunni og Facebook Linter 

Athugaðu greinina á vefsíðu þinni gegn Twitter löggildingunni: https://cards-dev.twitter.com/validator 

og

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

Og þannig bætirðu við Open Graph lýsigögnum við Joomla greinar þínar :)

Algengar spurningar

Hvað er Open Graph Protocol?

Open Graph samskiptareglan er leið til að leyfa vefsíðum að stjórna hvaða efni er sýnt þegar vefsíðuinnihaldi þeirra er deilt á Facebook, Twitter eða öðrum kerfum sem eru Open Graph vingjarnlegir. Ef vefsíðan þín notar ekki þessi merki getur vettvangurinn ákveðið hvaða mynd á að sýna og mun líklega sýna óskylda mynd.

Notar Google Open Graph?

Engin Google notar ekki Open Graph samskiptareglur fyrir niðurstöðusíður leitarvéla. Í staðinn notar það Skipulögð gögn, sem er önnur aðferð til að leyfa skriðdreka að skilja betur innihaldið á vefsíðunni þinni. Jafnvel þó að Google noti ekki OG-merki í sjálfu sér, þá er umferð á vefsíðuna þína merki um röðun, þannig að það mun líklega gagnast lífrænu sæti þínu að hafa félagslega fjölmiðla vingjarnlega vefsíðu.

Hvernig stillir þú Open Graph tags í Joomla?

Til að stilla opin línurit merki í Joomla er hægt að nota sniðmát sniðmáts og fylla út merki úr innihaldi greina eins og við höfum lýst í greininni hér að ofan. Einnig er hægt að setja viðbót sem er fær um að búa til þessi merki sjálfkrafa úr vefsíðu innihaldi þínu.

Hvernig kannarðu Open Graph tags?

Til að athuga Open Graph merki geturðu annað hvort notað Facebook Linter eða Sharing Debugger eða notað löggildinguna á Twitter kortinu.

Um höfundinn

Höfundur: David AttardVefsíða: https://www.linkedin.com/in/dattard/Tölvupóstur: david@collectiveray. Með

David hefur starfað í eða við net- / stafræna iðnaðinn síðustu 18 ár. Hann hefur mikla reynslu af hugbúnaðar- og vefhönnunargeiranum með því að nota WordPress, Joomla og veggskot í kringum þau. Sem stafrænn ráðgjafi er áhersla hans lögð á að hjálpa fyrirtækjum að ná samkeppnisforskoti með því að nota sambland af vefsíðu þeirra og stafrænum kerfum sem eru í boði í dag.