Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden

Klaus — Sat, 15 Oct 2016 15:34:24 +0000

Der Gefällt mir Button (Like Button) von Facebook ist schnell integriert, ohne weitergehende Maßnahmen tendiert Facebook jedoch dazu immer das falsche Bild zusammen mit der Webseiteninfo auf der Pinnwand des Nutzers zu nehmen.

Zum Glück gibt es eine einfache Abhilfe, die Verwendung des Open Graph Protokoll. Das Open Graph Protokoll ermöglicht es einem Websitebetreiber, seine Website in den Social Graph zu integrieren. Wer mehr Hintergrundwissen dazu möchte findet eine gute Beschreibung bei Thomas Hutter.

Damit eine Website in den Social Graph integriert werden kann, müssen die entsprechenden Inhalte in Graph Objekte verwandelt werden. Dafür müssen Tags des Open Graph Protokolls sowie der “Like”-Button in die Website integriert werden.

Diese Tags ermöglichen es, strukturierte Informationen über die Seite zu spezifizieren. Umso mehr Informationen zur Verfügung gestellt werden, desto mehr Möglichkeiten bietet Facebook zur Darstellung heute und in Zukunft.

Für unser Problem, das richtige Bild in den Artikel einzubinden ist nur eines der Meta Tags erforderlich. Dieses muss für Anwender von WordPress in der header.php im Bereich vor dem schlissenden eingebaut werden:

Trägt man nun eine Bild URL ein, nutzt Facebook logischerweise immer nur das Bild das in der URL angegeben ist. Auf die Dauer ist dies ein wenig monoton und alles andere als ein eyecatcher.

Bei der Suche nach einer universellen Lösung bin ich auf verschiedene Ansätze gestoßen, jedoch nicht auf eine Lösung welche meiner Philosophie entspricht. Meine Forderung war:

Falls vorhanden wird das Artikelbild verwendet (Post Thumbnails muss im Themes integriert sein).
Es müssen Artikelbilder aus der WordPress Mediathek und aus NextGen Galerie unterstützt werden.
Falls kein Artikelbild vorhanden wird das erste Bild aus dem Artikel ausgelesen (
Falls alle Bedingungen vorab nicht erfüllt sind wird ein default Bild ausgegeben (in meinem Beispiel das Logo).

Lösung -Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden :

In der function.php folgenden Codeschnipsel einbauen:

function catch_that_image() {
global $post, $posts;
// Start Stufe 1, Artikelbild erfassen
$image_id = get_post_thumbnail_id();
// If the post thumbnail id has the form ngg-xyz then it is a NextGen image
if ( is_string($image_id) && substr($image_id, 0, 4) == 'ngg-') {
$ngg_image_id = substr($image_id, 4);
$image = nggdb::find_image($ngg_image_id);
if ($image) { // Safety check for null pointer.
$imageURL = $image->thumbURL;
return $imageURL;
}
}
// if the post thumbnail is wp standard format
elseif (($image_id !='ngg-') AND ($image_id !='')) {
$imageURL = wp_get_attachment_image_src($image_id,'thumbnail');
$imageURL = $imageURL[0];
return $imageURL;
}
// Start Stufe2 falls kein Artikelbild gefunden wurde
else {
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = bloginfo('template_url').'/img/logo.gif'; // default image
}
return $first_img;
}
}

Nun noch in der header.php vor dem schließenden den folgenden Codeschnipsel einbauen:

Anmerkung: Der Lösung fehlt noch eine Option. Falls im Artikel Einzelbilder per NextGen Code [ singlepic id=xxx … ] verwendet werden fehlt noch die Lösung. Ev.entuell kennt jemand einen Ansatz!

Ergänzung, Info:

Nur der Vollständigkeit halber hier weitere Meta Einstellmöglichkeiten. Für das Open Graph Protokoll sind fünf notwendig Einstellungen/Werte definiert:

og:title – Der Titel des Objekts wie er im Social Graph dargestellt werden soll
og:type – Der Typ des Objekts
og:image – Ein Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss im Minimum 50×50px und ein Maximum Verhältnis von 3:1 aufweisen.
og:url – Der Canonical-URL als permanente ID für das Objekt im Social Graph
og:site_name – Ein durch Menschen lesbarer Name der Seite

Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:

fb:admins oder fb:app_id – eine kommagetrennte Liste der Facebook-Benutzer-ID’s
og:description – eine Beschreibung der Seite.

The post Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden appeared first on MSR-SUPPORT.

Facebook – there is no attribute „allowTransparency“

Klaus — Tue, 08 Jul 2014 10:08:04 +0000

W3C Logo

Wenn Sie während der Validierung ihrer Website mit dem W3C Validator folgende Nachricht erhalten:

there is no attribute „allowTransparency“

verwenden Sie wahrscheinlich den Facebook Like Button mit folgendem Code:


&send=false&layout=standard&width=250&show_faces=false&action=like&
colorscheme=light&font=verdana&height=30"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:250px; height:30px;"
allowTransparency="true">

Der einzige Grund ist das vom IE benötigte Attribute „allowTransparency“. Die Lösung besteht in der Verwendung einer Browserweiche mit folgendem Code:


    
  
  &send=false&layout=standard&width=250&show_faces=false&action=like&
  colorscheme=light&font=verdana&height=30"
  scrolling="no" frameborder="0"
  style="border:none; overflow:hidden; width:250px; height:30px;" >

Ich verwende zwei Codes für den Facebook Like Button
Einen mit einer if-Anweisung für den IE und einen anderen ohne allowTransparency für alle anderen Browser. Damit ist das Validierungsproblem gelöst.

The post Facebook – there is no attribute „allowTransparency“ appeared first on MSR-SUPPORT.

Valide Meta-Tags für Facebook

Klaus — Tue, 07 Jun 2011 16:56:41 +0000

In dem Artikel –Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden– habe ich erklärt, wie man Artikelbilder für den Facebook Publisher einbauen kann.

Diese Technik führt aber zu Problemen bei der Validierung da das Open Graph Protokoll angemeckert wird. Nach einiger Recherche im Web habe ich den passenden Hinweis gefunden. Die für Facebook verwendeten META-Tags werden nur dann ausgegeben, wenn Facebook auf die Seite zugreift.

Hier der Code zur Abfrage :

Nun müssen die META-Tags nur noch zusammen mit der einer if Abfrage eingebunden werden. Die Werte werden erst dann ausgegeben, wenn die Funktion den Wert true liefert.

Schon erledigt, kein weiteres Validierungsproblem? Zu mindestens nicht damit.

The post Valide Meta-Tags für Facebook appeared first on MSR-SUPPORT.

Social Media – MSR-SUPPORT

Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden

Lösung -Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden :

Facebook – there is no attribute „allowTransparency“

there is no attribute „allowTransparency“

Valide Meta-Tags für Facebook