Kategorie: Social Media

Kategorien
Social Media Tutorials

Google Plus Kommentare einbinden

Schon lange sieht man auf Webseiten Kommentar-Boxen der verschiedenen Communities und Social Networks. Disqus hat es vorgemacht. Schon über ein Jahr bietet es beispielsweise auch Facebook an. Per IFrame kann man hier das Widget in die eigene Seite einbinden.

Anschließend können die Besucher die Inhalte auf der eigenen Webseite kommentieren, so wie sie es auf Facebook gewöhnt sind. Dafür muss der Benutzer sich logischerweise vorher mit seinen Benutzerdaten einloggen sofern er es noch nicht ist. Schnelles Kommentrieren und gleichzeitiges Teilen von Inhalten erfolgt binnen kürzester Zeit.

Nun hat sich auch Google Plus an das einfache Prinzip des Austauschs angeschlossen. Die Google Plus Kommentare wurden etwa Mitte April 2013 für den Bloggerdienst blogger.com freigeschaltet.

Über ein paar Umwege lassen sich die Google Plus Kommentare aber auch in die eigene Webseite bzw. den eigenen WordPress Blog einbauen.

Google Plus Kommentarbox

Je nach Bedarf kann man, wie es auch bei den anderen Sozialen Netzwerken möglich ist, bestimmen, ob die Kommentare auch den Freunden mitgeteilt werden sollen. Bei Google ist die Standardeinstellung bei „Öffentlich“ (siehe Screenshot oben).

Einbinden der Kommentarbox in die eigene Webseite

Der Einbau der Comments kann durch den Einbau eines IFrames erfolgen, in dem das entsprechende Widget mit ein paar Parametern aufgerufen wird:

https://plusone.google.com/_/widget/render/comments?bsv&href=LINK-ZUR-SEITE&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&hl=de

Mit dem Parameter href, den ich hier als LINK-ZUR-SEITE fett markiert habe, wird die URL der Seite übergeben. Bei einem Blog ist es logischerweise die Artikelseite. Dynamisch könnte man hier mit der Funktion the_permalink() die URL zum Artikel im Template (single.php) ausgeben.

WordPress Plugin zum Einbau der Google+ Kommentare

Mittlerweise gibt es fertige Plugins, die einem die Arbeit des Einbaus abnehmen. Hierbei werden die Inhalte mit Javascript nachgeladen. Ein schönes Plugin, dass neben Google Plus gleich andere Dienste wie Facebook, Disqus sowie die internen WordPress Kommentare anzeigt ist Comments Evolved for WordPress.

PluginPlugin

Wie sich das Ganze beim Einsatz des Plugins mit den deutschen Datenschutzgesetzen vereinbaren lässt, ist eine andere Frage.

Ein Plugin zum reinen Einbau der G+ Kommentarbox ist Google+ PlusOne Comments von André Goldmann.

Kategorien
Social Media

Google Author Tag einbinden

Wie man den Google Author Tag einbinden kann, werde ich in diesem kleinen Tutorial kurz vorstellen. Beim Suchen auf Google werden viele bereits bemerkt haben, dass in den Ergenissen Autorenbilder schon sehr häufig vorhanden sind.

Dass die Bilder der Autoren in den Suchergebnissen die Klickrate deutlich erhöhen können, ist kein Geheimnis. Bilder sind auffälliger als Text. Sie werden somit vom Gehirn durch das menschliche Auge aufgrund stärkerer Reize schneller wahrgenommen.

Hier ein Beispiel wie das Bild in den Suchergebnissen aussehen wird (Das Beispiel habe ich mit dem Data Testing Tool von Google gemacht. Mit diesem kann man die eingebundenen Tags bereits vorab testen.):

Ein Beispiel welche Auswirkung der Google Author Tag hat.

Den Google Autoren-Tag kann man sehr schnell einbinden. Es ist bereits in wenigen Minuten erledigt:

1.) Google Plus Account erstellen

Als erstes benötigt man einen Google+ Account. Nachdem man diesen angelegt bzw. mit seinem bestehenden Google Konto verknüpft hat, wird ein entsprechendes Profilbild benötigt. Hier sollte man ein ansprechendes Bild mit auffälligen kontrastreichen Farben auswählen und anschließend in den Account hochladen.

2) Den rel=“author“ Tag einbinden

Kommen wir nun zum wichtigsten Teil der Einbindung. Damit das Bild in den Suchergebnissen (SERPs) auftaucht, muss ein Link mit einem bestimmten Attribut im HTML-Code der Webseite platziert werden. Für WordPress gibt es mal wieder diverse Plugins, die einem die Einbindung abnehmen. Diese fügen in die Webseite einen Link-Tag in den HEAD-Bereich der Seite. Ein solches Plugin ist zum Beispiel das WordPress SEO Plugin von Yoast.

Per Hand wird der Autor Tag in die Seite mit folgendem HTML-Code in den Kopfteil (zwischen <head> und </head>) eingebunden:

<link href=”https://plus.google.com/112945773614855890543“ rel=”author” />

Die lange Zahl steht dabei für das jeweilige Google+ Profil dessen Bild in die Suchergebnisse man schließlich einbinden will. Mit dem Attribut rel=“author“ gibt man die Beziehung zur gelinkten Webadresse an, in diesem Fall ist es die Autorenschaft (Englisch: authorship) der Seite.

Zusätzlich kann man zuerst auch eine Autorenseite auf der eigenen Webseite erstellen und auf diese mit dem gleichen rel=“author“ Attribut verlinken. Auf der Autorenseite selbst link man dann mit dem rel=“me“ Attribut auf sein Google+ Profil:

<a href=”https://plus.google.com/112945773614855890543“ rel=”me” target=“_blank“>Mein Google+ Profil aufrufen</a>

3. Verknüpfen der eigenen Webseiten im Profil unter „Macht mit bei“

Ein wichtiger Punkt für die Anzeige des eigenen Autorenbilds in der Suche ist schließlich noch die Veknüpfung der Webseite unter „Macht mit bei“ im Google Plus Profil. Dazu geht man im oberen Menü auf „Über mich“. Im Kasten mit der Überschrift „Links“ kann man die Websites und Blogs eintragen, auf denen man als Autor aktiv ist:

bearbeiten-der-webseiten-google-plus

Mit diesem letzten Schritt verifiziert Google, ob Ihr tatsächlich der Autor der eingetragenen Webseite seid. Nachdem man seine URLs angegeben hat, kann man die Anzeige mit dem Data Testing Tool unter Angabe der Internetadresse testen.

Kategorien
Social Media

Google Plus auf Webseite einbinden

Google Plus auf Webseite einbinden und das möglichst unkompliziert und schnell: In diesem Artikel möchte ich das Vorgehen kurz erklären. Es ist in der Regel in wenigen Minuten gemacht. Falls man ein CMS oder Blogsystem wie Word Press hat, dann geht das in der Regel noch schneller mit einem Plugin.

Hat man kein etabliertes System wie Word Press oder dergleichen und kann nicht auf bereits fertige Plugins zurückgreifen, dann muss man den HTML-Code per Hand an die richtige Stelle platzieren.

Den Code für Google Plus erhält man auf der Google+ Platform unter Google Developers. (Achtung, nicht wundern: Der Generator für den Code wird etwas verzögert im oberen Teil der Seite nachgeladen.)

Und so sieht der Google Plus Generator dann aus, nachdem er geladen wurde:

button-generator

Im linken oberen Bereich muss man zuerst die Größe (size) auswählen. Entsprechend sieht man in der rechten Vorschau den Button. Man hat die Auswahl zwischen „small“, „medium“, „standard“ und „tall“. Hier auf seomeo.de sieht man links und unter dem Beitrag den Google+ Button in der Größe „tall“.

In der ComboBox unter annotation kann man die Ausrichtung der Anzeige für die gemachten Empfehlungen festlegen. Bei inline wird die Anzahl im laufenden Textfluss angezeigt. Bei der Auswahl bubble wird die Anzahl als Seifenblase, ähnlich wie bei Comics, entweder oben oder rechts vom Button selbst angezeigt. Ob rechts oder oberhalb hängt von der ausgewählten Buttongröße ab.

Unter width legt man die Breite des gesamten Buttonbereichs fest.

Mit der vierten Einstellung legt man noch die Sprache (language) fest. Bei der Ausrichtung inline steht zuerst die Anzahl der Empfehlung und anschließend folgender Text rechts neben dem Plus-Button: „Auf Google empfehlen“.

Unter Advanced options kann man noch folgende Einstellungen festlegen:

  • Asynchronous
  • HTML5 valid syntax

Interessant ist hier die Option URL. Hier kann man, wenn man möchte, eine feste Adresse für die Empfehlung / Like festlegen. Wird keine URL festgelegt, dann wird immer die Internetadresse ausgelesen, auf der der Button gerade zu sehen ist und angeklickt wurde.

Nachdem man sich durchgeklickt hat, erscheint rechts im Textfeld der fertige Code. Dieser könnte so aussehen:

<!– Place this tag where you want the +1 button to render. –>
<div class=“g-plusone“ data-annotation=“inline“ data-width=“300″></div>

<!– Place this tag after the last +1 button tag. –>
<script type=“text/javascript“>
window.___gcfg = {lang: ‚de‘};

(function() {
var po = document.createElement(’script‘); po.type = ‚text/javascript‘; po.async = true;
po.src = ‚https://apis.google.com/js/plusone.js‘;
var s = document.getElementsByTagName(’script‘)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Den oberen <div>-Tag kann man nun kopieren und platziert ihn an eine beliebige Stelle auf der eigenen Webseite. Unterhalb muss man noch den zweiten Teil (Javascript Code) in den HTML-Quelltext einfügen. Ich empfehle den zweiten Teil kurz vor dem schließenden <body>-Tag einzufügen (vor </body>).

Wo man den Empfehlen-Button in die Webseite einbindet, ist einem selbst überlassen. Je auffälliger im sichtbaren Bereich, desto höher ist die Wahrscheinlichkeit, dass er gesehen und schließlich von einem Nutzer geklickt wird. Social Media ist wichtig und sollte nicht vernachlässigt werden.