Eigenes Logo, passende Linkfarbe und mehr: Den WordPress-Feed für Feedly optimieren

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 3 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Der populäre Feedreader „Feedly“ gibt euch ein paar Möglichkeiten, wie ihr die Darstellung eures Feeds ein wenig individueller gestalten könnt. Hier zeige ich euch, wie ihr euren WordPress-Feed entsprechend anpasst.

Update vom 26. Mai 2016: Bis auf die Linkfarbe habe ich die Anpassungen für mein Blog rausgenommen. Wenn ich nach meinem Feed gesucht habe, wurde in den Suchergebnissen bis zuletzt das Icon nicht angezeigt, und das Logo oben in jedem Beitrag ist auch verschwunden.

Update vom 10. September 2015: Heute ist mir aufgefallen, dass auch die angepasste Linkfarbe jetzt in der Webversion angezeigt wird.

Update vom 23. August 2015: Seit Kurzem hat Feedly auch das Icon und das Cover-Bild erkannt. Ich weiß nicht genau ob es an der vergangenen Zeit liegt oder daran, dass ich jetzt 10 Feedly-Leser habe 🙂

Update vom 13. August 2015: Das Featured Image erkennt Feedly korrekt und nutzt es zur Vorschau (Feedly scheint hier aber die alten Artikel nicht zu aktualisieren). Das Cover-Bild, das Icon sowie die veränderte Linkfarbe in der Web-App sind aber immer noch nicht da.

Featured Image in den Feed einfügen

Normalerweise wird im Feed das Featured Image nicht angezeigt. Feedly kann es somit auch nicht berücksichtigen und zieht sich als Vorschaubild für einen Artikel das erste Bild aus dem Artikel, soweit es höher und breiter als 415 Pixel ist. Das ist natürlich meist nicht optimal, weshalb ich mir auf Basis dieser Stack-Exchange-Frage eine kleine Funktion gebastelt habe, um das Featured Image in den Feed einzufügen:

function offf_add_featured_imgage( $content ) {
    global $post;
    if ( has_post_thumbnail( $post->ID ) ) {
        $post_thumbnail_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
        $post_thumbnail = "<figure><img src='$post_thumbnail_url' class='webfeedsFeaturedVisual'></figure>";
        $content = $post_thumbnail . $content;
    }

    return $content;
}
add_filter( 'the_content_feed', 'offf_add_featured_imgage' );
add_filter( 'the_excerpt_rss', 'offf_add_featured_imgage' );

In der offf_add_featured_imgage()-Funktion wird geprüft, ob der aktuelle Beitrag ein Featured Image hat. Ist das der Fall, wird die URL in der Variable $post_thumbnail_url gespeichert und anschließend das Markup zusammengesetzt sowie in $post_thumbnail gespeichert. Der Klassenname wird von Feedly vorgegeben – vermutlich würde es auch ohne funktionieren, da es ja das erste Bild im Inhalt ist.

Anschließend wird das Featured Image vor dem Inhalt eingefügt und der Inhalt zurückgegeben. Diese Funktion hängen wir an die Hooks the_content_feed und the_excerpt_rss.

Logo und eigene Linkfarbe in Feedly

Feedly macht es relativ einfach möglich, ein Logo auf die Seiten eines einzelnen Artikels zu integrieren sowie eine eigene Linkfarbe festzulegen. Dafür müssen die folgenden zwei Zeilen in den Feed-Header und ein Namespace in das rss-Tag eingefügt werden:

<webfeeds:logo>http://example.com/logo.svg</webfeeds:logo>
<webfeeds:accentColor>#00FF00</webfeeds:accentColor>

Um das zu bewerkstelligen, benötigen wir die folgenden zwei Funktionen:

function offf_add_namespace() {
    echo 'xmlns:webfeeds="http://webfeeds.org/rss/1.0"';
}
add_action( 'rss2_ns', 'offf_add_namespace' );

function offf_add_header_information() {
    echo '<webfeeds:logo>http://example.com/logo.svg</webfeeds:logo>
<webfeeds:accentColor>#00FF00</webfeeds:accentColor>';
}
add_action( 'rss2_head', 'offf_add_header_information' );

Mit Hilfe des rss2_ns-Hooks fügen wir am Ende des rss-Tags den Namespace aus der offf_add_namespace()-Funktion ein. Nach demselben Prinzip gehen wir mit den zwei Zeilen für das Logo und die Linkfarbe vor, nur dass wir die offf_add_header_information()-Funktion an den rss2_head-Hook anhängen.

Icon und Cover-Bild einfügen

Feedly lässt euch des Weiteren ein Cover-Bild sowie ein Icon einfügen, das in der Vorschau des Feeds zu sehen ist, wie hier bei The Verge.

Cover-Bild und Icon bei der Feedly-Seite von The Verge. (Screenshot: Feedly)
Cover-Bild und Icon bei der Feedly-Seite von The Verge. (Screenshot: Feedly)

Dafür müssen zwei weitere Header-Informationen eingefügt werden, die wir mit in die offf_add_header_information()-Funktion schreiben werden. Vollständig sieht die Funktion dann so aus:

function offf_add_header_information() {
    echo '<webfeeds:cover image="http://example.com/cover-image.png" />
<webfeeds:icon>http://example.com/icon.svg</webfeeds:icon>
<webfeeds:logo>http://example.com/logo.svg</webfeeds:logo>
<webfeeds:accentColor>#00FF00</webfeeds:accentColor>';
}
add_action( 'rss2_head', 'offf_add_header_information' );

Zum Schluss: Warten

Danach müsst ihr warten. Das Logo und die Linkfarbe wurden bei mir innerhalb einiger Stunden übernommen. Die Linkfarbe bisher allerdings nur in der App, nicht in der Web-Version. Das Cover-Bild sowie das Icon konnte ich noch nicht ausmachen. Auch der Inhalt der Beiträge wurde in Feedly noch nicht aktualisiert, weshalb die Featured Images dort noch nicht zu sehen sind. Vielleicht aktualisiert Feedly das, nachdem ein neuer Beitrag geschrieben wurde – ich werde den Artikel hier nachträglich entsprechend anpassen.

Den Code findet ihr als Plugin auf GitHub. Ihr müsst vor dem Hochladen natürlich noch die Pfade zu den Bildern sowie den Hexadezimalwert der Farbe anpassen.

PS: Wenn das Blog erfolgreich genug ist, scheint sich Feedly die Informationen auch anders zu ziehen. Bei The Verge konnte ich jedenfalls dieses Markup in Feed nicht ausmachen 🙂

Das könnte auch interessant sein

11 Kommentare zu »Eigenes Logo, passende Linkfarbe und mehr: Den WordPress-Feed für Feedly optimieren«

  1. Christopher Kästel

    Danke für das Plugin, hab es auch direkt angepasst und aktiviert. Habe aber noch eine kleine Frage: Welche Größe benötigt das Cover-Bild?

    Hatte vor kurzem auch schon einmal probiert das Featured Image mit in den Feed zu bekommen, ohne Erfolg. Hoffe das es diesmal besser klappt 😉

    Antworten
    1. Florian

      Hi Christopher,

      freut mich, dass dir das Plugin gefällt 🙂 Ich habe für das Cover-Bild einfach das Header-Bild von meiner Facebook-Seite versucht (bin mobil unterwegs, kann dir die Größe deshalb gerade nicht nennen – Link zur FB-Seite findest du in der Sidebar 🙂 ).
      Was für Mindestmaße notwendig sind, stand in dem Feedly-Post leider nicht ...

      Viele Grüße,
      Florian

      Antworten
        1. Florian

          Hi Christopher,

          heute habe ich gesehen, dass Feedly jetzt auch das Titelbild und das Icon übernommen hat – scheint von der Größe also so okay zu sein 🙂

          Viele Grüße,
          Florian

          Antworten
  2. Su

    Hallo Florian,
    könntest du den Code ggf. ergänzen?
    Wenn kein featured img da ist, soll feedly das erste Foto im Artikel nehmen oder wenn kein Foto + kein featured img, dann das Logo?
    Geht so etwas?
    Und noch was: Müssen es svg Dateien für Logo etc sein oder gehen auch andere Bildformate wie .png?

    Antworten
    1. Florian

      Hi,

      wenn das erste Bild im Beitrag breit genug ist, dann zieht sich Feedly das automatisch. Es muss also nicht gesondert angegeben werden, dass er das wählen soll, wenn kein Beitragsbild gesetzt ist.

      Wenn das Logo erscheinen soll, wenn kein Bild im Beitrag ist, dann müsstest du das im Feed ausgeben, wie ich das hier mit dem Featured Image mache. Probier es mal so:

      function offf_add_featured_imgage( $content ) {
      	global $post;
      	$dom = new DOMDocument();
      	libxml_use_internal_errors( true );
      	$dom->loadHTML( $post->post_content );
      	libxml_clear_errors();
      	$images = $dom->getElementsByTagName( 'img' );
      	if ( has_post_thumbnail( $post->ID ) ) {
      		$post_thumbnail_url = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
      		$post_thumbnail     = "
      "; $content = $post_thumbnail . $content; } elseif ( $images->length == 0 ) { $logo = "<figure><img src='logo_url' class='webfeedsFeaturedVisual'></figure>"; $content = $logo . $content; } return $content; } add_filter( 'the_content_feed', 'offf_add_featured_imgage' ); add_filter( 'the_excerpt_rss', 'offf_add_featured_imgage' );

      Habe es nicht getestet, müsste aber funktionieren. Ich weiß nicht genau, ab welcher PHP-Version DOMDocument() unterstützt wird – könnte sein, dass es mit dem Minimum von WordPress nicht klappt.

      Wie das mit anderen Bildformaten für das Logo aussieht, kann ich nicht sagen. Im Feedly-Blogpost nutzen sie für das Icon SVG.

      Antworten
  3. Su

    Danke, ich teste jetzt erst mal dein Plugin und gucke dann weiter.
    Nutze aber .png statt .svg, bin ja faul, wenn das nicht geht, muss ich die Foto Formate anpassen.

    Antworten
  4. Bernhard

    Hey Florian,

    danke für den tollen Artikel. Mir war selbst nicht klar, wie viel man Feedly und Co. über diese neuen Werte mitgeben kann.

    Es wäre vielleicht eine gute Idee automatisch das neue Site-Icon zu verwenden. Dann muss man deinen Code nicht manuell anpassen. Für die Linkfarbe und das Cover-Bild könnte man eine zusätzliche Customizer-Option anbieten.

    Falls du nichts dagegen hast, würde ich hierzu ein kleines Plugin basteln 🙂

    Antworten

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.