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.

facebookintegration

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 'http://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

    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

      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

    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

      Hallo,

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

      < ?php if ( is_archive() ) { ?> 

      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

    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?

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich ĂŒber die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhĂŒbschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmĂ€ĂŸig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nÀchsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    NĂŒtzliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, HintergrĂŒnde, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder BĂŒcher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    NĂŒtzliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed