Sådan tilføjes hurtigt Facebook Åbn graf- og Twitter-kort til Joomla

Joomla OpenGraphI denne artikel skal vi diskutere, hvordan du tilføjer Facebook Open Graph og Twitter Cards til Joomla uden et plugin eller modul.

Hvis du ikke har boet under en sten i det sidste årti eller deromkring, har du sandsynligvis meget ofte set folk dele artikler på Facebook med et godt billede og en titel og en lignende ting på Twitter med store smukke kort, der viser en stor billede.

Den bedste måde at kontrollere dette på er at implementere det, der kaldes Open Graph protokol. Dette er et sæt tags, der giver tip til Twitter, Facebook og andre webcrawlere om, hvilket indhold de skal bruge.

Du kan nemt gøre dette i Joomla uden at installere nogen tredjepartsudvidelse ved at oprette en skabelonoverstyring.

Sådan gør du:

 

Twitter-kort Joomla

Når du implementerer Twitter-kort ved hjælp af Joomla-åbne graf-tags - i stedet for at have et billede, der vises tilfældigt eller slet ikke noget billede, vil din Joomla-artikel foreslå det bedste billede at bruge.

Se eksemplet herunder fra CollectiveRay twitter feed.

Joomla Twitter Facebook åben graf

Eksempel på Facebook Open Graph

På den anden side - på Facebook ved hjælp af Joomla Open Graph-tags vil dine indlæg, når de deles, se ud som nedenfor.

Joomla Facebook Åbn graf

Sådan aktiveres Joomla Open Graph-tags

1. Opret en tilsidesættelse af skabeloner til artikler

Udvidelser> Skabeloner> Skabeloner> (din skabelon) Detaljer og filer> Opret tilsidesættelser> Komponenter> com_content> artikel

Når du har oprettet tilsidesættelse af artikelskabelonen, kan du tilføje metadataene til tilsidesættelsen, som skal bruges til at vise din artikel. I det væsentlige skal du tilføje følgende indhold til artiklen, så metadataene hentes fra din artikel.

2. Tilføj metadata til Facebook / Twitter Open Graph

Gå til udvidelser> skabeloner> skabeloner> (din skabelon) detaljer og filer> editor> html> com_content> artikler> default.php

Tilføj koden nedenfor til toppen mellem php-tags: - pas lidt på, hvor du skal tilføje dette, du kan muligvis bryde din skabelon midlertidigt, hvis du tilføjer den på det forkerte sted ... så tag en fuld sikkerhedskopi af filen, inden du udfører nogen af ​​disse redigeringer

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="[email protected]ns.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. Tilpas Open Graph-tags til dine værdier

Ovenstående kode er tilpasset til CollectiveRay, så rediger naturligvis værdierne til de varer, du ønsker til dit eget websted.

Dette er de linjer, du skal ændre:

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

Dette skal være placeringen af ​​standardbilledet, hvis din artikel ikke har et introbillede eller et fuldtekstbillede.

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

 

Ovenstående @ -værdi skal ændres for at afspejle dit Twitter-brugernavn.

<meta property="og:email" content="[email protected]ns.com";/>

Ovenstående e-mail-adresse skal opdateres til din egen e-mail-adresse.

Ovenstående bør opdateres til navnet på dit websted.

I stedet for xxxxxxxxxxx af fb: admins-tagget, skal du indtaste det numeriske id for den Facebook-bruger, der skal udføre ting som Page Insights. For at finde nummeret vil du måske se på et sådant værktøj som dette værktøj - find mit Facebook-id.

Læserforslag:

Eddie foreslog, at du kan begrænse beskrivelsens længde til et angivet antal tegn, hvis du bruger nedenstående kode:

Du vil måske begrænse længden af ​​beskrivelsen til c. 45 tegn ved at bruge mb_strimwidth eller substr som denne:

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

 

Ed har også fremsat et 2. forslag, som faktisk giver dig mulighed for at vælge data fra metabeskrivelsen af ​​artiklen, hvilket er et ret godt forslag.

Jeg har justeret koden lidt og har følgende:

.

Dette er produceret af denne kode (note ">" fjernes):

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

Du kan se, at jeg får metabeskrivelsen, begrænset til 45 tegn, og tilføjer ellips, hvis beskrivelsen er afkortet. På denne måde kan jeg "klikke på agn" på min beskrivelse for bedre CTR, mens jeg holder min introtekst læsbar i overensstemmelse med "stil" eller "stemme" på mit websted. Ved at bruge metabeskrivelsen kan jeg også tilføje noget af denne kode til en tilsidesættelse for kategorier!

En anden læser: Thomas Meredith kommenterede nedenfor koden




var sårbar over for XSS-sårbarheder, og den korrekte kode skulle være: 

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


Vi har opdateret koden med denne rettelse, og du skal gøre det samme.

Lad os hjælpe dig med at styre din Joomla bedre

joomla

Gratis e-bog-knap til Joomla-tip

Flere opdateringer fra vores besøgende

Hvis du følger samtalen nedenfor, finder du ud af, at selvom ovenstående kode fungerer i de fleste situationer, er der specifikke tilfælde, hvor koden ikke fungerer. Michael fra N8 Solutions, tog det på sig at finde en løsning til de tilfælde, hvor dette ikke fungerede. 

I ånden fra Joomla-samfundet med open source delte de koden med resten af ​​besøgende i kommentarerne nedenfor. Jeg gengiver koden og Michaels kommentarer ordret for klarhedens skyld:

Jeg var i stand til at løse problemet ikke kun for siden "Kontakt", men også for menupunkterne "Blog" og "Fremhævet".

Først hvad jeg skrev ovenfor for kontaktsiden, for at få fat i "Navnet" gemmes kontakten, som det vil fungere. "Twitter: title" & "og: title" skal se sådan ud, hvis du vil bruge kontaktens gemte navn.

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

Men hvis du vil bruge oplysningerne fra menuen, kan du gøre det med denne nye kode, som også fungerer for "Blog" og "Fremhævede" menupunkter.
Du kan vælge at bruge "Menutitel", "Browser sidetitel" eller "Sideoverskrift". Jeg foretrækker at bruge Sideoverskrift og indstille menuen til ikke at vise Sideoverskrift. På denne måde kan jeg bruge sideoverskriften til åben graf, som jeg vil, da den ikke vises andre steder i modsætning til menutitlen eller browsersidetitlen, som vil.

For at gøre dette skal du tilføje koden nedenfor mellem "$ timage" og over "$ doc".

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

Derefter skal du erstatte koden for "twitter: title" & "og: title" med denne kode nedenfor for at bruge "Page Heading".

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

Hvis du i stedet vil bruge "Menu-titel" eller "Browser-sidetitel", i den kode, du vil erstatte "$ pageheading" med enten "$ title" for at bruge Menu-titel eller "$ browserpagetitle" til at bruge browseren Sidetitel.

Du kan oprette tilsidesættelser her:
Opret tilsidesættelser> Komponenter> com_content> kategori
Opret tilsidesættelser> Komponenter> com_content> featured
Opret tilsidesættelser> Komponenter> com_contact> kontakt

Rediger derefter tilsidesættelserne, tilføj koden ovenfor på deres respektive placeringer:
Editor> html> com_content> kategori> blog.php
Editor> html> com_content> featured> default.php
Editor> html> com_contact> kontakt> default.php

Jeg fjernede også "if" -erklæringen for Open Graph Image og efterlod kun den grundlæggende linje:

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

Jeg gjorde dette, fordi "hvis" -erklæringen ikke er nødvendig for disse sider, da der ikke er noget Intro-billede eller fuldtekstbillede.

En anden vigtig ting vedrørende "beskrivelser".

For KONTAKTER:


I koden til kontaktsiden til "twitter: beskrivelse" & "og: beskrivelse" skal "introtext" erstattes med "metadesc" for at få fat i den meta-beskrivelse, der er indstillet til kontakten. Hvis du ikke angiver en beskrivelse for kontakten, vises der intet for de åbne grafbeskrivelseskoder.

For BLOG & FUNKTIONEREDE artikler:
Ligesom ovenfor for kontakterne skal "twitter: beskrivelse" & "og: beskrivelse" "introtext" udskiftes med Eddies kode ovenfor for at få fat i metabeskrivelsen, der er indstillet til enten Blog eller Featured Article Menu Item. Igen, hvis du ikke angiver en beskrivelse der, vises der intet. Så du behøver ikke kigge efter det, her er koden Eddie angivet ovenfor, og hvordan beskrivelseslinjerne skal se ud.

<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 foretrækker at ændre tegnlængden fra 45 til 160, da jeg ikke er interesseret i "Bait Clicking" potentielle besøgende.

Jeg håber, det er nyttigt for andre!

 

4. Test mod Twitter-validatoren og Facebook Linter 

Tjek artiklen på dit websted mod Twitter-validatoren: https://cards-dev.twitter.com/validator 

og

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

Og sådan tilføjer du Open Graph-metadata til dine Joomla-artikler :)

Ofte stillede spørgsmål

Hvad er Open Graph Protocol?

Open Graph-protokollen er en måde at give websteder mulighed for at kontrollere, hvilket indhold der vises, når deres webstedsindhold deles på Facebook, Twitter eller andre platforme, der er Open Graph-venlige. Hvis dit websted ikke bruger disse tags, kan platformen beslutte, hvilket billede der skal vises, og vil sandsynligvis vise et ikke-relateret billede.

Bruger Google Open Graph?

Ingen Google bruger ikke Open Graph-protokollen til søgemaskinens resultatsider. I stedet bruger det Strukturerede data, som er en anden metode, der giver crawlere mulighed for bedre at forstå indholdet på dit websted. Selvom Google ikke bruger OG-tags i sig selv, er trafik til dit websted et rangeringssignal, så det vil sandsynligvis være til gavn for din organiske placering at have et socialt medievenligt websted.

Hvordan indstiller du Open Graph-tags i Joomla?

For at indstille åbne graf-tags i Joomla kan du bruge en skabelonoverstyring og udfylde tags fra indholdet af dine artikler, som vi har beskrevet i artiklen ovenfor. Alternativt kan du installere et plugin, der er i stand til at generere disse tags automatisk fra dit webstedsindhold.

Hvordan kontrollerer du Open Graph-tags?

For at kontrollere Open Graph-tags kan du enten bruge Facebook Linter eller Sharing Debugger eller bruge Twitter-kortvalidatoren.

Om forfatteren
David Attard
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.
 

 

Bedst bedømte caching-plugin

Gør dit websted hurtigere 

Trin for trin-gratis e-mail-kursus, hvordan du får dit websted til at indlæse less end 1 sekund  

 

Hvem er vi?

CollectiveRay drives af David Attard - arbejder i og omkring webdesign -nichen i mere end 12 år, og vi giver tips til mennesker, der arbejder med og på websteder. Vi driver også DronesBuy.net - et websted for drone -amatører.

David attard

 

 

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...