Teilen, Kommentieren und Unterstützen

Diese Webseite ist mein Platz für Artikel rund um alles was mich interessiert und beschäftigt. In jeden Artikel investiere ich einige Stunden meiner Freizeit - und das mach ich gern. Ich freue mich immer, wenn Euch meine Artikel gefallen oder zur Diskussion aufgerufen haben.

Um euch dies zu erleichtern biete ich auf meiner Seite folgende Möglichkeiten an:

Shariff Schaltflächen zum sicheren Teilen

Schon seit längerem schiebte ich die Entscheidung vor mir her, Teilen-Schaltflächen zu meinen Artikel anzubieten. Sharing Buttons bekommt man von Facebook, Twitter &Co. zwar mundgerecht dargeboten, allerdings sind diese nicht ganz unbedenklich. Direkt beim Laden dieser im Browser senden sie Informationen "nach Hause" und darüber können Profile über Nutzer und deren Verhalten erstellt werden. Ich möchte nicht behaupten, dass Sie dies auch wirklich tun, mir und meinen Lesern bringt das Ganze aber auch nichts. Um solche Inhalte auf anderen Webseiten in meinem Browser zu blockieren und damit ganz nebenbei den Seitenaufbau zu beschleunigen nutze ich die Firefox-Erweiterung Ghostery, welche ich an dieser Stelle empfehlen kann.

Um auf meiner Webseite nicht-aktive Teilen Schaltflächen anzubieten setze ich auf Shariff. Das "Social-Media-Buttons mit Datenschutz"-Projekt Shariff wurde durch die c't Magazin Redaktion ins Leben gerufen und bietet schlicht-elegante Teilen Schaltflächen zu einem Dutzend Diensten, welche erst aktiv werden, nachdem sie geklickt wurden. Das Projekt wird open source bei github geführt - das schafft Transparenz und Vertrauen und ermöglichte mir bereits einen Verbesserungsvorschlag einzubringen.

Meta Tags zum schöneren Teilen

Egal ob bei Facebook, Twitter, Google, Pinterest, Telegram oder Whatsapp... ein Link wird heutzutage von vielen Diensten direkt mit einigen weiteren Informationen versehen. Das kann z.B. so aussehen:

Der Link wird aufgerufen und Daten dazu abgerufen. Dass dabei von System zu System einiges schief gehen kann, kann man sich denken. Eine falsch gewählte Einleitung wäre möglich, wenn Twitter Informationen zu einem Link nicht finden kann versagt dieser allerdings komplett den Dienst und der geteilte Link wird recht schmucklos in dem Feed der Nachrichten untergehen.

Um dem Chaos Einhalt zu gebieten wurde das OpenGraph Protokoll ins Leben gerufen. Neben den sichtbaren Inhalten einer Webseite werden dazu zusätzlich so genannte Meta Tags im Quelltext eingefügt. Über diese werden Informationen wie der Autor, die Überschrift und das Artikelbild eines Artikels eindeutig angeboten. Auf diese können sich dann Facebook und Co. bei der Ausschmückung wie oben gesehen beziehen.

Joomla

Meine Webseite basiert auf Joomla und Meta Tags werden hier standardmäßig nicht angeboten. Daher wurden einige Informationen von Facebook falsch dargestellt und bei Twitter blieben meine Links prunklos in der Ecke liegen. Meine Suche nach einem guten Joomla Plugins zur Einbindung von OpenGraph Meta Tags war leider schwierig. Die kostenlosen scheinen unreif und die kostenpflichtigen kamen mir für eine so einfache Aufgabe nicht in Frage. Es mussten lediglich einige bereits bekannte Informationen im Quelltext eines Artikels ergänzt werden.

Ich habe daher die manuelle Lösung gewählt. Zunächst muss eine Kopie der Artikel-Ansicht erstellt werden. Das stellt sicher, dass ein Update nichts überschreibt. Dazu ist im Menü folgendermaßen vorzugehen.

Extensions > Template Manager > Templates > (meinTemplate) >  Create Overrides > Components > com_content > article

Anschließend kann im Editor folgender Datei editiert werden. Es müssen die nachfolgenden Codezeilen nach dem ersten php Block eingefügt werden: templates/<dein Template>/html/com_content/article/default.php (ca. ab Zeile 33):

<?php
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) {
        $timage=htmlspecialchars(JURI::root().$images->image_fulltext);
} elseif (isset($images->image_intro) and !empty($images->image_intro)) {
        $timage=htmlspecialchars(JURI::root().$images->image_intro);
} else {
        $timage='http://blindfuchs.de/images/blind_mobil_2.png';
}
$tdescription=$this->escape(mb_strimwidth(strip_tags($this->item->introtext), 0,50, "..."));
$doc =& JFactory::getDocument();
$doc->addCustomTag('
        <meta property="author" content="'.$this->item->author.'"/>
        <meta property="og:site_name" content="Blindfuchs.de"/>
        <meta property="og:email" content="Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein."/>

        <meta property="og:type" content="article"/>
        <meta property="og:title" content="'.$this->escape($this->item->title).'"/>
        <meta property="og:description" content="'.$tdescription.'"/>
        <meta property="og:url" content="'.JURI::current().'"/>
        <meta property="og:image" content="'.$timage.'"/>

        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="'.$this->escape($this->item->title).'">
        <meta name="twitter:site" content="@nurzner">
        <meta name="twitter:creator" content="@nurzner">
        <meta name="twitter:url" content="'.JURI::current().'">
        <meta name="twitter:description" content="'.$tdescription.'">
        <meta name="twitter:image" content="'.$timage.'">
        <meta name="twitter:image:alt" content="'.$this->escape($images->image_fulltext_alt).'">

        <meta itemprop="name" content="'.$this->escape($this->item->title).'">
        <meta itemprop="description" content="'.$tdescription.'">
        <meta itemprop="image" content="'.$timage.'">

        <meta name="description" content="'.$tdescription.'">
');

//print_r($this->item);
?>

Mehr ist nicht zu tun. Beim Kopieren&Einfügen sollten natürlich die spezifischen Informationen wie eMail, Seitentitel, Twittername oder der Pfad zum Standard-Bild angepasst werden. Nachdem die Änderungen wirksam wurden kann die Funktion beispielsweise bei den Validierern von Facebook, Twitter oder RichPreview getestet werden.