5202

ein Blog über technische Fragen zu Blogger

Einen Blogger-Post mittels Text-Link teilen

von

Social Buttons kennt ihr. Das sind die G+, Facebook oder Twitter Buttons, mit denen ihr einen Post teilen, liken oder sonst was anstellen könnt.

Diese Buttons arbeiten zweiseitig, d.h. sie bringen nicht nur eure ‘Likes’, ‘Plus’ whatever in die entsprechenden sozialen Netze, sondern setzen aus diese Netzwerken Cookies, fragen Daten ab und stellen allen möglichen Unsinn an. Unanhängig von der Frage, ob ihr das zB. aus ‘Datenschutzgründen’ nicht wollt [Anm: Ich sehe darin kein Problem!], machen diese Buttons eure Seite langsamer.

Falls ihr die bidirektionale Funktion der Buttons nicht braucht, sondern euren Besuchern nur eine einfache Möglichkeit zum Teilen eines Posts geben wollt, könntet ihr statt Buttons auch simple Textlinks ohne Script anbieten.

  • kein Javascript, kein FB oder Twitter Plugin nötig
  • Textlinks lassen sich beliebig gestalten
  • statt Text könnt ihr auch einen Icon-Font oder eigene Bilder einbinden

In dem heutigem Post geht es nun darum, wie ihr solche Textlinks in Blogger erzeugt.

Hintergrund

Ein Share-Button ist letztlich nur ein Link zu einer Adresse im jeweiligen Netzwerk - bei Google setzt sich so eine Adresse aus zwei Parametern zusammen und zwar der Grund-Adresse:

https://plus.google.com/share

Plus der Attribution mit einer Post-URL, die an die Grund-Adresse angehängt wird:

https://plus.google.com/share?url=http://www.5202.de/2014/06/bilder-mit-javascript-auf-postbreite.html

Mit dieser Adresse könnt ihr nun einen simplen teile meinen Post Link bauen [klicked den Link und ihr könnt einen Post von mir auf G+ teilen].

Analog dazu existiert eine solche Grund-Adresse für Facebook:

https://www.facebook.com/sharer/sharer.php

Und Twitter:

https://twitter.com/intent/tweet

Mit dieser Grund-Adresse und der Attributionen gibt es für jeden Post einen Share-Link. Das Problem dabei ist, dass ihr den Link natürlich nicht einzeln per Hand schreiben wollt, sondern das ganze soll dynamisch passieren.

Solch einen dynamischen-Link könntet ihr nun mit Javascript1 bauen. Das funktioniert, ist aber unelegant - vor allem wollten wir ohne zusätzliches JS auskommen.

Erstaunlicherweise besitzt Blogger nun solche dynamische Tags von Haus aus, nur sind die leider unkommentiert und schwer zu finden …

Jeder Blogger Blog-Post besitzt eine share URL:

post.sharePostUrl

Diese share URL könnt ihr mit einer Attribution um die Grund-Adresse erweitern - etwa googleplus:

post.sharePostUrl + "&target=googleplus"

Der Aufruf der Ziel-Adresse erfolgt innerhalb des-Blog Widgets über expr

expr:href='data:post.sharePostUrl + "&target=googleplus"'

Ein ganzer Text-Link zum teilen sieht nun so aus:

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' <span class='share'>G+</span></a>

Ihr könnt diesen Link um eine Title-Tag erweitern. Damit wird euren Besucher einen Hinweis-Text angezeigt, wenn sie mit der Mause über den Link fahren:

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' target='_blank' title='auf G+ teilen'><span class='share'></span></a>

Außerdem ist ein target:’_blank’ Attribut sinnvoll, damit sich die Seite in einem neuen Tab öffnet.

Alles zusammen für G+, Twitter und Facebook:

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' target='_blank' title='auf G+ teilen'><span class='share'>G+/span></a>

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=Facebook&quot;' target='_blank' title='auf Facebook teilen'><span class='share'>Facebook</span></a>

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=Twitter&quot;' target='_blank' title='auf Twitter teilen'><span class='share'>Twitter</span></a>

Einbau

Heads up! Testet das unbedingt zuerst in einem Test-Blog!

Ihr habt nun drei Text-Links - wie verwendet ihr die? Am einfachsten geht das, indem ihr eure bestehende Freigabeschaltflächen durch die drei Text-Links ersetzt:

Ihr sucht dazu in eurem Blog-Widget Blog1 die includable shareButtons:

<b:includable id='shareButtons' var='post'>
     //Code
 </b:includable>

Und ersetzt den gesamten Code in dieser icludable durch die Text-Links von oben.

Schaut, ob ihr im Dashboard unter Layout > Blogposts > bearbeiten das Häckchen bei Freigabeschaltflächen anzeigen gesetzt habt. Ihr solltet nun Text-Links in eurem Blog sehen.

Personalisieren

Wenn ihr die Textlinks personalsieren wollt, macht das mit CSS:

Vorlage > Anpassen > Erweitert > CSS hinzufügen

.shareButton {
font-size: 20px;
display: inline-block;
padding-right: 8px;
color: #444
}

Gibt den Text-Links eine Größe von 20px, einen Abstand nach rechts und die Farbe #444.

Ihr wollt die Text-Links irgenwo anders im Blog haben? Dazu schneidet ihr innerhalb der post includable

 <b:includable id='post' var='post'>

Dieses Snippet aus:

      <!-- share buttons -->
  <div class='post-share-buttons goog-inline-block'>
    <b:if cond='data:post.sharePostUrl'>
      <b:include data='post' name='shareButtons'/>
    </b:if>
  </div>

Und baut es nach belieben innerhalb der post includable ein. Probiert über try/error, wo es euch am besten passt.

Statt mit reinen Text, könnt ihr eure Links auch mit Bilder oder einem Icon-Font wie Font-Awesome2 befüllen. Für Font-Awesome sähe der Code etwa so aus:

<a class='shareButton' expr:href='data:post.sharePostUrl +   &quot;&amp;target=googleplus&quot;' target='_blank' title='auf G+ teilen'><span class='share'><i class='fa fa-google-plus'/></span></a>

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=Facebook&quot;' target='_blank' title='auf Facebook teilen'><span class='share'><i class='fa fa-facebook'/></span></a>

<a class='shareButton' expr:href='data:post.sharePostUrl + &quot;&amp;target=Twitter&quot;' target='_blank' title='auf Twitter teilen'><span class='share'><i class='fa fa-twitter'/></span></a>

Zum Aufruf Links müsst ihr den Font ein eurem Blog einbinden. Dazu kopiert ihr direkt unter euren

<head>

Tag diesen Link:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

Font-Awesome ist eine Schrift, lässt sich also genaus personalisieren wie eine ‘echte’ Schrift, die CSS von oben lässt sich also gleich verwenden.


geschrieben mit StackEdit.