kulturbanause® blog » Google

WordPress: interne jQuery-Version über Google CDN laden

Jonas Hellwig — Thu, 11 Oct 2012 07:57:11 +0000

Wer jQuery in WordPress verwenden will, integriert das Script häufig manuell im Header oder Footer der Seite. Das Script wird dazu heruntergeladen, in den Website-Ordner kopiert und von dort aus verknüpft. Alternativ wird es über ein Content Delivery Network (CDN) von Google & Co. geladen.
WordPress verfügt jedoch auch über eine eigene Version von jQuery, die genutzt werden kann. Diese Version wird auch von Plugins verwendet. Wenn ihr jQuery also manuell hinzufügt, kann es passieren, dass jQuery mehrfach geladen wird. Das dauert länger und kann zu erheblichen Konflikten mit Plugins führen.

Warum sollte man Scripte über ein externes CDN laden?

jQuery (und andere Scripte) über ein CDN zu laden hat mehrere Vorteile. Zum einen wird das Script über die Highspeed-Server von Google oder Microsoft ausgeliefert; diese Systeme sind ganz einfach schneller sind als der eigene Webspace. Darüber hinaus binden sehr viele Websites ihre Scripte über Google & Co ein. Die Wahrscheinlichkeit, dass sich jQuery bereits im Cache des Seitenbesuchers befindet ist daher groß. Der Einsatz eines CDN beschleunigt also für gewöhnlich eine Website.

Problemfall WordPress

Wer WordPress benutzt muss eine Entscheidung treffen. Entweder wird die interne Version von WordPress verwendet, die über den eigenen Server ausgeliefert wird und evtl. sogar veraltet ist. Oder es wird ein CDN verwendet, was zwar schneller ist, aber auch dazu führen kann, dass jQuery doppelt geladen wird und Kompatibilitätsprobleme verursacht.
Im Idealfall greift WordPress selbst auf ein CDN zurück. Dann wird immer die schnelle Version ausgeliefert und es kann auch keine Konflikte mit verschiedenen Versionen geben.

Mit folgenden Anpassungen ersetzt ihr die in WordPress integrierte Version von jQuery durch die von Google gehostete Version. Eine ähnliche Technik nutzt übrigens auch das beliebte HTML5Blank-Theme für WordPress. Beachtet bitte, dass dann auch Plugins, die auf die interne jQuery-Version zugreifen, die "neue" Version laden.

jQuery über Googles CDN laden - functions.php anpassen

Öffnet die functions.php und fügt folgenden Code ein. Das Beispiel verwendet das CDN von Google – es können aber auch andere Quellen verwendet werden. Achtet auch darauf die korrekte jQuery-Version zu laden.

/* jQuery von WordPress deaktivieren und über Google laden */
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'); // hier kann auch eine andere Quelle angegeben werden, z.B. jQuery oder Microsoft. Siehe: http://jquery.com/download/ 
    wp_enqueue_script( 'jquery' );
}  
add_action('wp_enqueue_scripts', 'my_scripts_method');

Script im Header aufrufen - header.php anpassen

Öffnet nun die header.php eures Themes und fügt folgendes Snippet VOR(!) dem API-Hook ein. Dadurch wird jQuery in den der Seite geladen.

Das war auch schon alles. Ab sofort nutzt euer Theme die externe jQuery Version.

Update vom 12. März 2013

In jüngerer Vergangenheit hört man plötzlich häufiger davon, dass es doch nicht sinnvoll ist jQuery über Google zu laden. Ich kann das persönlich nicht beurteilen, möchte aber dennoch auf folgenden Artikel zu diesem Thema hinweisen.

Why Loading Your Own jQuery is Irresponsible

Wenn ihr das Thema weiter beleuchten könnt, freue ich mich über einen Kommentar.

Links zum Thema

WordPress-Codex zu diesem Thema
Use Google Libraries - WordPress-Plugin
3 reasons why you should let Google host jQuery for you - Encosia
jQuery im Footer laden - WP Recipes
Why Loading Your Own jQuery is Irresponsible

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress + Google Analytics: Nur nicht(!) eingeloggte User zählen

Jonas Hellwig — Mon, 01 Oct 2012 06:00:12 +0000

Viele Blogs setzen auf Google Analytics oder vergleichbare Tools zur Erfassung der Seitenzugriffe. Das von Google bereitgestellte Snippet wird dazu in alle Unterseiten eingebunden und protokoliert ab diesem Zeitpunkt die Besuche der Seite. Der Betreiber eines Blogs bewegt sich allerdings recht häufig auf der eigenen Seite und verfälscht damit u.U. die Statistik. Um das zu verhindern, bietet es sich an das Analytics Snippet nur einzubinden, wenn der Besucher nicht in WordPress eingeloggt ist. Das reduziert die Verfälschung der Statistik.

Google Analytics für eingeloggte Benutzer deaktivieren

Mit Hilfe einer simplen WordPress-Funktion kann das Snippet nur dann eingebunden werden, wenn der Besucher der Seite NICHT in WordPress eingeloggt ist.
Passt das Standard-Snippet von Google Analytics dazu wie folgt an.

Update: Google Tag Manager

Google hat den Google Tag Manager zur Verwaltung von Snippets gestartet. Über den Tag Manager können die Code-Snippets verschiedener Dienste (z.B. Analytics, AdWords, Snippets von Fremdanbietern etc.) für verschiedene Websites über eine Benutzeroberfläche verwaltet werden. Das spart Zeit und ermöglicht das Update der Code-Snippets ohne einen Webentwickler kontaktieren zu müssen.

Google Analytics Snippet im Google Tag Manager

Tag Manager einbinden

Der Tag Manager wird über ein globales Snippet einmalig in die Website integriert. Anschließend kann innerhalb des Dienstes das gewünschte Snippet ausgewählt und in die Website integriert werden. Dabei bietet Google verschiedene Einstellungsmöglichkeiten je Snippet an.
Die Abfrage ob ein Benutzer bei WordPress eingeloggt ist, kann für das Analytics-Snippet erwartungsgemäß nicht definiert werden. Würden wir den Code des neuen Tag Managers also so einsetzen, wie wir es oben mit dem Analytics Snippet getan haben, würden wir alle über den Tag Manager verwaltete Snippets deaktivieren. Was also tun?

Theoretische Lösung (ungeprüft!)

Innerhalb des Tag Managers kann ein „custom HTML Snippet“ ausgewählt werden. Hier könnt ihr einen beliebigen HTML- oder JavaScript-Code eingeben. Ob über dieses Element die oben beschriebene Funktion wiederhergestellt werden kann ist mir allerdings aktuell nicht bekannt. Habt ihr dazu bereits Erfahrungen gesammelt?

Quellen und Links zum Thema

Google Tag Manager

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Warum Google+ für Unternehmen so wichtig ist

Annina (Gastautorin) — Thu, 07 Jun 2012 13:38:00 +0000

Im heutigen Gastbeitrag erklärt Annina von twago warum Unternehmen sich mit Google+ beschäftigen sollten und wo der Vorteil der Plattform gegenüber Facebook & Co. liegt.

An Google+ scheiden sich die Geister: Während die einen von einer „Geisterstadt“ sprechen, sehen die anderen in diesem sozialen Netzwerk die Zukunft.
Doch warum sollte ein Unternehmen den Schritt tun und ein Profil auf Google+ anlegen? Haben wir nicht schon alle genug mit der Betreuung von Facebook Profilen, Twitter, Pinterest und diversen zusätzlichen Blogs zu tun? Brauchen wir wirklich noch mehr Social Media?
Die Frage muss sich wohl letztendlich jedes Unternehmen selbst beantworten. Trotzdem gibt es einige gute Gründe warum Google+, das erst seit Ende Juni 2011 existiert, für ein Unternehmen wichtig ist und warum Google+ auf jeden Fall bei der Entscheidung bedacht werden sollte. Dabei ist der erste und wichtigste Aspekt so einfach wie offensichtlich zugleich: Google.

Verbessertes Ranking

Google ist in Deutschland (mit einem Markteinteil von ca. 90 %) eindeutig die bedeutendste Suchmaschine. Fast alle Anfragen laufen also über Google. Dementsprechend entscheidet die Positionierung hier häufig über Erfolg oder Misserfolg. Wer bei Google nicht gefunden wird, existiert in der digitalen Welt nicht. Gerade bei online-basierten Unternehmungen, die im Internet in großem Wettbewerb stehen, kann dies zu enormen Problemen führen. Ist beispielsweise ein Logo Designer nicht im Google Ranking auf den ersten Plätzen zu finden kann dies zu Umsatzeinbußen führen oder sogar das „Todesurteil“ für eine Unternehmung sein.

Und gerade dieses Suchergebnis kann durch die Präsenz auf Google+ beeinflusst werden. Google will, verständlicherweise, sein eigenes Social Network in die Suche miteinbeziehen. Das bedeutet, dass Google+ Beiträge und Profile bei Suchanfragen gegenüber Suchergebnissen aus anderen sozialen Netzwerken bevorzugt behandelt werden. Man wird also im besten Fall schneller oder überhaupt erst indexiert. Dies ist auch auf die Tatsache zurückzuführen, dass Google+ auf einer Subdomain von google.com gehostet wird und dadurch von Google natürlich als besonders vertrauenswürdig eingestuft wird. So ergeben sich also schon aus einer Suchmaschinenoptimierungs-Perspektive deutliche Vorteile der Erstellung eines Unternehmensprofils gegenüber anderen Netzwerken.

Kennzeichnung von Autoren in den Suchergebnissen

Ein weiterer Vorteil von Google+ ist das sogenannte rel=author Attribut. Hierdurch kann man die Autorenschaft von Blogposts mit seinem Profil verknüpfen, wodurch das Profilbild neben den Suchergebnissen bei Google auftaucht. So kann man sich von Zeit zu Zeit eine gewisse Autorität als Verfasser von Posts erarbeiten und ebenfalls einen positiven Einfluss auf die gesamte Online-Reputation der Firma ausüben.
 Eine sinnvolle Nutzung von Google+ kann das eigene Unternehmen bei Google-Suchanfragen also pushen und so die Sichtbarkeit erhöhen. Damit hat Google+ einen Wettbewerbsvorteil beispielweise gegenüber Facebook, das in der Regel ein solches Ranking mit plattforminternen Inhalten nicht möglich macht.

Optimale Vernetzung

Weiterhin ist ein großer Vorteil des Google+ Netzwerks die Integration mit anderen Google-Diensten. Dies ermöglicht die „Übernahme“ von vorhandenen Fans auf andere Kanäle z.B. auf Youtube oder umgekehrt. Auch die Verlinkung von externen sozialen Netzwerken ist relativ einfach. So lässt sich eine ganzheitliche Social Media Strategie umsetzen.

Google+ Nutzer sind wertvolle Multiplikatoren

Facebook und Twitter haben zwar (zumindest in Deutschland) eine größere Reichweite als Google+, also mehr Nutzer, aber Google+ hat im Gegensatz zu Facebook auch noch ein stärkeres Wachstumspotential. Außerdem sollte man den Gedanken zulassen, dass die Masse der Benutzer nicht allein entscheidend ist. Mindestens ebenso wichtig sind nämlich die Charakteristika der Nutzer und diese unterscheiden sich zwischen Google+ Nutzern und Nutzern von beispielsweise Facebook deutlich. So finden sich in diesem Netzwerk viele Social Media affine Menschen, die dementsprechend sehr wertvolle Multiplikatoren sind.

Dies zeigt sich auch in der unterschiedlichen Art und Weise wie Diskussionen geführt werden. Während auf Twitter aufgrund der Begrenzung von 140 Zeichen sinnvolle Debatten gar nicht möglich sind und auf Facebook meist auch nicht zustande kommen, wird auf Google+ angeregt debattiert und diskutiert. Dies bietet Unternehmen die Möglichkeit tatsächlich mit Kunden zu kommunizieren und ehrliches Feedback zu erhalten.

Quelle: plus.google.com

Weiterhin haben Studien gezeigt, dass Google+ Nutzer relativ treu und loyal im Vergleich zu den Nutzern anderer Social Media Angebote sind. So melden sich 60% aller Nutzer einmal täglich an, einmal wöchentlich sogar 80% (im Vergleich: bei Twitter sind es täglich nur 50% aller Nutzer). Gerade Nutzer mit diesen Eigenschaften sind natürlich für Unternehmen von großem Wert, da nur mit ihnen der Aufbau von langfristigen Beziehungen möglich ist und nur so eine organische Community entstehen kann.

Fazit

 Zusammenfassend kann also gesagt werden, dass Google+ für Unternehmen eine große Chance ist. Wer hier ein wenig Zeit investiert, kann mit etwas Geschick neue Kunden gewinnen, an sich binden und auch die Ranking-Ergebnisse auf Google direkt beeinflussen. Wie sich das Netzwerk in Zukunft entwickeln wird weiss natürlich niemand. Sicher ist jedenfalls auch, dass nur ein Mix aus mehreren Kommunikationswegen und mehreren sozialen Netzwerken alle potentiellen Kunden erreichen kann.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Anzahl der Zeichen im Excerpt anzeigen – für perfekte Google Descriptions

Jonas Hellwig — Fri, 18 May 2012 07:09:07 +0000

Wenn Ihr einen neuen Beitrag in WordPress verfasst, habt ihr die Möglichkeit neben dem vollständigen Inhalt auch eine kurze Zusammenfassung zu formulieren. Diese Funktion heißt in WordPress „Auszug“ (engl. Excerpt) und wird über den Template Tag () in das Theme integriert.
Der Artikelauszug bietet sich an um eine auf den jeweiligen Artikel zugeschnittene Meta-Description für Google & Co. zu erstellen. Damit ihr die Länge der Description perfekt auf die von Google angezeigte Zeichenzahl abstimmen könnt, lohnt es sich in WordPress die Anzahl der Zeichen einzublenden.

Anpassung über die functions.php

Öffnet die functions.php und fügt nachfolgenden Code ein. Die Anzahl der Zeichen wird über JavaScript eingeblendet. Den Text könnt natürlich anpassen – ich habe als Merkhilfe auch die erlaubte Anzahl an Zeichen in der Google Meta-Description notiert.

// Zeigt die Anzahl der Zeichen im Auszug eines WP-Artikel an. 
function kb_excerptCharacterCount(){
    echo ' ';
}

add_action('admin_head', 'kb_excerptCharacterCount');

Darstellung im WordPress-Editor

Innerhalb des WordPress-Editors wird die Zeichenzahl nun wie folgt abgebildet.

Wenn ihr den Artikelauszug nicht sehen könnt, klickt oben rechts im Editor zunächst auf „Optionen einblenden“ und aktiviert anschließend den „Auszug“.

Mit diesem Snippet könnt ihr den Artikelauszug optimal auf die von Google erlaubten 156 Zeichen in der Meta-Description anpassen. Eventuell werden so für euch zusätzliche SEO-Plugins überflüssig.

Title Tag and Meta Description Length for Google, Yahoo, Bing & Ask - Sagerock
via Add a character counter for the excerpt in WordPress - I Love Colors
The Excerpt - WordPress Codex
die vielen Möglichkeiten von the_excerpt – die Artikel Kurzfassung von WordPress - Texto.de
How to Get The Post Excerpt Outside WordPress Loop - clickonf5.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe Edge Inspect (ehem. Shadow) im Praxistest

Jonas Hellwig — Tue, 10 Apr 2012 10:48:14 +0000

Adobe Shadow wurde vor einigen Wochen veröffentlicht und soll insbesondere Frontend-Entwicklern helfen Websites für verschiedene mobile Endgeräte, Displaygrößen etc. zu erstellen. Im Gegensatz zu allen anderen mir bekannten Tools simuliert Adobe Shadow die Ansicht nicht sondern synchronisiert den Entwicklungsstand der Website auf verschiedene Geräte. Dafür muss man die Geräte natürlich besitzen. Ich habe Adobe Shadow jetzt beim ersten echten Projekt praktisch eingesetzt und möchte euch meine Erfahrungen natürlich nicht vorenthalten.

Wichtiger Hinweis: Adobe Shadow wurde in Adobe Edge Inspect umbenannt. Neben einem neuen Icon und dem neuen Namen wurden die Funktionen jedoch beibehalten.

Wie funktioniert Adobe Shadow?

Adobe Shadow synchronisiert die Ansicht eines Computers auf die Bildschirme von anderen angeschlossenen Geräten wie Smartphones oder Tablets. Im Gegensatz zu einem Simulator, sieht man die Website daher exakt so, wie das jeweilige Gerät sie darstellt, also inkl. gerätespezifischer Eigenschaften und der Möglichkeit die Usability auf dem Touchpad direkt zu beurteilen und zu testen.

Zur Einrichtung der Geräte wird ein Passwort generiert

Für mich ist Adobe Shadow das erste Tool das den Test von Responsive Websites richtig angeht. Es gibt zwar viele sehr gute Simulatoren, aber der Test auf einem echten Gerät ist der einzige Weg ein verlässliches Ergebnis zu erhalten. Adobe Shadow simuliert nicht, das Tool hilft dabei den Workflow zu beschleunigen. Und für ein professionelles Ergebnis muss nun einmal auf einem Originalgerät getestet werden. Die diesbezügliche Kritik an Adobe Shadow kann ich daher in keinster Weise nachvollziehen.

Adobe Shadow einrichten

Zunächst muss Adobe Shadow auf jedem Gerät installiert werden. Zusätzlich müssen sich alle Geräte im selben Netzwerk befinden.

Adobe Shadow muss im Hintergrund laufen

Aktuell bietet Adobe das Tool für Windows, Mac OSX, iOS, Android und als Google Chrome Extention an. Damit die Chrome-Extention funktioniert, muss das Hauptprogramm auf dem Computer im Hintergrund laufen.

Nach dem Start der jeweiligen Programme müssen die Geräte zunächst verbunden werden. Dazu generiert Shadow ein Passwort, welches dann auf den verbundenen Geräten eingegeben werden muss. Anschließend sieht man von welchem Gerät die Ansicht abhängig ist. Mit einem Tap auf den Namen gelangt ihr in den „Live-Modus“, der immer die aktuelle Browser-Ansicht des Hauptrechners zeigt. Natürlich exakt so wie das abhängige Gerät die Website nativ darstellt.

Chrome-Extention von Shadow mit verbundenen Geräten

Responsive Webdesign mit Adobe Shadow

Hat man Adobe Shadow einmal eingerichtet ist das Tool eine echte Arbeitserleichterung. Alle Live-Websites oder die Entwicklungen in einer lokalen Serverumgebung (erst in einem kommenden Release!) werden auf die entsprechenden Geräte synchronisiert. Bei mir dauert es immer ca. eine Sekunde bis die Ansicht auf allen Geräten abgeglichen ist. Das ist zu verkraften, vielleicht geht es bei euch sogar schneller. Das ist wohl abhängig vom W-LAN.
Mit dem Code-Inspector (ähnlich Firebug) von Google Chrome kann ich auf dem Hauptrechner den Code live editieren und sehe die Änderungen dann direkt auf iPhone und iPad. Perfekt.

Adobe Shadow auf dem iPad

Leider ist Adobe Shadow (noch?) nicht in der Lage verschiedene Computer anzugleichen. Es funktioniert, zumindest bei mir, nur mit einem Hauptrechner und diversen mobilen Endgeräten. Ich fände es schön auch mehrere Desktop-Computer abgleichen zu können. Dann könnte man z.B. einen großen iMac und ein kleines Windows-Netbook parallel beurteilen.
Ein weiterer Nachteil des Tools sind die regelmäßigen Abstürze in der Synchronisierung. Die Programme laufen zwar noch – es wird allerdings nichts mehr synchronisiert. Um das Problem zu lösen musste ich dann die Anwendungen einmal neu starten. Auch dieses Problem ist zu verkraften – sollte allerdings dringend von Adobe behoben werden.

Fazit

Adobe Shadow ist für mich das erste Tool das die Arbeit mit verschiedenen mobilen Geräten professionell angeht. Klar, man benötigt alle Geräte auf denen man testen möchte – aber ich bin der Meinung, dass ein Profi, der mobile Websites erstellt und verkauft, hier investieren muss oder das eh bereits getan hat. Wer das nicht kann oder möchte muss dann zwangsläufig auf Simulatoren ausweichen.

Die Einrichtung von Adobe Shadow ist kinderleicht und die Arbeit wird enorm erleichtert. Einziges Manko ist aus meiner Sicht die nicht funktionierende Synchronisation verschiedener Desktop-Rechner, sowie die auftretenden Programmabstürze.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google+ Profilbild in die Google-Suchergebnisse integrieren

Jonas Hellwig — Mon, 15 Aug 2011 06:25:10 +0000

Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem entsprechenden Treffer in den Suchergebnissen. Das sieht dann so aus.

Google setzt auf Parameter zur Identifikation

Das Prinzip ist im Grunde genommen sehr einfach. Zunächst müsst ihr von eurer Website oder eurem Blog einen Link auf euer Google+ Profil setzen. Dieser Link wird dann einem Parameter (?rel=author) angereichert um die Beziehung zwischen Website und Google+ zu übertragen. Der entsprechende Link ist dann wie folgt aufgebaut:

Google+

Ein funktionierendes Beispiel für mein Profil sieht so aus:

Google+

Wichtig! Der Link-Text muss unbedingt mit + beginnen oder aufhören! Ein praktisches Tool zur Erzeugung eines Links inkl. G+-Logo bietet Google natürlich auch: google.com/webmasters/profilebutton

Inhalte testen und verifizieren

Sobald ihr die Verlinkung hinzugefügt und hochgeladen habt, solltet ihr einmal testen ob auch alles korrekt eingestellt wurde. Zu diesem Zweck hat Google eine entsprechendes Rich-Snippet-Testing-Tool ins Leben gerufen:

Rich-Snippet-Testing-Tool

Rich Snippet Testing Tool von Google

Wenn das Tool keine Fehler angezeigt, müsst ihr nun eine Verlinkungen von eurem Google+ Profil zu eurer Website bzw. zu einzelnen Beiträgen setzen. Das funktioniert innerhalb von Google+ über "Profil bearbeiten → Links". Damit verifiziert ihr den Content und euer Profil gegenüber Google.

Achtet zudem darauf, dass euer Profilbild ein Foto eurer Person zeigt. Ansonsten wird Google die Integration womöglich verweigern.

Your profile picture must be a photograph of yourself and of high quality in order to be eligible for be shown as a thumbnail in search results.

Als letztes müsst ihr dieses Formular ausfüllen und somit den entsprechenden Antrag bei Google stellen:

Authorship request

Das war's auch schon. Jetzt heißt es abwarten und hoffen, dass Google die Seite in die Suchergebnisse integriert. Ich hatte bisher keinen Erfolg - was aber auch an der Wahl meines Profilbildes oder am Standort Deutschland liegen kann. Wie gewohnt wird Google die Funktion vorerst nur in den USA testen und anschließend ausweiten. Ich werde die Sache auf jeden Fall im Auge behalten.

WordPress-Theme erweitern

Wenn ihr WordPress benutzt und vielleicht sogar mit mehreren Autoren an der Seite arbeitet, müsst ihr das Theme -bzw. die Benutzterprofile innerhalb des WordPress-Backends entsprechend modifizieren.
Es sollte jeder Autor die Möglichkeit haben innerhalb des eigenen Profils den Link zum Google-Profil anzugeben. Dafür muss das Profil erweitert werden. Wie das funktioniert habe ich bereits in einem anderen Artikel ausführlich erklärt:

WordPress-Benutzerprofil um Google+, Facebook, Twitter und andere Felder erweitern

Alternative Methode mit Microformaten

Die oben gezeigte Variante ist die neuere Möglichkeit Google+ in die Suchergebnisse zu integrieren. Eine alternative - jedoch überholte - Methode ist die Integration des rel="author"-Attributs in den Link. Wenn ihr diese Struktur bereits verwendet habt, so braucht ihr euch keine Sorgen zu machen. Laut Google wird auch dieses Format nach wie vor unterstützt.
Mehr Infos dazu findet ihr hier: google.com/support/webmasters/bin/answer.py?answer=1229920

Video

Google hat auch ein ausführliches Video zu diesem Thema veröffentlicht. Besonders schnell zur Sache kommen die Herren allerdings nicht.

Ausführliche Informationen zu diesem Thema findet ihr auch hier:

google.com/support/webmasters/bin/answer.py?answer=1408986

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google +1-Button lädt jetzt auch asynchron (= schneller)

Jonas Hellwig — Sat, 30 Jul 2011 22:47:16 +0000

Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst.

Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das Snippet verwenden, so prüft bitte euren Code.

Google veröffentlicht “+1 Buttons” (PlusOne) für Websites

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Datenschutz-Hinweis beim Einsatz des Google+ Buttons

Jonas Hellwig — Wed, 06 Jul 2011 21:56:35 +0000

Vor Kurzem habe ich über die Einführung des Google+ Buttons geschrieben, mit welchem - ähnlich dem Facebook Like-Button - Website-Inhalte bewertet und empfohlen werden können. In den Kommentaren kam damals die Frage nach einer Datenschutzerweiterung des Impressums auf. Immerhin wird für den Facebook-Button auch ein Datenschutz-Hinweis benötigt. Auf spreerecht.de wurde nun eine Vorlage veröffentlicht.

Der Artikel behandelt das generelle Problem und stellt auch einen Vergleich zur Rechtslage des Like-Buttons her. Sobald Änderungen am Datenschutz-Hinweis vorgenommen werden, wird der Artikel natürlich angepasst. Ihr findet den Muster-Datenschutz-Hinweis unter:

Das rechtliche Risiko bei Googles +1 Button inkl. Muster für die Datenschutzerklärung

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google+ Vanity-URLs und Trends

Jonas Hellwig — Wed, 06 Jul 2011 07:45:03 +0000

Facebook bietet die Möglichkeit für eine Fanpage oder ein privates Profil eine so genannte Vanity-URL einzurichten. Aus einer unübersichtlichen und für Suchmaschinen nicht sonderlich wertvollen URL wie facebook.com/profile.php?id=123456789101112 wird dadurch eine brauchbarere Adresse wie facebook.com/kulturbanause.de.
Bei Google+ existiert diese Möglichkeit im Moment leider noch nicht. Wollt ihr einen Link zu eurem Google+ Profil veröffentlichen, so müsst ihr die komplette Benutzer-ID ausschreiben: https://plus.google.com/u/0/106537592401126010838.

Auch wenn Google+ erst ein paar Tage alt ist, so zeichnen sich bereits zwei Trends ab, die dieses Problem lösen.

Vanity-URL über einen externen URL-Shortener (Drittanbieter)

Ein erster Trend der sich bereits abzeichnet, ist die Nutzung eines URL-Shorteners. Natürlich könnte man dafür Googles hauseigenen Dienst goo.gl nutzen, aber auch hier entstehen optisch unschöne Adressen. Ein Drittanbieter hat dieses Problem schnell erkannt und ist mit dem Dienst gplus.to an den Start gegangen. Hier kann ein Benutzername festgelegt werden, der anschließend nach folgendem System in die Adresse integriert wird: gplus.to/nickname

Die neue URL für mein Profil sieht demnach so aus: gplus.to/kulturbanause

gplus.to

Google+ Profile über ../+ verlinken

Ein weiterer Trend ist die Verlinkung des Google+ Profils über die eigene Webadresse. Hierbei wird der Standard-URL ein /+ angehängt und diese Adresse anschließend über einen 301-Redirect auf das Google+ Profil umgeleitet. Ihr findet mein Google-Profil also über kulturbanause.de/+.

Wenn ihr ein Profil auf diese Art verlinken möchtet, so genügt es folgenden Code in die .htaccess-Datei eurer Website einzufügen. Denkt daran die ID des Beispiels durch eure eigene Benutzer-ID zu ersetzen.

redirect 301 /+ https://plus.google.com/u/0/106537592401126010838

Der Große Vorteil dieser Vorgehensweise ist, dass man nicht den Nickname des Benutzers kennen muss. Man tipp einfach /+ hinter die Adresse einer Website oder eines Blogs und kann so erfahren wer hinter der Seite steht.
Eine umfangreiche Liste an Websites die dieses System bereits einsetzen findet ihr auf eisy.eu/trend-google-plus-profile-als-verlinken.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Feed-Inhalte automatisch an Twitter, Facebook, Tumblr & Co. senden – Dlvr.it

Jonas Hellwig — Thu, 23 Jun 2011 05:45:11 +0000

Die Arbeit im Social Web frisst eine Menge Zeit. Blog-Beiträge schreiben, Facebook-Fans verwalten, Tweets veröffentlichen, Artikel weiterempfehlen, auf Kommentare, Likes, Retweets sowie direkte Nachrichten reagieren und alles bitte zügig, aber regelmäßig.
Wer nicht auf eine Social Media Abteilung zurück greifen kann und sich parallel um sein Hauptgeschäft kümmern muss, läuft Gefahr früher oder später die Anforderungen nicht mehr leisten zu können.
Zum Glück lassen sich viele Arbeitsabläufe automatisieren. Mit Chancen und Risiken.

Was ist Dlvr.it?

Der Online-Dienst Dlvr.it nutzt die Inhalte eines oder mehrerer RSS-Feeds und füttert mit diesen Information weitere Portale wie Facebook, Twitter, Google Buzz oder Tumblr. Wenn ihr also beispielsweise einen WordPress-Blog führt, so könnt ihr den dort angebotenen Feed nutzen, um sowohl auf Facebook, als auch auf Twitter Statusnachrichten zu euren neusten Blog-Posts zu veröffentlichen. Das spart auf der einen Seite zwar massig Zeit, kann sich allerdings negativ auf die Qualität und vor allem die Individualität der Social Media Inhalte auswirken.

Ihr könnt unzählige Feed-Quellen an unzählige Dienste senden und somit einen Großteil eurer Arbeit automatisieren. Da auch die Inhalte einer Facebook-Fanpage als RSS-Feed angeboten werden, eröffnen sich hier sehr interessante Möglichkeiten der Verknüpfung. Man sollte bei all den zur Verfügung stehenden Optionen nur darauf achten, keinen Loop zu konstruieren, in welchem die Beiträge immer im Kreis geschickt werden.

Extrem detaillierte Einstellungsmöglichkeiten

Das interessante an Dlvr.it sind die sehr umfangreichen Einstellungsmöglichkeiten. Die Inhalte lassen sich mit eine Pre- oder Postfix versehen, können Hashtags enthalten oder bestimmte Wörter werden automatisch durch andere Wörter ersetzt.
Bei der Aufbereitung der Inhalte lässt Dlvr.it ebenfalls wenige Wünsche offen. Es kann sehr detailliert eingestellt werden, welche Feed-Informationen für Statusmitteilungen zur Verfügung stehen. Schlagworte können beispielsweise innerhalb des Tweets in Hashtags umgewandelt werden.

Auch bei der Facebook-Integration bietet Dlvr.it tolle Möglichkeiten. Welches Profil soll benutzt werden? Welches Bild? Soll der Beitrag als Notiz, Link-Tipp oder als Statusnachricht veröffentlicht werden? Oder möchtet ihr die Informationen lieber gleich in einer bestimmten Gruppe veröffentlichen?

Goo.gl als URL-Shortener nutzen

Dlvr.it bietet einen hauseigenen URL-Verkürzer an und veröffentlicht die Inhalte auch unter diesen URLs. Wenn ihr lieber einen anderen Dienst verwenden möchte, beispielsweise Goo.gl, so schaut euch mal folgenden Blog-Post von Dlvr.it an. Ich persönlich finde Goo.gl oder Bit.ly einfach etwas seriöser.

dlvr.it now serving goo.gl short links

Fazit

Ich muss zugeben, dass mich Dlvr.it auf ganzer Linie überzeugt hat. Die Anwendung funktioniert, ist übersichtlich und bietet umfangreiche Einstellungsmöglichkeiten.
Der größte Nachteil ist der fehlende individuelle Charakter der Statusmitteilungen. In wiefern Facebook-Fans und Follower so etwas abstrafen, kann wohl nur durch Ausprobieren herausgefunden werden. Am effektivsten könnte die gesunde Mischung aus individuellen und automatisch generierten Inhalten sein.

Dlvr.it

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google veröffentlicht “+1 Buttons” (PlusOne) für Websites

Jonas Hellwig — Thu, 02 Jun 2011 15:19:51 +0000

Vor einiger Zeit kündigte Google an, ein soziale Komponente in die Suchergebnisse einfließen zu lassen und so dem Like-Button von Facebook Konkurrenz zu machen. In der Trefferliste der Suchmaschine wird seitdem ein kleiner Zähler neben den Suchergebnissen angezeigt, der darüber Aufschluss gibt, wie viele Menschen die Website positiv bewertet haben. Um die Bewertungen zu sehen und auch selbst abgeben zu können, muss man über einen Google-Account verfügen. Darüber hinaus sei erwähnt, dass das Feature bislang nur in der englischen Version von Google zu sehen ist.

Nun macht das System wenig Sinn, wenn die Besucher nur in der Ergebnisliste von Google bewerten können. Wer sucht schon bei Google nach einem Thema, findet anschließend eine hilfreiche Seite und kehrt daraufhin noch einmal zur Ergebnisliste zurück um dort die Website zu bewerten?
Aus diesem Grund hat Google nun den "+1 Button" für Websites veröffentlicht. Per Code-Snippet lässt sich der Button problemlos in die eigene Website integrieren. Anschließend können Besucher die Inhalte auch dort empfehlen, wo sie gelesen werden.

Google bietet vier verschiedene "+1 Buttons"

Google stellt vier verschiedene Versionen, bzw. Größen des +1 Buttons zur Verfügung. Im nicht-geklickten Zustand sind die Buttons weiß. Nach der Bewertung blau.

Einfache Einbindung

Um den Button in der eigenen Website verwenden zu können, muss zunächst die JavaScript API von Google eingebunden werden. Bindet dazu folgenden Code entweder im head der Website, oder direkt vor dem schließenden /body-Tag ein. Das folgende Snippet bindet die deutsche Sprachversion ein.

Um den Button in der Website anzuzeigen, fügt ihr folgenden Code ein. Ich habe den Code für alle Größen untereinander geschrieben.

Live-Demo / Fazit

Wenn ihr sehen wollt, wie der Button im Live-Einsatz aussieht oder testen möchtet, wie er funktioniert, so findet ihr ihn ab sofort am Ende aller meiner Artikel. Ich bin noch nicht sicher, wie sich "+1" im Internet verbreiten wird. Ich selbst werde es auf jeden Fall effektiv nutzen, da ich über jede Facebook-Konkurrenz froh bin. Wie seht ihr das?

Offizielle Ressourcen

Google hat die Funktionen des Plus One (+1) Buttons bereits in einem Video ausführlich erklärt.

Die offiziellen Google-Quellen zu diesem Thema findet ihr hier:

Update: Google +1-Button für WordPress

Wenn ihr den +1-Button innerhalb von WordPress mithilfe eines Plugins einbinden möchtet, so schaut euch am besten folgendes Plugin an. Es funktioniert einwandfrei mit anderen "Share"-Plugins wie Twitter oder Facebook.

wordpress.org/extend/plugins/google-plus-one-google1

Update 2: Asynchrones Laden

Google hat eine Update des Buttons bereit gestellt. Der Button hat einige zusätzliche Optionen spendiert bekommen und lädt nun u.A. auf Wusch asynchron. Ein asynchrones Loading behindert den Seitenaufbau nicht und führt zu einem schnelleren sichtbaren Website-Aufbau. Da ich die Option für sinnvoll halte, habe ich das Code-Snippet entsprechend angepasst. Die Standard-Version des Buttons kann nach wie vor auf code.google.com/apis/+1button generiert werden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WebP-Grafiken mit Photoshop-Plugin erstellen

Jonas Hellwig — Mon, 30 May 2011 04:30:07 +0000

"Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als auch für Anwender die Arbeit mit dem Internet so angenehm wie möglich zu gestalten. Angefangen beim hauseigenen Browser Chrome, über die Relevanz der Website-Ladezeiten für die Suchmaschinen-Platzierung, bis hin zu Webfont-Bibliotheken: die Performance einer Website wird immer wichtiger. Vor einiger Zeit wurden die Entwickler von Google beauftragt, eine neue Dateikompression für Grafiken zu erarbeiten. Die neue Bilddatei sollte mindestens der Qualität von JPG entsprechen, jedoch deutlich kleinere Dateien erzeugen. Das Ergebnis dieser Entwicklung ist das neue Grafikformat WebP (gesprochen "Weppy"). Doch leider kennt Photoshop das Format noch nicht.

Vor- und Nachteile von WebP

Das WebP-Dateiformat erzeugt bei JPG-ähnlicher Qualität knapp 40% kleinere Dateien. Das ist natürlich einiges und könnte so manche Website deutlich beschleunigen bzw. den Server entlasten. Google demonstriert und vergleicht das neue Dateiformat in einer kleinen Galerie.

WebP-Gallery

Der größte Nachteil an WebP ist der spärliche Browser-Support. Aktuell unterstützen nur Google Chrome und Opera das Dateiformat. Um WebP effektiv in Websites einsetzen zu können, müssten jedoch alle großen Browserhersteller das Dateiformat unterstützen. Auch Photoshop unterstützt in der neusten Version nach wie vor kein WebP. Das ist mir persönlich unerklärlich, da vor kurzem erst Updates erschienen sind. Glücklicherweise kann die Funktion per Plugin nachinstalliert werden.

WebP für Photoshop nachrüsten

Zunächst müsst ihr das Download-Paket von telegraphics.com.au/sw/product/WebPFormat herunterladen. Das Plugin steht für die Photoshop-Versionen CS2, CS3, CS4 und CS5 zur Verfügung.

Öffnet die Photoshop-Installation auf eurer Festplatte und sucht dort den Ordner "Plug-ins". Innerhalb dieses Ordners erstellt ihr einen neuen Ordner namens "WebP" und kopiert die Plugin-Datei WebPFormat.plugin in diesen Ordner. Anschließend startet ihr Photoshop einmal neu.

WebP in Photoshop nutzen

Innerhalb von Photoshop steht euch nun unter "Speichern" WebP als zusätzliches Dateiformat zur Verfügung. Das Dateiformat wurde jedoch nicht in den "Für Web und Geräte speichern"-Dialog integriert.

Wenn ihr WebP als Dateiformat ausgewählt habt, so habt ihr im darauffolgenden Dialog die Möglichkeit einige Qualitäts-Einstellungen vorzunehmen. Ähnlich wie bei JPG könnt ihr hier die Qualität in Prozent festlegen. Darüber hinaus lässt sich eine Rauschreduzierung und Bildschärfung einstellen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Search Globe

Jonas Hellwig — Mon, 09 May 2011 04:00:14 +0000

Das "Google Data Arts Team" hat ein neues Experiment online gestellt: den Google Search Globe. Dieses, sehr schön anzuschauende, Experiment stellt anhand eines interaktiven Globus, die weltweiten Google-Suchanfragen grafisch dar. Jede Sprache wird hierbei durch eine eigene Farbe repräsentiert.

Der Code für dieses tolle Produkt darf und soll übrigens gerne heruntergeladen und genutzt werden.

Wie der Search Globe funktioniert, könnt ihr hier live ausprobieren. Die besten visuellen Eindrücke bietet angeblich Chrome aber in einem anderen modernen Browser, wie Safari oder Firefox, wird es wohl auch funktionieren.

chromeexperiments.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Chrome 11: neues Logo und angepasstes CSS3-Rendering

Jonas Hellwig — Thu, 28 Apr 2011 07:22:22 +0000

Google Chrome 11 ist erschienen. Neben einigen gefixten Bugs wurde auch die Hardware-Beschleunigung aktiviert. Somit kann der Browser u.a. direkt auf die Grafikkarte zugreifen, was die Performance moderner, komplexer Web-Anwendungen spürbar verbessert. Neben den technischen Änderungen wurde bei Chrome 11 auch das bereits angekündigte, neue Logo eingeführt. Das neue Programm-Icon ist eine reduzierte Version des bisherigen Chrome-Logos, was mir persönlich sehr gut gefällt.

Eine weitere Neuerung von Chrome 11 ist mir heute morgen beim Besuch meiner eigenen Seite aufgefallen: Offenbar hat Google einige CSS3-Rendering-Darstellungen verändert. Insbesondere die Eigenschaft box-shadow erzeugt jetzt deutlich dunklere Schatten. Zwar werden die Schatten jetzt in Chrome und Firefox gleich dargestellt - Safari zeigt jedoch andere Schatten. Das ist ärgerlich, da beide Browser auf die gleiche Weise angesprochen werden müssen. Ich hoffe sehr, dass Apple hier bald nachzieht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Einführung in die Suchmaschinenoptimierung – Offizielles PDF von Google

Jonas Hellwig — Sun, 03 Apr 2011 23:01:34 +0000

Google hat die bereits seit einiger Zeit auf Englisch verfügbare "erweiterte Einführung in SEO" nun in zehn weitere Sprachen übersetzt. Unter anderem ist der circa 30 Seiten starke PDF-Leitfaden mit den wichtigsten Infos zum Thema SEO jetzt auch auf Deutsch verfügbar.
Das Dokument beschreibt sehr einfach verständlich alle Kernbereiche der Suchmaschinenoptimierung. Besonders interessant ist der nun neu hinzugefügte Teil zum Thema Mobiles SEO.

Behandelt werden folgende Themen: SEO-Grundlagen, Website-Struktur verbessern, Content optimieren, Umgang mit Crawlern, SEO für Mobilgeräte, Promotion und Analyse.

Suchmaschinenoptimierung (SEO)

GoogleBot-Grafik von Google

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Page Speed Online

Jonas Hellwig — Fri, 01 Apr 2011 10:58:27 +0000

Google hat das hauseigene Tool "Page Speed" kräftig ausgebaut. Bisher war das Hilfmittel zur Bewertung der Website-Performance lediglich als Firefox-Extention verfügbar und konnte über die Google Webmaster Tools eingesehen werden.
Jetzt steht das Plugin auch für Google Chrome zur Verfügung und - was ich persönlich noch viel besser finde - als Online-Version!

Google Page Speed Online

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WebM-Videos im Internet Explorer 9 abspielen

Jonas Hellwig — Mon, 21 Mar 2011 10:45:58 +0000

Bei WebM handelt es sich um einen recht neuen Video-Standard der unter anderem von Google entwickelt wurde aber auch seitens Mozilla und Opera gestützt wird. Der Vorteil liegt laut Google in einer besseren Performance und einem angenehmeren Lizenzmodell. In den drei entsprechenden Browsern Chrome, Firefox und Opera können WebM Videos nativ abgespielt werden. Microsoft und Apple hingegen benötigen in den aktuellen Browserversionen (noch?) ein entsprechendes Plugin um WebM-Videos abspielen zu können. Für den erst kürzlich veröffentlichten Internet Explorer 9 hat Google nun das entsprechende Plugin veröffentlicht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress Shortlink über goo.gl im Artikel anzeigen

Jonas Hellwig — Mon, 07 Feb 2011 19:20:30 +0000

Innerhalb von WordPress gibt es die Möglichkeit einen sogenannten Shortlink auszugeben. Der Shortlink ist eine kurze URL zum Artikel und soll das Senden von Trackbacks und Links (z.B. über Twitter) erleichtern. Über eine Funktion kann der Shortlink im Theme angezeigt werden um Besuchern das Weiterempfehlen eines Artikels zu erleichtern. Normalerweise generiert der Shortcode innerhalb von WordPress allerdings nur die normale URL sowie die ID des aktuellen Beitrags. Praktischer ist es wenn man Googles URL-Kürzungs-Dienst goo.gl verwendet.

Shortlink anzeigen

Zunächst müssen wir den normalen Shortlink von WordPress in unseren Artikel integrieren. Öffnet die single.php (alternativ auch index.php oder ein anderes Template) und fügt an beliebiger Stelle folgendes Code-Snippet ein.


 Shortlink:

Es wird ein Input-Feld erstellt in welchem der Shortlink angezeigt wird. Per Klick wird der Inhalt markiert, so dass der Besucher den Link schneller kopieren kann.

Google URL-Shortener verwenden

Um nun Googles URL-Shortener goo.gl anstelle von WordPress zu verwenden fügt einfach folgenden Code in Eure functions.php ein.

// WordPress Shortlinks mit Goo.gl ersetzen

function googl_shortlink($url, $post_id) {
	global $post;
	if (!$post_id && $post) $post_id = $post->ID;

	if ($post->post_status != 'publish')
		return "";

	$shortlink = get_post_meta($post_id, '_googl_shortlink', true);
	if ($shortlink)
		return $shortlink;

	$permalink = get_permalink($post_id);

	$http = new WP_Http();
	$headers = array('Content-Type' => 'application/json');
	$result = $http->request('https://www.googleapis.com/urlshortener/v1/url', array( 'method' => 'POST', 'body' => '{"longUrl": "' . $permalink . '"}', 'headers' => $headers));
	$result = json_decode($result['body']);
	$shortlink = $result->id;

	if ($shortlink) {
		add_post_meta($post_id, '_googl_shortlink', $shortlink, true);
		return $shortlink;
	}
	else {
		return $url;
	}
}

add_filter('get_shortlink', 'googl_shortlink', 9, 2);

Der Shortlink von WordPress wird nun ersetzt und ab sofort wird innerhalb des Input-Feldes der Google-Link angezeigt.

Das Shortlink-Snippet stammt von Otto on WordPress; die goo.gl Umsetzung von Konstantin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Goo.gl – URL Shortener von Google

Jonas Hellwig — Fri, 01 Oct 2010 07:43:36 +0000

Mit goo.gl hat Google (endlich) den hauseigenen URL-Shortener veröffentlicht. Im Gegensatz zu vielen anderen Diensten bildet Google zu jeder URL auch recht umfangreiche Statistiken und Meta-Informationen ab. Über den Link "Details" können Zugriffszahlen etc. betrachtet werden.

goo.gl besuchen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Instant Search

Jonas Hellwig — Thu, 09 Sep 2010 06:57:26 +0000

Google hat ein neues Feature veröffentlicht - die Google Instant Suche. Für Nutzer mit einem Google-Konto werden die Suchergebnisse nun bereits live - also während des Eintippens der Keywords - ausgegeben. Anfangs ist die Funktion ein wenig gewöhnungsbedürftig, entpuppt sich aber schnell zu einem echten Must-have! Wer das neue Feature nicht mag kann die Funktion deaktivieren.

Im Zuge dieses Updates wurden soweit ich das beurteilen kann auch die Google Suggests (Keywordrelevante Vorschläge seitens Google) angepasst. Eine detaillierte Erforschung des neuen Features konnte ich bisher nicht vornehmen, allerdings beschäftigen sich erwartungsgemäß die üblichen Verdächtigen mit dem Thema.

Neben dem Google Watch Blog informiert natürlich auch der offizielle Google Blog und die eigens eingerichtete Produktseite von Google.

Was haltet Ihr von der neuen Suche? Seit Ihr begeistert vom neuen Feature oder habt Ihr das Tool sofort deaktiviert? Wie beurteilt Ihr die neuen Suggest und habt Ihr überhaupt ein Google-Konto?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Maps API – Strecken berechnen

Jonas Hellwig — Thu, 01 Jul 2010 08:03:02 +0000

Vor einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. Auf 1stWebdesigner findet sich nun ein sehr lesenswerter Artikel der beschreibt wie Ihr die Google Maps API nutzen könnt um die Strecke zwischen zwei zuvor festgelegten Punkten zu berechnen. Wer keine Lust hat alles zu lesen kann auch einfach direkt das Beispiel laden.

Google Maps API: Strecke zwischen zwei Punkten berechnen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Web-Fonts mit Google Font Directory API

Jonas Hellwig — Thu, 20 May 2010 16:03:54 +0000

Google hat einen neuen Online-Dienst namens Font-Directory Beta gestartet. Dieser Service ermöglicht es Webdesignern individuelle Schriftarten in Websites zu verwenden auch wenn diese nicht zu den wenigen systemübergreifenden Schriftarten gehören.
Schriften stellen im Internet leider nach wie vor ein echtes Problem in der Gestaltung dar. Der Grund liegt darin, dass eine Schriftart nur dann korrekt angezeigt wird sofern der Besucher den Font auch installiert hat. Ist dies nicht der Fall so wird eine alternative Schriftart geladen was zwangsläufig zu Fehldarstellungen führt.
Zwar bieten JavaScript- und Flash-basierte Lösungen wie Cufón oder sIFR eine passable Alternative aber Googles neue API verspricht über kurz oder lang ein echter Hit zu werden.
Ich habe das neue Tool einmal ausprobiert.

Google nutzt doch nur @font-face

Im Grude genommen funktioniert das Ganz so: Google bedient sich der CSS-Eigenschaft @font-face und bindet die Schriften auf die gleiche Weise ein wie man es bisher immer schon selbst im Stylesheet erledigen konnte.

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}

Der Vorteil der Google Font Directory besteht darin, dass Google die Schrift zur Verfügung stellt und Ihr somit Bandbreite auf der eigenen Seite einspart. Darüber hinaus sind die Google Systeme natürlich rasend schnell und quasi immer erreichbar.
Als letztes sollte erwähnt werden, dass eine geringe Wahrscheinlichkeit besteht, dass die aufgerufene Schriftart bereits beim User im Cache vorhanden ist. Ist dies der Fall wirkt es sich natürlich ebenfalls positiv auf die Ladezeiten aus. Im Gegenzug wird allerdings ein HTTP-Request mehr verursacht.

Wie funktioniert es?

Eine Schriftart mittels der neuen Google Font API in die eigene Seite einzubinden geht kinderleicht. Zunächst fügt im head der Seite die entsprechende API ein. Die mit XXXXX markierte Passage muss später durch den Namen der Schriftart ersetzt werden.

Anschließend erweitert Ihr Eure CSS-Datei lediglich um einige Zeilen Code um die soeben per API eingebettete Schrift einem Selektor zuzuweisen.

body {
  font-family: "XXXXX", serif;
  font-size: 28pt;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1;
}

Beispiel

Das folgende Beispiel soll einmal zeigen wie einfach alles funtktioniert. Kopiert lediglich den nachfolgenden Code in ein leeres HTML-Dokument oder schaut Euch das Beispiel an.

Beispiel anschauen








kulturbanause blog | Google Font Directory API




Willkommen auf kulturbanause.de!

Browsersupport

Aktuell funktioniert das System laut Google in folgenden Browsern:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Microsoft Internet Explorer: version 6+

Es funktioniert nicht auf folgenden Systemen:

iPhone
iPad
iPod
Android

Online-Tools und Fazit

Google bietet einige Hilfestellungen im Umgang mit der Google Font Directory API. Nachteilig ist allerdings dass bisher nur sehr (!) wenige Schriftarten angeboten werden. Wenn das Format angenommen wird - und davon gehe ich im Moment einfach mal aus - dann wird sich die Directory allerdings sicher schnell mit diversen Schriftarten füllen.

Was haltet Ihr von dieser Möglichkeit Schriften einzubinden? Habt Ihr bisher weitestgehend auf "Sonderschriften" verzichtet oder habt Ihr mit Cufón oder sIFR gearbeitet?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mehrere Standorte in Google Maps anzeigen

Jonas Hellwig — Sun, 09 May 2010 21:17:59 +0000

Google Maps lässt sich bekanntlich kinderleicht in die eigene Website integrieren. Insbesondere auf der Kontaktseite eines Unternehmens oder auch einer Privatperson macht es durchaus Sinn Maps zu verwenden um den Besucher zu zeigen wo sich der Autor bzw. das Unternehmen befindet. Der Vorteil von Google Maps liegt dabei auf der Hand: Zum einen muss nicht mühsam eine Karte gezeichnet werden, zum anderen bietet Google stets aktuelle Informationen, verschiedene Ansichten, Zoomstufen und Kartenausschnitte.
Doch angenommen es sollen mehrere Standorte auf der Karte angezeigt werden; zum Beispiel weil das Unternehmen mehr als eine Filiale hat oder weil der Blogger zeigen möchte wo er im letzten Urlaub war. Wie Ihr mittels der Google Maps API mehr als einen Standort in die Karte eintragt und darüber hinaus auch noch Startposition, Zoomstufe, Kartenlayout und den Inhalt der Infoboxen anpasst erfahrt Ihr in diesem Tutorial.

Demo anschauen

Google Maps API Key

Um Google Maps auf einer Website verwenden zu können braucht Ihr zunächst ein Google Konto. Sobald Ihr erfolgreich in Euer Konto eingeloggt seid muss ein so genannter API-Key generiert werden mit dem sich die Website später bei Google authentifiziert.
Den API-Key könnt Ihr unter folgender Adresse generieren lassen. Gebt dazu einfach die URL in die Eingabemaske ein und bestätigt die Nutzungsbedingungen. ...

Google Maps API

Elemente im head einbinden

Nun geht es daran die eigentliche Karte im Code einzubinden. Zunächst widmen wir uns dem head unserer Seite. Bindet zunächst nachfolgendes JavaScript ein und ersetzt im Code die Stelle XXX mit Eurem zuvor generierten API-Key.

Elemente im body einbinden

Um Google Maps verwenden zu können benötigen wir ein OnLoad-Ereignis. Ersetzt Euer bereits bestehendes öffnende body-Element durch folgenden Code:

Nun folgt der eigentliche Code zur Einbindung der Karte. Mittels Kommentaren habe ich die wichtigen Punkte erklärt möchte sie aber dennoch im Detail erläutern. Wir beginnen damit die Karte im Code zu aktivieren und einige globale Eigenschaften festzulegen. Die Karte wird innerhalb eines div-Containers erstellt dessen Bezeichnug wir am Anfang einmalig festlegen. In diesem Beispiel habe ich den div "map-container" genannt. Mittels Inline-CSS-Style legen wir die Abmessungen fest. Innerhalb des noscript-Bereichs wird ein alternativer Content eingebunden für den Fall, dass der Seitenbesucher kein JavaScript aktiviert hat.

Vollständiges Code-Beispiel

Falls Euch die obige Erklärung zu detailliert oder auch zu oberflächlich war könnt Ihr Euch hier das gesamte Beispiel noch einmal am Stück anschauen. In diesem Beispiel habe ich mehrere unterschiedliche Standorte angegeben.





Untitled Document

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Chrome 4.0 released. Beta für Linux

Jonas Hellwig — Tue, 26 Jan 2010 08:07:32 +0000

Die vierte Version von Googles Browser Chrome steht ab sofort nicht nur für Windows- sonder auch für Linux-User (als Beta) zum Download bereit. Die neue Version soll mehr als 1500 Neuerungen enthalten, darunter die erweitere Möglichkeit Extension und Plugins zu installieren oder Bookmarks zu synchronisieren. Natürlich ist Chrome 4 Beta auch stabiler und schneller als alle seine Vorgängerversionen.
Die neue Beta lädt sich nicht selbst über ein automatisches Update herunter und muss manuell geladen werden. Mac-User müssen - wie bei Chome üblich - noch warten.

Google Chrome

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Browser Size

Jonas Hellwig — Thu, 17 Dec 2009 18:03:17 +0000

Google hat in den GoogleLabs einen neuen Dienst namens "Browser Size" veröffentlicht. Hier lässt sich ablesen wieviel Prozent der User welchen Teil einer Website sehen können (Viewport). Die Werte variieren bekanntermaßen aufgrund verschiedener Auflösungen und Monitorgrößen und individuellen Einstellungen stark. Die Statistik wird als semitransparenter Overlay über der aufgerufenen Website angezeigt und kann minimal angepasst werden. Eine Überraschung bietet der Dienst erstmal nicht, da die Werte soweit bekannt sind. Ärgerlich hingegen ist, dass eine verwertbare Ansicht nur auf linksbündige Seiten zutrifft. Hier wird in Zukunft sicherlich noch einiges zu tun sein.

Google Browzer Size

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.