Bestimme selbst, wie dein geteilter Facebookpost aussehen soll.

Mit einem kleinen Codeschnipsel in der Header.php könnt ihr selbst festlegen, welches Bild, welcher Titel und welche Beschreibung an Facebook weiter gegeben werden soll. So geht ihr auf Nummer sicher, dass euer geteilter Post auch auf Facebook schick aussieht.

Webseiten auf Facebook teilen zu lassen ist eine super Sache. Allerdings greift sich Facebook einfach irgendeine Grafik heraus und setzt im Default Zustand als Beschreibungstext lediglich die ersten Worte.

Die elegante Lösung: Gebt selbst Facebook vor, was an Inhalten übernommen werden soll.

Ihr könnt selbst festlegen, welches Bild, welcher Titel und welche Beschreibung an Facebook weiter gegeben werden soll. So geht ihr auf Nummer sicher, dass euer geteilter Post auch auf Facebook schick aussieht. Dafür sind die Open Graph Angaben im Header der Website zuständig:

<meta property="og:title" content="Titel der Seite" />
<meta property="og:description" content="Beschreibungstext" />
<meta property="og:image" content="dein_Beitragsbild.jpg" />

Und so sieht das dann in Facebook aus: facebookintegration2

Es gibt diverse Plugins, mit denen man Bilder und Texte zum Teilen für Facebook explizit setzen kann. Beispielsweise das SEO-Plugin von Yoast. Wenn bei euch allerdings das Beitragsbild durchgängig zum Teilen ausreicht, dann könnt ihr euch diesen Mehraufwand beim schreiben eines einzelnen Blogartikel sparen

Denn die Integration der Open Graph Daten ohne Plugin ist super einfach in wenigen Minuten erledigt.

Diese Lösung hier nimmt den Seitentitel, den Auszug der Seite und das Beitragsbild als Basis für das Snippet für Facebook

  1. Ihr benötigt ein Defaultbild, dass auf der Startseite, den Archivseiten oder bei Seiten ohne Beitragbild angezeigt wird. Legt es in euren Theme- bzw. Childtheme-Ordner in den Ordner „images“.
  2. Ihr setzt folgenden Code in die Header.php ein:
    <!--allgemeine Angaben für alle Seitentypen -->
    <meta property="og:site_name" content="ideenlounge.de" />
     <meta property="og:url" content="<?php echo 'https://www.ideenlounge.de'.$_SERVER['REQUEST_URI']; ?>"/>
     <meta property="og:type" content="website" /> 
     <meta property="og:locale" content="de_de" />
    <!-- Archivseiten 
         Titel = Category-Titel
         Description = Blogtitel & Blogbeschreibung
         Bild = Standardbild -->
    <?php if ( is_archive() ) { ?>
     <meta property="og:title" content="<?php single_cat_title( '', true ); ?>" />
     <meta property="og:description" content="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>" />
     <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" />
     <?php } 
    <!-- Single / Artikel -->
     elseif ( is_single()) {?>
     <meta property="og:title" content="<?php the_title() ?>" />
     <meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
    <?php
    <!--Single / Artikel: 
    Wenn kein Beitragsbild vorhanden ist, wird das Standardbild angezeigt-->
     if(has_post_thumbnail()) :?><meta property="og:image" content="<?php $thumb_id = get_post_thumbnail_id();
     $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
     echo $thumb_url[0];
     ?>" />
     <?php else :?>
     <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" />
     <?php endif;?>
    <!-- Restliche Seiten (Startseite, Seiten, Suche, etc...)
         Titel = Blogtitel
         Description = Blogbeschreibung
         Bild = Standardbild -->
     <?php } else {?>
     <meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
     <meta property="og:description" content="<?php bloginfo( 'description' ); ?>" />
     <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" />
     <?php }?>

    Die roten Kommentare könnt ihr entfernen. Wichtig: Bitte ersetzt am Anfang den Wert für og:site_name mit eurem eigenen Namen und setzt für das Standardbild – hier opengraph.jpg – den Namen eures Standardbildes ein.

  3. Legt euch ein Standardbild an, dass angezeigt werden soll, wenn kein Beitragsbild vorhanden ist. 
    Nennt es „opengraph.jpg“ und legt es in den Ordner „images“ eures Themes.
  4. Test und Ãœberprüfung Auf  https://developers.facebook.com/tools/debug/ könnt ihr eure URL testen. Wenn alles richtig ist, sollten keine Fehlermeldungen erscheinen und eine Vorschau eures Snippets angezeig werden: facebookintegration3 Testet am besten alle Seitentypen – die Startseite, eine Beitragsseite, eine Seite und eine Archivseite.

Der Code kann noch weiter aufgedröselt werden – beispielsweise für Seiten oder mit Ausgabe eines Kategoriebildes. Hier auf der Ideenlounge bin ich mit dieser Lösung jedoch super zufrieden. Also Leute – testet das mal und teilt fleißig diesen Artikel 🙂

Nachtrag: Beispiel für ein Bild global für den kompletten Blog

Wenn ihr einfach global für euren Blog ein Bild einmalig einstellen möchtet, braucht ihr nicht die ganzen Abgfrage, ob es eine Single Seite oder ein Archiv ist. dann reicht einfach diese Zeile:

<meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg“ />

In diesem Fall wird ein Bild global für den kompletten Blog genommen.

Kommentare

  1. Heike 1. Juli 2015 um 22:17 Uhr

    Das werde ich mir doch mal näher anschauen, bin selbst gerade einen Monat dabei mit meinem Blog und kann noch Tipps gebrauchen

    • Mirjam 2. Juli 2015 um 11:35 Uhr

      Uiii, für einen Monat schaut dein Blog aber schon richtig gut aus! Habe gleich mal dein Gewinnspiel in meinem Kochblog geteilt 🙂

  2. urs 10. September 2015 um 21:04 Uhr

    Hi Mirjam
    wollte heute deine lösung auf meinem Blog anwenden. Leider ist der Blog nicht mehr erreichbar, sobald ich deinen code oben (angepasst auf meine Umgebung) in die header.php des themes einfüge.

    So sieht der angepasste code aus den ich einfüge:

    <meta property="og:url" content="“/>

    <meta property="og:title" content="“ />
    <meta property="og:description" content=" | “ />
    <meta property="og:image" content="/images/default_article.jpg“ />
    <?php }

    elseif ( is_single()) {?>
    <meta property="og:title" content="“ />
    <meta property="og:description" content="“ />
    <?php

    if(has_post_thumbnail()) :?><meta property="og:image" content="“ />

    <meta property="og:image" content="/images/default_article.jpg“ />

    <meta property="og:title" content="“ />
    <meta property="og:description" content="“ />
    <meta property="og:image" content="/images/default_article.jpg“ />

    vielleicht hast mal Zeit, wäre super lieb 😉
    DankUrs

    • coloritas 11. September 2015 um 9:35 Uhr

      Hallo,

      da hat es ein paar PHP-Schleifen zerschossen 🙂 Und zwar fehlt beispielsweise die Abfrage

       

      Sehe ich das richtig, dass du immer das selbe Bild geteilt haben möchtest?
      Wenn ja, kannst du statt dem ganzen Quellcodegedönse eine Zeile einsetzen – diese Zeile habe ich im Artikel ganz unten ergänzt, nachdem WordPress sich weigert, diese Zeile in einem Kommentar auszugeben 🙂

      Die ganzen Abfragen braucht es nur, wenn man für die Single Seiten jeweils das Beitragsbild verwenden möchte.

      Und die anderen Angaben wie og:description und og:title würde ich weglassen, wenn hier kein expliziter Inhalt angegeben wird – denn sonst kann es passieren, dass nur ein Leerzeichen an Facebook übergeben wird.

      Ciao,
      Mirjam

  3. urs 11. September 2015 um 18:49 Uhr

    Danke Mirjam
    Da habe ich wohl was falsch verstanden bei deiner Lösung.
    Facebook „frisst“ meine ‚futured images‘ nicht, wenn ich den Beitragslink poste. Mit deiner Lösung hier werden die vordefinierten Bilder gezeigt. Ist mein fehler…aber vieleicht weisst du da ja aucg
    h Rat?

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



[shariff backend="on"]
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz