Slik legger du raskt til Facebook Åpne graf- og Twitter-kort til Joomla

I denne artikkelen skal vi diskutere hvordan du legger til Facebook Open Graph og Twitter Cards til Joomla uten et plugin eller modul.

Hvis du ikke har bodd under en stein det siste tiåret eller så, har du sannsynligvis veldig ofte sett folk som deler artikler på Facebook med et fint bilde og en tittel, og en lignende ting på Twitter med store pene kort som viser et stort bilde.

Den beste måten å kontrollere dette på er å implementere det som kalles Open Graph protokoll. Dette er et sett med koder som gir tips til Twitter, Facebook og andre crawlere om hvilket innhold de skal bruke.

Du kan enkelt gjøre dette i Joomla uten å installere noen tredjepartsutvidelse ved å opprette en maloverstyring.

Slik gjør du dette:

Twitter-kort Joomla

Når du implementerer Twitter-kort med Joomla-åpne grafiketter - i stedet for å ha et bilde som vises tilfeldig, eller ikke noe bilde i det hele tatt, vil Joomla-artikkelen din foreslå det beste bildet å bruke.

Se eksemplet nedenfor fra CollectiveRay twitter feed.

Eksempel på Facebook Open Graph

På den annen side - på Facebook, ved å bruke Joomla Open Graph-kodene, vil innleggene dine når de blir delt se ut som nedenfor.

Slik aktiverer du Joomla Open Graph-koder

1. Lag en maloverstyring for artikler

Utvidelser> Maler> Maler> (din mal) Detaljer og filer> Opprett overstyringer> Komponenter> com_content> artikkel

Når du har opprettet artikkelmaloverstyringen, kan du legge til metadataene i overstyringen som skal brukes til å vise artikkelen din. I hovedsak må du legge til følgende innhold i artikkelen slik at metadataene blir hentet fra artikkelen din.

2. Legg til metadataene for Facebook / Twitter Open Graph

Gå til Utvidelser> Maler> Maler> (malen din) Detaljer og filer> Editor> html> com_content> articles> default.php

Legg til koden nedenfor øverst mellom php-koder: - ta litt vare på hvor du skal legge til dette, du kan ødelegge malen din midlertidig hvis du legger den til på feil sted ... så ta en full sikkerhetskopi av filen før du utfører noen av disse endringene

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. Tilpass Open Graph-kodene til dine verdier

Koden ovenfor er tilpasset CollectiveRay, så åpenbart rediger verdiene til elementene du vil ha for ditt eget nettsted.

Dette er linjene du trenger å endre:

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

Dette bør være stedet for standardbildet, hvis artikkelen ikke har et introbilde eller et fulltekstbilde.

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

Ovennevnte @ verdi bør endres for å gjenspeile Twitter brukernavnet ditt.

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

Ovennevnte e-postadresse skal oppdateres til din egen e-postadresse.

Ovenstående bør oppdateres til navnet på nettstedet ditt.

I stedet for xxxxxxxxxxx av fb: admins-taggen, må du oppgi den numeriske ID-en til Facebook-brukeren som skal utføre ting som Page Insights. For å finne nummeret, kan det være lurt å se på et slikt verktøy som dette verktøyet - finn Facebook-IDen min.

Leserforslag:

Eddie foreslo at du kan begrense lengden på beskrivelsen til et spesifisert antall tegn hvis du bruker koden nedenfor:

Det kan være lurt å begrense lengden på beskrivelsen til ca. 45 tegn ved å bruke mb_strimwidth eller substr slik:

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

Ed har også kommet med et andre forslag som faktisk lar deg velge data fra metabeskrivelsen til artikkelen, som er et ganske flott forslag.

Jeg har justert koden litt og har følgende:

.

Dette er produsert av denne koden (merknad ">" er strippet ut):

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

Du kan se at jeg får metabeskrivelsen, begrenset til 45 tegn, og legger til ellipser hvis beskrivelsen er avkortet. På denne måten kan jeg "klikke på agn" for å få bedre CTR mens jeg holder introteksten min lesbar i tråd med "stilen" eller "stemmen" på nettstedet mitt. Ved å bruke metabeskrivelsen kan jeg også legge til noe av denne koden for å overstyre for kategorier også!

En annen leser: Thomas Meredith kommenterte under at koden

var sårbar for XSS-sårbarheter, og riktig kode skulle være: 

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

Vi har oppdatert koden med denne rettelsen, og du bør gjøre det samme.

Flere oppdateringer fra våre besøkende

Hvis du følger samtalen nedenfor, vil du oppdage at selv om koden ovenfor fungerer i de fleste situasjoner, er det spesifikke tilfeller der koden ikke fungerer. Michael fra N8 Solutions, tok på seg å lage en løsning for de tilfellene der dette ikke virket. 

I ånden av Joomla-samfunnet med åpen kildekode, delte de koden med resten av besøkende i kommentarene nedenfor. Jeg gjengir koden og Michaels kommentarer ordrett, for klarhetens skyld:

Jeg var i stand til å løse problemet ikke bare for "Kontakt" -siden, men også for "Blogg" og "Utvalgte" menyelementssider.

Først, det jeg skrev ovenfor for kontaktsiden, for å ta tak i "Navnet", blir kontakten lagret slik det vil fungere. "Twitter: title" & "og: title" skal se slik ut hvis du vil bruke det lagrede navnet på kontakten.

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

Imidlertid, hvis du ønsker å bruke informasjonen fra menyen, kan du gjøre det med denne nye koden, som også vil fungere for "Blog" og "Featured" menyelementssider.
Du kan velge å bruke "Menytittel", "Nettlesertittetittel" eller "Sideoverskrift". Jeg foretrekker å bruke sideoverskriften og angi at menyen ikke skal vise sideoverskriften. På denne måten kan jeg bruke sideoverskriften for å åpne grafen slik jeg vil, siden den ikke vises noen andre steder i motsetning til menytittelen eller nettlesertittelen som vil.

For å gjøre dette må du legge til koden nedenfor mellom "$ timage" og over "$ doc".

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

Deretter bør du erstatte koden for "twitter: title" & "og: title" med denne koden nedenfor for å kunne bruke "Page Heading".

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

Hvis du i stedet vil bruke "Menytittel" eller "Nettlesersidetittel", i koden vil du erstatte "$ pageheading" med enten "$ title" for å bruke menytittelen eller "$ browserpagetitle" for å bruke nettleseren. Side tittel.

Du kan opprette overstyringene her:
Lag overstyringer> Komponenter> com_content> kategori
Lag overstyringer> Komponenter> com_content> omtalt
Opprett overstyringer> komponenter> com_contact> kontakt

Rediger deretter overstyringene, og legg til koden ovenfor, på deres respektive steder:
Editor> html> com_content> category> blog.php
Editor> html> com_content> featured> default.php
Editor> html> com_contact> contact> default.php

Jeg fjernet også "if" -erklæringen for Open Graph Image og etterlot bare grunnlinjen:

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

Jeg gjorde dette fordi "if" -uttalelsen ikke er nødvendig for disse sidene, siden det ikke er noe Intro Image eller Full Text image.

En annen viktig ting angående "beskrivelsene".

For KONTAKTER:

I koden for kontaktsiden for "twitter: beskrivelse" & "og: beskrivelse" må "introtext" erstattes med "metadesc" for å få tak i Metabeskrivelsen som er angitt for kontakten. Hvis du ikke angir en beskrivelse for kontakten, vil ingenting vises for de åpne grafbeskrivelseskodene.

For BLOGG & FUNKSJONERTE Artikler:
Akkurat som ovenfor for kontaktene, må "twitter: beskrivelse" & "og: beskrivelse" "introtext" erstattes med Eddies kode ovenfor for å hente metabeskrivelsen som er angitt for enten Blogg eller Featured Article Menu Item. Igjen, hvis du ikke angir en beskrivelse der, vil ingenting vises. Så du trenger ikke å lete etter det, her er koden Eddie oppgitt ovenfor og hvordan beskrivelseslinjene skal se ut.

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

Jeg foretrekker å endre tegnlengden fra 45 til 160 siden jeg ikke er interessert i "Bait Clicking" potensielle besøkende.

Jeg håper dette er nyttig for andre!

4. Test mot Twitter-validatoren og Facebook Linter 

Sjekk artikkelen på nettstedet ditt mot Twitter validator: https://cards-dev.twitter.com/validator 

og

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

Og det er slik du legger til Open Graph-metadata i Joomla-artiklene dine :)

Ofte Stilte Spørsmål

Hva er Open Graph Protocol?

Open Graph-protokollen er en måte å la nettsteder kontrollere hvilket innhold som vises når nettstedsinnholdet deles på Facebook, Twitter eller andre plattformer som er Open Graph-vennlige. Hvis nettstedet ditt ikke bruker disse kodene, kan plattformen bestemme hvilket bilde som skal vises, og vil trolig vise et ikke-relatert bilde.

Bruker Google Open Graph?

Ingen Google bruker ikke Open Graph-protokollen for søkeresultatsidene. I stedet bruker den Strukturerte data, som er en annen metode for å la gjennomsøkere bedre forstå innholdet på nettstedet ditt. Selv om Google ikke bruker OG-koder i seg selv, er trafikk til nettstedet ditt et rangeringssignal, så det vil sannsynligvis være til fordel for dine organiske rangeringer å ha et sosialt medievennlig nettsted.

Hvordan setter du Open Graph-koder i Joomla?

For å sette åpne grafkoder i Joomla, kan du bruke en maloverstyring og fylle ut kodene fra innholdet i artiklene dine, som vi har beskrevet i artikkelen ovenfor. Alternativt kan du installere et plugin som kan generere disse kodene automatisk fra innholdet på nettstedet ditt.

Hvordan sjekker du Open Graph-koder?

For å sjekke Open Graph-tagger kan du enten bruke Facebook Linter eller Sharing Debugger, eller bruke Twitter-kortvalidatoren.

om forfatteren

Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/E-post: david@collectiveray. Med

David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.