Facebook Share (Contao Core) Problem mit Miniaturbildern/Vorschaubildern

[bird]

Hallo,

ich nutze bei einem Projekt mit V 2.9.1 die Contao eigene Facebook Share Option über die share.php. Prinzipiell verstehe ich, wie die dortigen Inhalte generiert werden, es ist mir allerdings ein Rätsel, nach welchen Kriterien die Vorschaubilder ausgewählt werden.

Ich habe mehrere Bilder im Template (gleicher Ordner, gleicher Dateityp) per <img>-Tag eingefügt, ich kann allerdings nur 2 Bilder davon als Miniaturbild auswählen.
Die Dimensionen aller Bilder stimmen laut Dokumentation http://developers.facebook.com/docs/share ebenfalls.

Grundsätzlich würde ich gerne bei allen geteilten Inhalten das Vorschaubild (in diesem Fall das Logo) für die share.php festlegen und nicht den User auswählen lassen.

Laut Facebook-Dokumentation legen normalerweise die Tags

<link rel="image_src" href="Pfad zum Bild" /> (alt)
<meta property="og:image" content="Pfad zum Bild"/> (neu)

im Header fest, welches Bild als globales Vorschaubild definiert werden kann.
Das fuktioniert bei mir aber im aktuellen Fall nicht.

Kann mir vielleicht jemand sagen, wie ich die Bildauswahl für Vorschaubilder definieren kann bzw. nach welchem Prinzip Bilder als Vorschau zugelassen werden?

[bubblez]

Vielleicht liegt es an der Bildgrösse?

og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.

[bird]

Hallo bubblez,

Bildgröße, Seitenverhältnis etc. waren korrekt, es funktionierte allerdings trotzdem nicht.
Ich habe meine URL dann mit dem "URL Linter" von Facebook geprüft:
http://developers.facebook.com/tools/lint/ und plötzlich wurde auch über die share.php das korrekte Bild angezeigt.

Ich kann nocht nicht sagen, woran das lag -vielleicht war es ein Caching Problem...

[globalcow]

Hallo bird,

ja, wird wohl ein Caching-Problem gewesen sein. Durch die Nutzung des lint Tools erfasst FB die Daten neu. Siehe hier

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

Gruß
globalcow

[Kahmoon]

Hier klink ich mich mal kurz ein da ich grad ein ähnliches Problem habe. Ich will z.B. bei News einen Like button einfügen. Genau wie mit dem Button Share crawlt Facebook beim Klick auf Like die Seite nach Bildern und nimmt irgendeins. Meistens das Falsche.
Man kann das jetzt via og:image beeinflussen. Allerdings steht mit das Teaser- oder überhaupt ein Bild der News zum Zeitpunkt der Headererstellung noch nicht zur Verfügung...oder verplan ich es??

Wäre dankbar für Tipps

Gruß
Frank

[bird]

Hallo Kahmoon,

ich verstehe Dein Problem noch nicht ganz.

Nutzt du die Contao Share-Funktion oder eine der FB-Like Erweiterungen?
Beziehst du dich auf die Vollansicht einer Nachricht oder auf eine Nachrichtenübersicht?
Hast du Probleme damit, ein Bild festzulegen oder kannst du den Like-Button nicht einbinden?

Vielleicht helfen Dir die Insert-Tags für eine Anpassung weiter: http://www.contao.org/inserttags.html

[Kahmoon]

Sorry..ich beziehe mich auf die Detailsansicht einer News.

Ob Social Plugin Facebook Like Button oder der Share von Contao macht da keinen Unterschied. Beide lösen einen Crawl der aktuellen Seite aus und Facebook verwendet für Vorschaubilder bevorzugt das og:image Tag. Ist dies nicht vorhanden nimmt er irgendeins..meistens das erste. Leider steht mir im Headbereich anscheinend das Bild der aktuellen News nicht zur Verfügung. Zumindest wird es mir mit <?php $this->showTemplateVars(); ?> nicht ausgegeben.

Die restlichen benötigten Tags sind bereits integriert und funktionieren. Nur das mit Bildern ist ärgerlich.

<!-- 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="merkurcup.de" />
<meta property="og:description" content="<?php echo $this->description; ?>" />
<meta property="fb:admins" content="xxx" />

Gruß

[bird]

Hallo Kahmoon,

das Bild der News wirst Du (soweit ich weiß) nicht direkt per Insert-Tag im Header einfügen können.

Entweder Du musst Dir eine Erweiterung dafür basteln oder die Benennung der Bilder so vornhemen, dass unter Verwendung der vorhandenen Insert-Tags und Umgebungsvariablen eine eindeutige Zuordnung möglich ist.

z.B.

<meta property="og:image" content="pafd-newsbilder/<?php eindeutige Ausgabe für diese Nachricht ?>.jpg "/>

Die Bilder musst Du dann entsprechend benennen und abspeichern.

Welche Variablen stehen Dir denn laut <?php $this->showTemplateVars(); ?> auf der Nachrichtenseite zur Verfügung?

Du musst auch beachten, dass Facebook Deine Inhalte erst cachen muss, da es sonst zu Darstellungsproblemen kommen kann - siehe Post weiter oben.

[Kahmoon]

Nein per Inserttag geht das leider nicht. Auch eine Lösung mit selbst gebastelten Pfaden und Dateinamen wird in der Praxis schwer umsetzbar sein. Redakteure pflegen Inhalte im System. Das ist eine zu große Fehlerquelle.

Wenn ich die Variablen im Nachrichtenleser ausgeben lasse sind natürlich alle Informationen vorhanden. Wenn ich die Variablen aber im Headbereich der fe_page ausgebe, fehlen alle Informationen der News. Vermutlich weil diese noch nicht getriggert wurde. Aber ich brauche sie genau im Head . Bei Title hat er es ja auch schon..nur den Rest nicht. Dann wäre es total easy. Dort wäre es dann nur $this->singleSRC in das og:image und fertig.

Es gibt sicher eine PHP Funktion von Contao die den Header erzeugt und die man im nachhinein noch mal aufrufen kann. Allerdings habe ich selbst noch nie was mit Modulen entwickeln gemacht.

Aber im Grunde ist das doch eigentlich eine Funktion die für den Core durchaus interessant wäre im Zeitalter der sozialen Netzwerke

Gruß

[bird]

Ich kann Dir leider nur sagen, wie Du bereits vorhandene Tags im Header (tl_page) erweitern kannst:

global $objPage;
$objPage->pageTitle = 'Dein Text';

oder

$pageDescription = $objPage->description;
$objPage->description = 'Dein Text' . $pageDescription;

Ob und wie Du ein komplett eigenes Tag auf diese Weise im Header erzeugen kannst, weiß ich leider nicht.

Vielleicht kann dir sonst jemand helfen - wenn Du eine Lösung findest, bin ich auch daran interessiert

[ffw]

@Kahmoon

Hast Du eine Lösung für das og:image Tag bei Nachrichten gefunden? Vielen Dank für Dein Feedback!

[Kahmoon]

Leider nein. Mit den Vorschlägen konnte ich nicht wirklich was anfangen.

Ist aber fast ne Sache für den Core, denn es betrifft News, Artikel, Catalogund Shops(isotope). Contao Webshop zieht es demnächst nach.

Gruss

[maro]

Hallo,

ich habe ein ähnliches Problem:

Wenn man http://www.reitz-orthopaedie.de/Orthopädie-Blog.html bei Facbook postet crawlt FB diverse Miniaturbilder.

Wenn man http://www.reitz-orthopaedie.de/Blog...fizierung.html wird jedoch gar kein Miniaturbilder angezeigt.

Woran kann es liegen?

Wäre dankbar für jeden Hinweis!

maro

[Kahmoon]

Ich würde ja gern ein Featurewunsch Ticket eröffnen..aber ich kann mich nicht mehr anmelden. Auch wenn ich mir das Passwort zuschicken lasse. Vielleicht kann das jemand für mich tun?

[ffw]

Der Mitgliedsname im Mail 'Ihr Contao Open Source CMS (fka TYPOlight) Kennwort' entspricht dem Vornamen und nicht dem Mitgliedsnamen für den Login.

[ffw]

Hab einen Workaround für den Fehler mit den Miniaturbildern gefunden. Das http://developers.facebook.com/tools/lint Tool zeigt, dass der Pfad zu den Bildern falsch zusammengesetzt wird.

Hab ein UrlPrefix Modul erstellt, das den Domain Name vor die Image Pfad hängt (siehe http://www.contao.org/blog-leser/ite...ptimieren.html)

-- alt
<img src="system/html/bild01-cdf7be5c.jpg">

-- neu
<img src="http://<domain-name>/system/html/bild01-cdf7be5c.jpg">

[Kahmoon]

Dadurch ist das Bild leider trotzdem nicht kontrollierbar

Ob das Bild relativ oder absolut angegeben ist, sollte FB imho eigentlich ziemlich egal sein. Da gabs bei mir zumindest noch kein Problem.

[Kahmoon]

Das hier scheint wohl die Lösung zu sein. Bei Catalog funzt es schon mal. Bei News versuche ich es später.

http://www.contao-community.de/showt...l=1#post127866

[cgpro]

falls es mal jemand braucht

einfach neues template news_full.* erstellen und dann folgendes snippet einsetzen

<?php
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::path}}'.$this->singleSRC.'" />';
?>

und hier zum testen
https://developers.facebook.com/tools/debug

[KATgirl]

Wenn du keine Multidomainlösung hast oder Subdomains anlegen kannst. Dann solltest du die Assets auf die Subdomasin aiusdlsgern bzw. Dort noch mal die URL eintragen. Dann sind die Bild Pfade absolut.

Facebook akzeptiert leider nicht den BaseParameter nicht bzw ignoriert in.
Damit sucht es die Bilder an der falschen Stelle. Ich habe das Ganze auch schon mal über htaccess gelöst, Nachteil hier ist aber das jede URL dann bei der Anfrage da durchlaufen muss.

Gesendet von meinem Nexus 7 mit Tapatalk 2

[cgpro]

via

env::path

kommt da ne schöne absolute url raus oder steh ich grad aufm schlauch?

[Maik]

Hi, ich habe das snippet mal in eine news_full.html5 eingesetzt >> Ergebnis: kein Bild meines Newsbeitrags. Contao 3.0.6 - an welche Stelle genau muss der Eintrag?? Bei mir liegt Contao in einem Unterordner.

[yoschi]

Jap, ich möchte das Thema nochmal aufgreifen.

Hab mir nicht alles genau durchgelesen, aber ich denke, ich habe das gleiche Problem:

Wenn ich den Link einer News kopiere und diese bei Facebook einfüge, so erscheint kein Miniaturbild von dem in den News eingefügtem Bild.

Kann mir eventuell jemand mal ein passendes meta property set zeigen, dass für meine Nachrichten passt?
Wir posten hier regelmäßig die neusten News und da sollten der Nachrichtentitel, Bilder, angezeigt werden.

Konkretes Beispiel ist: www.kopfspruenge.com

[Spooky]

Variante 1: direkt im news_full template das meta property setzen

Erstelle dir ein neues news_full template und füge folgendes oben ein:

<?php
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

Variante 2: immer ein default og:image verwenden, wenn keines angegeben ist

Erstelle dir ein neues fe_page template und füge im <head> folgendes hinzu:

  <?php
  if($GLOBALS['og:image'])
    echo '<meta property="og:image" content="'.$GLOBALS['og:image'].'" />';
  else
    echo '<meta property="og:image" content="{{env::url}}/files/default-og-image.png" />';
  ?>

Erstelle dir ein neues news_full template und füge folgendes oben ein:

<?php
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['og:image'] = $this->Environment->base . $ogimage;
?>

Die Parameter von getImage(...) (also Größe und Art der Anpassung) kann man natürlich nach belieben verändern. Ich bin mir nicht sicher ob urlEncode(...) überhaupt wirklich notwendig ist.

[yoschi]

Erstere Lösung zieh ich eher in Betracht:

https://developers.facebook.com/tool...edia-gmbh.html

angezeigt wird mir das Bild welches in der News steht denoch nicht.

Es gibt ja eine Erweiterung (facebook_images, kompatibel mit der installierten Version 3.1), aber die lässt mir die ganze Seite abschmieren:

face.png

[Spooky]

Erstere Lösung zieh ich eher in Betracht:

https://developers.facebook.com/tool...edia-gmbh.html

angezeigt wird mir das Bild welches in der News steht denoch nicht.

Sieh dir mal deinen Source an... du hast da 3 verschiedene meta tags mit og:image

...
<meta property="og:image" content="http://kopfspruenge.com/" />
...
<meta property="og:image" content="http://www.kopfspruenge.com/files/kopf/images/u_1.png">
<meta property="og:image" content="http://www.kopfspruenge.com/files/kopf/images/news/">
... 

Facebook nimmt davon natürlich den einzig gültigen, also

<meta property="og:image" content="http://www.kopfspruenge.com/files/kopf/images/u_1.png"> 

Der erste og:image tag kommt wahrscheinlich aus dem news_full template. Bei dir steht aber evt. in singleSRC nichts drin. Hat dieser Artikel ein Teaser Bild?

[yoschi]

Super danke =)

ich musste noch in den news_latest template die einbindung des Images auskommentieren, damit das Teaserbild nicht auf der Hauptseite angezeigt wird.

Nun funzt alles wie gewünscht =)

Danke!

[Spooky]

Ich versteh' zwar nicht was du meinst, aber gut dass es jetzt funktioniert

[yoschi]

www.kopfspruenge.com

Wenn einer News ein Teaserbild hinzugefügt wird, dann wird das Bild auf der Startseite mit angezeigt, dies ist aber nicht gewollt. Damit dies nicht passiert, musste ich das news_latest Template bearbeiten und den entsprechenden Teil auskommentieren.

[Spooky]

Achso ja, verstehe nun. Ist klar

[MPstudent]

Hey zusammen,

habe auch das Problem das beim Teilen eines Newsreader Links kein Bild angezeigt wird, habe dies hier im template eingefügt:

 <?php
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

Und im Quelltext erscheint dies:

<meta property="og:image" content="http://www.svenheinemann.de/assets/images/9/logo_horizontal_color-14ef7e19.jpg" />

Ist eigentlich das richtige Bild, aber es wird nicht bei Facebook als Miniatur angezeigt.

Der Object Debugger sagt folgendes:

Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

Leider kein Bild, jemand ne Idee was ich da noch ins template einfügen muss?

Besten Dank
.christoph

[AndreasC]

Same for me here, eine Lösung wäre klasse.

[Kahmoon]

MPStudent

Edit:
Jetzt habe ich einen Newsbeitrag gesehen. Nur das og:image reicht nicht. Es gibt einige Pflichtfelder (url, title, descr, image) die du brauchst. Auch die App ID ist ebenfalls wichtig. Genau das sagt dir aber auch die Meldung vom Debugger, der übrigens dein Bild anzeigt.

https://developers.facebook.com/tool...nberg-167.html

"url, titel und description" sollte angegeben werden auch wenn es sich Facebook selbst suchen kann"


Beispielcode für News

<meta property="og:locale" content="de_DE" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php echo str_replace('"', '&quot;',$this->pageTitle); ?>" />
<meta property="og:description" content="<?php echo $this->description; ?>" />
<meta property="og:url" content="<?php echo $_SERVER['REQUEST_URI']; ?>" />
<meta property="og:site_name" content="xyz.de" />
<meta property="fb:admins" content="xxxxx" />
<meta property="fb:app_id" content="xxxxx"/>

Also im Grunde alles gut....nur solltest du in deinem Interesse zumindest die Mindestanforderung an Tags liefern.

VG
Frank

[derRenner]

Hallo,

ich habe mit der Thematik og:xxxxx auch so meine Schwierigkeiten.
Ich bringe zwei Dinge nicht gebacken ...

1) im 'Zusätzliche <head>-Tags' im Seitenlayout habe ich folgendes eingetragen:

<meta prefix="og: http://ogp.me/ns#" property="og:locale" content="de_DE" />
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="<?php echo $this->pageTitle; ?>" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="<?php echo $this->description; ?>" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{env::url}}/{{env::request}}" />
<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="{{page::rootTitle}}" />

Nun werden im Quelltext UND auch im FB-Debugger die oben Rot eingefärbten php-Anweisungen 1:1 ausgegeben. Also, anstatt dass da jetzt der Titel oder die Beschreibung steht, steht dort die <php>-Anweisung.
Die Insert-tags werden aufgelöst!

2)
im template 'news_latest.html5' habe ich folgende Zeilen (wie in den threads oben beschrieben) eingefügt:

<?php
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

Es wird mir im Quellcode aber keine Zeile im <head> mit den og:image properties erzeugt ...

Kann mir hier jemand weiterhelfen?
Ziel soll es sein, beim Teilen auf Facebook der angezeigten Nachricht (NACHRICHTENLESER) das erste auf dieser Seite gefundene Bild anzuzeigen und die Beschreibung mit Link - eigentlich eine Standardaufgabe :-)

Würde mich auf Hilfe freuen
DANKE

[Spooky]

PHP code kannst du im Seitenlayout nicht eingeben/ausführen lassen. Das müsstest du über das Template machen.

[derRenner]

Hallo & Danke!

klappte auch nicht, das hatte ich schon ... hab's aber jetzt nochmals "hergestellt" zur Darstellung.

meine template 'news_full' sieht nun so aus (die ersten Zeilen):

<?php
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:locale" content="de_DE" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:title" content="<?php echo $this->pageTitle; ?>" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:description" content="<?php echo $this->description; ?>" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{env::url}}/{{env::request}}" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="{{page::rootTitle}}" />';
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

<div class="layout_full block<?php echo $this->class; ?>">

  <h1><?php echo $this->newsHeadline; ?></h1>
......

erzeugt wird dann wieder nicht das, was ich wollte » Quelltext:

<meta prefix="og: http://ogp.me/ns#" property="og:locale" content="de_DE" />
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="<?php echo $this->pageTitle; ?>" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="<?php echo $this->description; ?>" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="{{env::url}}/{{env::request}}" />
<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="{{page::rootTitle}}" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://meineSeite.at/assets/images/d/pdftk01_mini-f9b4cacd.jpg" />

Ich denke, ich habe irgendwo Hochkommas oder Anführungszeichen vergessen - bin dem <php> aber nicht mächtig, darum weiss ich eigentlich auch gar nicht was ich genau da mache ;-)

Kannst du mir noch weiterhelfen?

[derRenner]

... "Selbststudium" ;-)

habe dazu noch einiges im Forum hier gefunden und das Problem gelöst.
Das template ist nun hierauf abgeändert - und es tut jetzt mal, was es tun soll

<?php
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:locale" content="de_DE" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:title" content="'.$this->newsHeadline.'" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:description" content="'.strip_tags($this->teaser).'" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:url" content="' .$this->replaceInsertTags( '{{env::path}}{{env::request}}' ). '" />';
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="' .$this->replaceInsertTags( '{{page::rootTitle}}' ). '" />';
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

[derRenner]

Hallo,

hat sich hier in der 3.5 etwas im code geändert? Irgendwie klappt das nicht (mehr).
In einer neuen 3.5.4 Installation habe ich der news_full.html5 folgendes ins template mit eingetragen:

<?php
$ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 512, 512 , 'box' );
$GLOBALS['TL_HEAD'][] = '<meta prefix="og: http://ogp.me/ns#" property="og:image" content="'.$this->Environment->base . $ogimage.'" />';
?>

soweit ich mich erinnern kann, sollte hier nun das teaser-Bild der Nachricht angezeigt werden ... tut es aber nicht. Und dieser <meta>-text wird aber auch im Quelltext nicht mit angezeigt.

Kann mir jemand weiterhelfen?
vielen Dank

[Spooky]

Link zur Seite?