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

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.

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' );
Code-Sprache: PHP (php)

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>
Code-Sprache: HTML, XML (xml)

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' );
Code-Sprache: PHP (php)

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.

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' );
Code-Sprache: HTML, XML (xml)

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 🙂