Ausgaben im Headbereich - Meta Tags für Facebook

Servus beisammen,

weiß nicht ob die Frage schon mal gestellt wurde. Für SEO Keywords und SEO Desription kann man ja im Katalogreader Felder einstellen die dort ausgegeben werden sollen. Ich müsste hier aber noch mehr Felder ausgeben können.

Ich hab das Problem das ich bei diversen Projekten Facebook Like Buttons einbauen muss. Z.B. hier

Mit den bestehenden Variablen von Contao kann ich die Open Graph Tags halbwegs ausreichend befüllen.

Sprich:

Code:

---

<!-- FB -->
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php echo $this->pageTitle; ?>" />
<meta property="og:url" content="{{env::url}}/{{env::request}}" />
<meta property="og:site_name" content="hartl-racing.de" />
<meta property="og:description" content="<?php echo $this->description; ?>" />

---

erzeugt:

Code:

---

<!-- FB -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Alpina Supermoto und Motocross Räder - Competition" />
<meta property="og:description" content="Alpina Raggi Felgen mit dem neuen STS schlauchlos System. Die schlauchlos Räder für Profis in geiler Optik und Top Verarbeitung." />
<meta property="og:url" content="http://www.hartl-racing.de/produktdetails/items/alpina-competition-felgen-schlauchlos.html" />
<meta property="og:site_name" content="hartl-racing.de" />

---

Nur mit Bildern ist es ein Problem. Facebook liest den gelikten Link ein und gibt irgendeins der Bilder auf der Seite wieder. Meistens das Falsche. Dies kann man eigentlich ganz einfach mittels folgendem Open Graph Tag steuern.

Code:

---

<meta property="og:image" content="tl_files/img/meinBild.jpg" />

---

Leider steht mir in Contao bei der Generierung des Headbereichs die Catalog Variable für z.B. das Produktbild noch nicht zur Verfügung. Was kann ich tun damit ich dieses Feld z.B. "Bild" bereits im Headbereich ausgeben kann?

Gruß
Frank

Hallo Kahmoon,
wie dir in dem anderen Thread ( http://www.contao-community.de/showt...359#post122359 ) schon gesagt wurde, geht das über die Globalen Variablen.

Viele Grüße

Servus,

leider hat mir das nicht wirklich geholfen.. Title und Description habe ich ja schon funktionierend. Nur leider nicht die Ausgabe des Feldes "Bild" :(

Wie kann ich ein Feld xy von Katalog dort ausgeben? Auch über globale Variablen?

Gruß

Moin,

sorry wenn ich hier jetzt noch mal bumpen muss. Meine Frage ist leider noch nicht beantwortet :(

Gruß

Etwas spät.. entschuldige.
Eventuell wäre es auch eine Möglichkeit mit dem Modul Eigene Inserttags von Andreas Schempp. Da kann man eventuell einen eigenen Inserttag mit den nötigen Infos befüllen.

Viele Grüße

Du meinst sicher diese hier oder?
http://www.contao.org/erweiterungsli...080019.de.html

Aber um dort die gewünschten Informationen zu platzieren muss man ja trotzdem ein separates Modul machen?! :rolleyes:

Gruß

Ja, eins für alles oder?
Der inserttag wird ja auch im fe_page.tpl ersetzt. Und du brauchst dann nur noch schauen, das du den dynamisch befüllst...

Viele Grüße

Hmm ok. Hab bisher noch kein Modul für Contao gemacht und hatte auch noch nicht wirklich Zeit mich hier reinzufuchsen... So einfach ist es ja nicht um das mal eben nebenbei zu machen :)

Äh.. ich mein ja, das es damit eventuell ohne eigenes Modul klappt.
Musst ja eigentlich nur rausbekommen ob und wie du die eigenen Inserttags dann dynamisch befüllen kannst.

Viele Grüße

Du koenntest in dem ReaderTemplate direkt in die HEAD Variablen schreiben.

PHP-Code:

---

<?php
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="tl_files/img/meinBild.jpg" />';
?>

---

In dein Template, natuerlich mit dem richtigen Pfad zum Bild.
Und dann wird halt dieser Text einfach als META Tag in den Head Bereich mit reingerendert.

Das ist ja genau das Problem. An dieser Stelle steht mir diese Variable der Grafik (laut var_dump/shotTemplateVars) noch nicht zur Verfügung :(.

Die Readertemplates werden doch auch erst nach dem Head geladen oder?

im Reader hast du doch genau die Daten, die du anzeigen willst, und die stehen dir im Template zur Verfuegung, damit du sie eben anzeigen kannst.

Hmm das hat tatsächlich geklappt....der Trick ist wohl wirklich das $GLOBALS. Klappt das auch bei Newsreader?? Das wäre ja pornöös :)


Meine Lösung für dieses Beispiel: http://bit.ly/h14lr9

Code im Reader um an das Bild zu kommen

PHP-Code:

---

<?
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->entries[0]['data']['image']['raw'].'" />';
?>

---

erzeugt HTML

Code:

---

<meta property="og:image" content="http://www.hartl-racing.de/tl_files/hr/produktbilder/magura-radial-195.jpg" />

---

Gruß

Das klappt in allen Templates
:cool:

Das werde ich später mal testen. Danke!

Zitat:

---

Zitat von Kahmoon

Hmm das hat tatsächlich geklappt....der Trick ist wohl wirklich das $GLOBALS. Klappt das auch bei Newsreader?? Das wäre ja pornöös :)


Meine Lösung für dieses Beispiel: http://bit.ly/h14lr9

Code im Reader um an das Bild zu kommen

PHP-Code:

---

<?
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->entries[0]['data']['image']['raw'].'" />';
?>

---

erzeugt HTML

Code:

---

<meta property="og:image" content="http://www.hartl-racing.de/tl_files/hr/produktbilder/magura-radial-195.jpg" />

---

Gruß

---

Bei mir kommt nur das raus:

Code:

---

<meta property="og:image" content="http://www.kh-hef.de/" />

---

Habe ein neues template zu news_full erstellt, meinem Modul zugewiesen und in diesem Template den Code in die ersten Zeilen gestellt.
Muss der Code an eine bestimmte Stelle oder hab ich irgendwas anderes falsch gemacht?

Du bist erstens im Falschen Forum, weil das hier der Catalog Bereich ist.
Und zweitens musst du die Variable natürlich anpassen und die aus deinem Template nehmen ;-)

Viele Grüße

Zitat:

---

Zitat von MacKP

Du bist erstens im Falschen Forum, weil das hier der Catalog Bereich ist.
Und zweitens musst du die Variable natürlich anpassen und die aus deinem Template nehmen ;-)

Viele Grüße

---

Oh sorry, bin über Google hier gelandet und hab dann nicht weiter nachgesehen :o
Von diesem Code-Geschichten hab ich leider gar keine Ahnung, welche Variable muss ich denn nehmen?
Gibt es eigentlich so eine Übersicht mit Erklärungen was diese ganzen ['data'] ['image'] etc. Teile alle machen?

Hallo TheKidRocker,
da gibts keine Übersicht. Das kannst du dir für jedes Template selber ausgeben lassen.
Hier mal für den Catalog -> http://de.contaowiki.org/Catalog_Tem...sen#Grundlagen
Das funktioniert genau so auch in anderen Templates (Modulen).

Viele Grüße

Ich hab hier mal einen Wiki Eintrag gemacht: http://de.contaowiki.org/Facebook#Facebook_Like_Button

Vielen Dank für die ausführliche Diskussion zum Thema!
Hatte selbiges Problem und konnte das ganze nun dank eurer Beiträge lösen.


Erweiterung
An dieser Stelle dann auch gleich noch eine kleine Erweiterung die ich eingebaut habe - vielleicht kann sie ja irgend wann mal jemand brauchen.

Und zwar wollte ich auf jeder Seite ein Bild bereitstellen. Also auch wenn kein Bild wie zB bei einem News Beitrag vorhanden ist. Dafür habe ich dann einfach im fe_page Template ein Standard OG:image eingebaut.

Wenn dann allerdings beim News Beitrag ein Bild vorhanden war, wurde das OG:image doppelt definiert. Und da hat der Linter gemeckert:

Zitat:

---

Duplicate tags - Du hast „image” mehrmals verwendet, es sollte aber nur einmal vorkommen.

---

Das ist zwar kein großes Problem - er nimmt dann beide Bilder. Aber trotz getauschter Reihenfolge hat er immer das Standard Bild als Vorlage verwendet. Und beim News Beitrag sollte natürlich das News Bild eingebaut werden.

Um das zu lösen habe ich einfach die folgenden zwei Codezeilen eingefügt:

fe_page.tpl

Code:

---

<?php if(!$GLOBALS['og-facebook']): ?><meta property="og:image" content="http://www.slackliner-berlin.de/tl_files/layout/logo-fb-share.jpg" /><?php endif; ?>

---

Wird im Header eingefügt ... wenn $GLOBALS['og-facebook'] nicht definiert ist wird das Standard Bild eingefügt.

news_full.tpl (am Beispiel der News - kann aber in jedem Template gemacht werden)

Code:

---

<?php if($this->singleSRC): $GLOBALS['og-facebook']=1; $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::url}}/'.$this->singleSRC.'" />'; endif; ?>

---

In dem News Template wird - wenn denn ein Bild definiert ist - die Variable og-facebook definiert. Und in diesem Zuge auch gleich der tl_head mit dem korrekten og:image von dem News Beitrag.

Ich muss noch mal schauen ob man das ganze nicht noch eleganter lösen kann - zB indem man $GLOBALS['TL_HEAD'][] durch $GLOBALS['TL_HEAD'][irgendwas] ersetzt und dann direkt nach "irgendwas" abfragt im News Template. Dann würde man sich noch die og-facebook globals Variable sparen ...

Ich weis nicht ob das schon gepostet wurde ich mach das einfach mal. Der Validator findet die Metatags nicht so toll, also hab ich eine andere Möglichkeit gesucht.

Code:

---

<?php
 if($_SERVER['HTTP_USER_AGENT'] == 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)') { ?>
        <meta property="og:type" content="article" />
        <meta property="og:title" content="<?php echo $this->pageTitle; ?>" />
        <meta property="og:url" content="{{env::url}}/{{env::request}}" />
        <meta property="og:site_name" content="url-der-seite.de" />
<?php } ?>

---

Die Metatags werden dann nur im Code auftauchen wenn Facebook die Daten austauschen will, der Validator bekommt davon nichts mit.

Zitat:

---

Zitat von SFuchs

<meta property="og:url" content="{{env::url}}/{{env::request}}" />

---

Da mein Contao in einem Unterverzeichnis liegt funktioniert bei mir (noch 2.10) nur ::path, ::url unterschlägt bringt nur den root/domain
<meta property="og:url" content="{{env::Path}}{{env::request}}" />

Geraldo

Wurde bezüglich Contao 3.x oder 3.1 bezüglich TL_HEAD und Inserttags etwas geändert?
Ich binde die Tags wie hier beschrieben in mein News Template ein, nur werden die Inserttags nicht aufgelöst!?

Weiß da jemand wass zu?

Gruß
Nikolas

Ich hab hier (https://community.contao.org/de/show...in-Contao-3-06) noch eine kleine Diskussion angestoßen. Vllt. hilft Dir da was weiter.

Zitat:

---

Zitat von cti

Ich hab hier (https://community.contao.org/de/show...in-Contao-3-06) noch eine kleine Diskussion angestoßen. Vllt. hilft Dir da was weiter.

---

Danke. Hab es aber nun aber schon anders gelöst. Und zwar mit der replaceInsertTags() Methode:

PHP-Code:

---

$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="' .$this->replaceInsertTags( '{{env::path}}' ) . $this->singleSRC.'" />';
$GLOBALS['TL_HEAD'][] = '<meta property="og:description" content="'.strip_tags($this->teaser).'" />';
$GLOBALS['TL_HEAD'][] = '<meta property="og:type" content="article" />';
$GLOBALS['TL_HEAD'][] = '<meta property="og:site_name" content="' .$this->replaceInsertTags( '{{page::rootTitle}}' ). '" />';
$GLOBALS['TL_HEAD'][] = '<meta property="og:url" content="' .$this->replaceInsertTags( '{{env::path}}' ). '" />';
$GLOBALS['TL_HEAD'][] = '<meta property="og:title" content="'.$this->newsHeadline.'" />'; 


---

Hatte nur ganz vergessen, dass ich hier was geschrieben hatte ;)

Gruß
Nikolas

Ich habe dem Wikiartikel über Facebook was ergänzt. Da es nicht wirklich hierher passt, habe ich ein eigenes Thema erstellt:

https://community.contao.org/de/show...485#post314485

Dass hier habe ich ergänzt:
http://de.contaowiki.org/Facebook#Fa...ogin_einbinden

Hallo zusammen,

habe leider in einem Projekt immer noch Probleme mit Facebook Vorschaubilder :(
LINK

Sobald ich die Sprache zur URL hinzufüge, werden grundsätzlich keine Bilder angezeigt (außer bei News), entferne ich die Option, werden die Vorschaubilder zwar auf Unterseiten angezeigt aber nicht auf Homepage!

Bei News habe ich das wie hier beschrieben folgendes im news_full eingetragen:

Code:

---

<?php $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="http://market-grounds.com/'.$this->singleSRC.'" />'; ?>

---

Hier klappt es teilweise!
z.B. Hier wird das Teaserbild vom News angezeigt
und Hier leider nicht, obwohl die Bilder bei beide News im gleichen Verzeichnis liegen und gleiche Größen haben.

Außerdem ist dei Lösung auch etwas suboptimal, da die News teilweise SlideShows beinhalten und es soll die Möglichkeit geben, eines der Bilder für FB Vorschau auszuwählen und nicht das Teaserbild.

ich habe im fe_page folgendes drin:

Code:

---

<meta name="twitter:card" content="<?php echo $this->description; ?>">
<meta property="og:title" content="<?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="{{env::url}}/{{env::request}}" />
<meta property="og:site_name" content="<?php echo $this->mainTitle; ?>">
<meta property="og:description" content="<?php echo $this->description; ?>">

---

Kann mir jemand sagen, was ich falsch gemacht habe bzw. was ich anders lösen muss?

Vielen Dank im Voraus
A.J.

Zitat:

---

Zitat von A.J.

z.B. Hier wird das Teaserbild vom News angezeigt
und Hier leider nicht, obwohl die Bilder bei beide News im gleichen Verzeichnis liegen und gleiche Größen haben.

---

Sieht beides ok aus.

• https://developers.facebook.com/tool...ka-van-almsick
• https://developers.facebook.com/tool...mann-in-berlin

Falls die Bilder bspw. bei einem Facebook Share bzw. Facebook Post nicht angezeigt werden, könnte das auch am Facebook Proxy liegen.