I den här artikeln ska vi diskutera hur man lägger till Facebook Open Graph och Twitter Cards till Joomla utan ett plugin eller modul.
Om du inte har bott under en sten under det senaste decenniet eller så har du förmodligen mycket ofta sett människor som delar artiklar på Facebook med en fin bild och titel, och en liknande sak på Twitter med stora vackra kort som visar en stor bild.
Det bästa sättet att kontrollera detta är att genomföra det som kallas Open Graph protokoll. Detta är en uppsättning taggar som ger tips till Twitter, Facebook och andra sökrobotar om vilket innehåll de ska använda.
Du kan enkelt göra detta i Joomla utan att installera någon tredje parts tillägg genom att skapa en mall åsidosättande.
Så här gör du:
Twitter-kort Joomla
När du implementerar Twitter-kort med Joomla öppna graflappar - snarare än att en bild visas slumpmässigt eller ingen bild alls, kommer din Joomla-artikel att föreslå den bästa bilden att använda.
Se exemplet nedan från CollectiveRay Twitter flöde.
Exempel på Facebook Open Graph
Å andra sidan - på Facebook, med Joomla Open Graph-taggar, kommer dina inlägg när de delas se ut som nedan.
Så här aktiverar du Joomla Open Graph-taggar
1. Skapa en mall åsidosätta för artiklar
Tillägg> Mallar> Mallar> (din mall) Detaljer och filer> Skapa åsidosättningar> Komponenter> com_content> artikel
När du har skapat åsidosättande av artikelmallen kan du lägga till metadata i åsidosättningen som ska användas för att visa din artikel. I huvudsak måste du lägga till följande innehåll i artikeln så att metadata hämtas från din artikel.
2. Lägg till metadata för Facebook / Twitter Open Graph
Gå till tillägg> Mallar> Mallar> (din mall) Detaljer och filer> Editor> html> com_content> artiklar> default.php
Lägg till koden nedan till toppen mellan php-taggar: - var försiktig med var du ska lägga till detta, du kan bryta din mall tillfälligt om du lägger till den på fel plats ... så ta en fullständig säkerhetskopia av filen innan du utför någon av dessa ändringar
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('" ','"',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('" ','"',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. Anpassa Open Graph-taggarna efter dina värden
Ovanstående kod är anpassad till CollectiveRay, så uppenbarligen redigera värdena till de objekt som du vill ha för din egen webbplats.
Det här är de linjer du behöver ändra:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Det här bör vara platsen för standardbilden, om din artikel inte har en introbild eller en fulltextbild.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
Ovanstående @ -värde bör ändras för att återspegla ditt Twitter-användarnamn.
<meta property="og:email" content="info@dart-creations.com";/>
Ovanstående e-postadress bör uppdateras till din egen e-postadress.
Ovanstående bör uppdateras till namnet på din webbplats.
Istället för xxxxxxxxxxx av taggen fb: admins måste du ange det numeriska id för den Facebook-användare som ska utföra sådana saker som Page Insights. För att hitta numret kanske du vill titta på ett sådant verktyg som det här verktyget - hitta mitt Facebook-ID.
Läsarförslag:
Eddie föreslog att du kan begränsa beskrivningens längd till ett angivet antal tecken om du använder koden nedan:
Du kanske vill begränsa beskrivningens längd till c.45 tecken med mb_strimwidth eller substr så här:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or
Ed har också gjort ett andra förslag som faktiskt låter dig välja data från metabeskrivningen av artikeln, vilket är ett ganska bra förslag.
Jag har justerat koden lite och har följande:
.
Detta produceras av den här koden (anmärkning ">" är borttagen):
<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('beskrivning')), 0,45, "..."). '"=" "/>
Du kan se att jag får metabeskrivningen, begränsad till 45 tecken, och lägger till ellips om beskrivningen är trunkerad. På det här sättet kan jag "klicka på bete" på min beskrivning för bättre CTR samtidigt som jag håller min introtext läsbar i enlighet med "stil" eller "röst" på min webbplats. Genom att använda metabeskrivningen kan jag också lägga till en del av den här koden till en åsidosättning för kategorier också!
En annan läsare: Thomas Meredith kommenterade nedan att koden
var sårbar för XSS-sårbarheter och rätt kod borde vara:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Vi har uppdaterat koden med denna korrigering, och du bör göra detsamma.
Låt oss hjälpa dig att hantera din Joomla bättre
Fler uppdateringar från våra besökare
Om du följer konversationen nedan kommer du att upptäcka att även om ovanstående kod fungerar i de flesta situationer, finns det specifika fall där koden inte fungerar. Michael från N8 Solutions, tog på sig att hitta en lösning för de fall där detta inte fungerade.
I andan av Joomla-communityn med öppen källkod delade de koden med resten av besökarna i kommentarerna nedan. Jag reproducerar koden och Michaels kommentarer ordligt, för tydlighetens skull:
Jag kunde lösa problemet inte bara för sidan "Kontakt" utan även för menysidorna "Blogg" och "Utvalda".
Först, vad jag skrev ovan för kontaktsidan, för att ta tag i "Namnet" sparas kontakten så att den fungerar. "Twitter: title" & "og: title" ska se ut så här om du vill använda kontaktens sparade namn.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Men om du vill använda informationen från menyn kan du göra det med den här nya koden som också fungerar för sidorna "Blog" och "Featured".
Du kan välja att använda "Menytitel", "Webbläsartitel" eller "Sidrubrik". Jag föredrar att använda sidrubriken och ställa in menyn så att inte sidrubriken visas. På det här sättet kan jag använda sidrubriken för öppen graf som jag vill eftersom den inte kommer att visas någon annanstans till skillnad från menytiteln eller webbläsarens sidtitel som kommer.
För att göra detta måste du lägga till koden nedan mellan "$ timage" och över "$ doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Då bör du ersätta koden för "twitter: title" & "og: title" med den här koden nedan för att använda "Sidrubrik".
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Om du istället vill använda "Menytitel" eller "Webbläsarens sidtitel", i koden skulle du ersätta "$ pageheading" med antingen "$ title" för att använda menytitel eller "$ browserpagetitle" för att använda webbläsaren Namn på sidan.
Du kan skapa åsidosättningarna här:
Skapa åsidosättningar> Komponenter> com_content> kategori
Skapa åsidosättningar> Komponenter> com_content> presenterade
Skapa åsidosättningar> Komponenter> com_contact> kontakt
Redigera sedan åsidosättningarna, lägg till koden ovan, på respektive plats:
Editor> html> com_content> category> blog.php
Editor> html> com_content> featured> default.php
Editor> html> com_contact> contact> default.php
Jag tog också bort "if" -uttalandet för Open Graph Image och lämnade bara grundraden:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
Jag gjorde det eftersom "if" -uttalandet inte är nödvändigt för dessa sidor eftersom det inte finns någon Intro-bild eller en fulltextbild.
En annan viktig sak angående "beskrivningarna".
För KONTAKTER:
I koden för kontaktsidan för "twitter: beskrivning" & "og: beskrivning" måste "introtext" ersättas med "metadesc" för att fånga metabeskrivningen som är inställd för kontakten. Om du inte anger en beskrivning för kontakten visas ingenting för de öppna grafbeskrivningstaggarna.
För BLOGG & FUNKTIONERade artiklar:
Precis som ovan för kontakterna måste "twitter: beskrivning" & "og: beskrivning" "introtext" ersättas med Eddies kod ovan för att fånga metabeskrivningen som är inställd för antingen Blogg eller Featured Article Menu Item. Återigen, om du inte anger en beskrivning där kommer ingenting att visas. Så du behöver inte leta efter det, här är koden som Eddie gav ovan och hur beskrivningsraderna ska 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, " ...").'" />
Jag föredrar att ändra karaktärslängden från 45 till 160 eftersom jag inte är intresserad av "Bait Clicking" potentiella webbplatsbesökare.
Jag hoppas att detta är till hjälp för andra!
4. Testa med Twitter-valideraren och Facebook Linter
Kontrollera artikeln på din webbplats mot Twitter-valideraren: https://cards-dev.twitter.com/validator
och
Facebook Linter: https://developers.facebook.com/tools/debug/
Och det är så du lägger till Open Graph-metadata i dina Joomla-artiklar :)
Vanliga frågor
Vad är Open Graph Protocol?
Protokollet Open Graph är ett sätt att låta webbplatser styra vilket innehåll som visas när deras webbplatsinnehåll delas på Facebook, Twitter eller andra plattformar som är Open Graph-vänliga. Om din webbplats inte använder dessa taggar kan plattformen bestämma vilken bild som ska visas och kommer troligen att visa en orelaterad bild.
Använder Google Open Graph?
Inget Google använder inte Open Graph-protokollet för sökmotorn. Istället använder den Strukturerade data, vilket är en annan metod för att låta sökrobotar bättre förstå innehållet på din webbplats. Trots att Google inte använder OG-taggar i sig är trafik till din webbplats en rankningssignal, så det kommer troligen att gynna dina organiska rankningar att ha en social mediavänlig webbplats.
Hur ställer du in Open Graph-taggar i Joomla?
För att ställa in öppna graftaggar i Joomla kan du använda en mallöverstyrning och fylla ut taggarna från innehållet i dina artiklar som vi har beskrivit i artikeln ovan. Alternativt kan du installera ett plugin som kan generera dessa taggar automatiskt från ditt webbplatsinnehåll.
Hur kontrollerar du Open Graph-taggar?
För att kontrollera Open Graph-taggar kan du antingen använda Facebook Linter eller Sharing Debugger eller använda Twitter-kortvalideraren.
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!
Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.
och många fler ...