Buttons auf JavaScript-Basis, wie eben bspw. der +1-Button von Google, sollten nicht ohne Zustimmung des Nutzers geladen werden, da nicht klar ist, welche Daten von diesen erhoben werden. Heise setzt deshalb bspw. auf eine sog. "2-Klick-Lösung" - erst nach einem Klick wird der eigentliche Button angezeigt.

Mehr dazu gibt's unter "Social Buttons: Datenschutzfreundliche 2-Klick-Lösung von Heise.de".

Wer nicht auf die Lösung von Heise setzen möchte, der findet im folgenden einen kleinen Schnipsel, mit dem der +1-Button ganz einfach per Klick vom Nutzer nachgeladen werden kann.

Der Schnipsel ist für WordPress-Blogs geschrieben, kann jedoch sehr leicht angepasst werden.

In Zeile 12 kann sowohl die Größe des Buttons als auch das Anzeigen des Zählers eingestellt werden. Für "size" sind folgende Werte möglich: small, medium, standard, tall. Für "annotation": none, bubble, inline.

Der Standardtext "Google +1" kann in Zeile 19 geändert werden. Allgemein kann das "Aussehen" in den Zeilen 18/19 angepasst werden - wichtig sind hierbei nur das onclick- sowie id-Attribut des a-Tags (Link).

Twitter, Facebook, Google+ und co. sind nur ein paar Beispiele für Dienste, die Webmastern Buttons anbieten, mit denen deren Fans Werbung in den entsprechenden Netzwerken machen können.

Wir haben hier einmal sieben bekannte Dienste und ihre Buttons aufgelistet. Auf drei Dinge gehen wir dabei ein.

1. Wo finde ich den Quellcode des jeweiligen Buttons?
2. Falls vorhanden: Wie muss alternativ ein Link aussehen, mit dem man teilen kann?
3. Falls vorhanden: Welchen Text muss ich in meine Datenschutzbestimmungen mit aufnehmen, wenn ich einen Button verwende?

Zu Punkt 2 und 3 noch schnell ein paar Worte:

In der letzten Zeit gab es mehrfach Beschwerden, dass "Share Buttons", speziell von Facebook, Daten von Website-Besuchern ohne deren Zustimmung sammeln würden.

Aus diesem Grund sollten Website-Betreiber vor dem Einbinden solcher Buttons unbedingt in ihren Datenschutzerklärung einen Hinweis einfügen, welche Daten von welchem Button gesammelt werden - und wie man diesem widersprechen kann. Entsprechende Links scheinen zu genügen.

Sofern wir Informationen darüber haben gibt's bei den jeweiligen Buttons entsprechende Infos zu diesem Thema.

Wer ganz auf Nummer sicher gehen möchte, der kann - wie wir - statt Buttons Links wählen. Diese sammeln schließlich keine Daten.

So, los geht's.

1. Twitter

Beim Micro-Blogging Dienst Twitter gibt es aktuell unterschiedliche Buttons, die auf Wunsch einen Counter anzeigen können: https://twitter.com/about/resources/buttons.

Linkversion für WordPress:

NICKNAME durch Twitter-Namen ersetzen

<a href="https://twitter.com/share?via=NICKNAME&related=NICKNAME&url=<?php echo rawurlencode(get_permalink()); ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Teilen">Teilen</a>

Datenschutz:

Bisher ist uns leider kein Mustertext bekannt. Unter Umständen kann man den Text eines anderen Buttons (z.B. Facebook) entsprechend anpassen und auf https://twitter.com/privacy verlinken.

2. Facebook

Etwas komplizierter ist es beim größten sozialen Netzwerk Facebook. Hier muss man sich etwas mehr mit den unterschiedlichen Button-Arten beschäftigen:

1. https://developers.facebook.com/docs/reference/plugins/like/
2. https://developers.facebook.com/docs/reference/plugins/send/
3. https://developers.facebook.com/docs/reference/plugins/subscribe/

Linkversion für WordPress:

<a href="http://www.facebook.com/share.php?u=<?php echo rawurlencode(get_permalink()) ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Empfehlen">Empfehlen</a>

Datenschutz:

Unter e-recht24.de findet man einen Muster-Text, der in die eigenen Datenschutzerklärung eingefügt werden kann. Ein Verweis auf https://www.facebook.com/about/privacy/ sollte in jedem Fall eingebunden sein.

3. Google Plus (G+)

Für Googles soziales Netzwerk Google+ gibt es die sog. +1-Buttons.

Einen entsprechenden Generator gibt's unter http://www.google.com/intl/de/webmasters/+1/button/. Zwischen drei Buttonarten (u.a. mit Counter) sowie vier Größen kann gewählt werden.

Datenschutz:

Für die Datenschutzerklärung empfehlen wir die Textvorlage von spreerecht.de. Webmaster sollten auf jeden Fall auf http://www.google.com/intl/de/policies/privacy/ verweisen.

4. XING

Seit kurzem bietet auch XING einen Generator für einen Share-Button an. Dieser ist unter https://www.xing.com/app/share zu finden, gewählt werden kann zwischen zwei Buttons samt Counter sowie drei unterschiedlichen Größen.

Datenschutz:

Einen vorgefertigten Text für die eigene Datenschutzerklärung findet man am Ende der Seite (nach einem Klick öffnet sich ein Pop-up).

5. Pinterest

Auch das erfolgreiche Start-up Pinterest bietet seinen Nutzern einen Generator für Buttons. Unter http://pinterest.com/about/goodies/ gibt's für eine Einheitsgröße die Möglichkeit, einen Counter sofern gewünscht sowohl horizontal als auch vertikal hinzuzufügen.

Linkversion für WordPress:

PATH_TO_IMAGE durch URL des zu pinnenden Bildes ersetzen

<a href="http://pinterest.com/pin/create/button/?url=<?php echo rawurlencode(get_permalink()) ?>&media=<?php echo rawurlencode(PATH_TO_IMAGE); ?>&description=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Pin It!">Pin It!</a>

6. Tumblr

Der Blogging-Dienst Tumblr bietet ebenfalls Buttons an. Der Generator unter http://www.tumblr.com/docs/de/share_button ermöglicht Buttons in vier verschiedenen Größen und zwei Farbe: Grau und Blau.

Linkversion für WordPress:

<a href="http://www.tumblr.com/share/link?url=<?php echo rawurlencode(get_permalink()) ?>&name=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&description=<?php echo rawurlencode(strip_tags(get_the_excerpt())) ?>" target="_blank" title="Share on Tumblr">Tumblr</a>

7. Flattr

Auch wenn "Share Button" nicht zu 100% zutrifft, so sollte man Flattrs Buttons trotzdem auch erwähnen.

Unter http://developers.flattr.net/button/ können die Spenden-Buttons generiert bzw. vorgefertige Plugins für unterschiedliche Systeme gefunden werden.

Für WordPress gibt es bspw. ein recht gutes Plugin: wordpress.org. Dieses ermöglicht neben den Buttons auch eine Linkversion.

So, das waren auch schon die sieben Dienste. Zum Abschluss noch ein Comic: xkcd.com.

Aus einem é wird ein e, aus " und * ein - bzw. ein Leerzeichen, und aus mañana wird manana - damit können Suchmaschinen meistens um einiges besser umgehen.

Wer dies mit PHP nachbauen möchte, findet unter cubiq.org (via @iWebaholic) eine gute Erklärung - und ein gutes Script.

Wen es bei WordPress stört, dass Umlaute wie ä durch a und nicht ae ersetzen werden, dem empfehle ich das Plugin wp-cleanumlauts2.

Quelle: Johan Larsson,
flickr.com

Für Formularfelder (inputs) können damit pattern-Attribute mit regulären Ausdrücken (RegEx) angegeben werden. Diese entsprechen Vorgaben, welche Eingaben im Feld erlaubt sind.

Beispiel: 

Vierstellige Zahl: <input type="text" name="number" value="" pattern="[0-9]{4}" />

Hier dürfen nur vierstellige Zahlen mit den Ziffern von 0 bis 9 eingegeben werden. Ist die Eingabe falsch, so wird das Formular (in dem sich das input befindet) nicht abgeschickt und der Browser zeigt am input automatisch ein Tooltip, eine Fehlermeldung.

Weitere Beispiele gibt's unter html5pattern.com.

Zusätzlich gibt es auch ein required-Attribut, mit dem Felder angegeben werden können, die eine Eingabe benötigen. Auch hier wird im Fehlerfall ein Tooltip angezeigt.

Weitere Codeschnipsel rund um pattern und required gibt's auf t3n.de.

Aber Achtung: Serverseitig sollte die Eingabe natürlich trotzdem/weiterhin überprüft werden. Außerdem sollte man beachten, dass der Internet Explorer sowie ältere Versionen des Safari diese Attribute nicht verstehen (Quelle: w3schools.com).

Ein Wunder also, dass ich diesen Artikel schreiben kann: Ich habe ein kleines jQuery-Skript auf Basis eines Skripts von reallysimpleworks.com (via davidhellmann.com) erstellt, mit dem man zwischen Artikeln auf WordPress blättern kann.

Intuitiv lässt sich nun mit den Pfeiltasten links und rechts zum nächst alten bzw. neuen wechseln. Grundlage hierfür sind die zwei link-Tags prev und next, die WordPress standardmäßig einbindet.

Bemerkung: Das Skript funktioniert (absichtlich ) nicht in input- und textarea-Elementen.

Eingebunden werden sollte es natürlich nur für die Ansicht einzelner Artikel (in WordPress normalerweise single.php), und nach dem Einbinden einer jquery.js.

Nachtrag:

Sollte das jQuery-Skript nicht funktionieren, kann dies unter anderem folgende zwei Gründe haben:

1. Keine Version eines jQuery-Bibliothek wurde eingefügt.
2. Die Meta-Tags "prev" und "next" fehlen. Folgender PHP-Code, eingefügt in die functions.php-Datei des Themes, sollte funktionieren (getestet unter WordPress 3.3.1):

   1. <?php

   2. add_action('wp_head', 'adjacent_posts_rel_link_wp_head');

   3. ?>

Unter anderem wurde die "Datumsbox" bei Artikeln entfernt und durch die Anzeige "vor X Minuten/Stunden/..." ersetzt.

Grundlage hierfür war ein Codeschnipsel, den ich via @webrookieDE auf hongkiat.com gefunden habe - dort gibt's auch noch 28 weitere Codeschnipsel für WordPress.

Mit diesem lassen sich in WordPress sog. "Self-Pings", Ping- und Trackbacks des Blogs zu sich selbst, verhindern.

Der folgende Code achtet zusätzlich darauf, dass auch die Subdomain "m" gesperrt wird.

Eingefügt werden sollte er in die Datei functions.php im Ordner des Templates (normalerweise: /wp-content/themes/Template-Name/).

Beispiel: Liegt der WordPress-Blog auf der Domain http://(www.)servaholics.de, so werden keine Pings von Seiten auf den Domains http://(www.)servaholics.de und http://m.servaholics.de gespeichert.

Achtung: Für Blogs, die bereits auf einer Subdomain liegen, funktioniert dieser Codeschnipsel nicht - er kann jedoch leicht angepasst werden.

Farbverläufe sind zwar auch Teil von CSS3 (siehe w3.org), jedoch bietet der folgende Generator zusätzlich einen CSS-Code an, der für diverse Browser speziell angepasste Teile enthält - diese sind wiederum nicht Teil von CSS3.

Es geht um einen Generator von colorzilla.com. Der von diesem zusammengestellte CSS-Code ist angepasst an:

• Firefox 3.6+
• ältere Chrome-Versionen
• Chrome 10+
• Safari 4+
• Safari 5.1+
• Opera 11.10+
• Internet Explorer 6-9
• Internet Explorer 10+
• veraltete Browser (bei diesen wird lediglich eine einzelne Hintergrundfarbe statt eines Verlaufs angezeigt)

Er enthält zusätzlich auch eine Zeile, die den Standard, den das W3C mit CSS3 vorgibt, umsetzt. Erklärungen zu den einzelnen Anpassungen gibt's bspw. unter webdesignerwall.com.

Pro: Nahezu jeder Browser sieht den gewünschten Farbverlauf.

Contra: Nur die W3C-angepasste Zeile ist Teil des Standards.

t3n.de hat dazu erneut einen tollen Artikel geschrieben: Wie setzt man eine Bildergalerie mit Zoom-Effekt ganz ohne JavaScript um?

Grundlage hierfür ist die CSS3-Eigenschaft "transition", die wir bereits einige Male vorgestellt haben.

Für große Galerien ist die Umsetzung wahrscheinlich nichts, doch zum Basteln und Testen sowie für kleinere Bildersammlungen durchaus interessant.

Viel Spaß.

Ähnlich wie für Twitter (siehe Twitter: Tweets eines Benutzers auslesen) gibt es nun auch ein Skript, das auf Google+ empfohlene Links auflisten kann: infoblog.li.

Das PHP-Skript ist zwar für WordPress gedacht, kann jedoch auch für andere Systeme o.ä. angepasst werden.

Viel Spaß.

Dieses Mal geht es darum, wie man ganz ohne JavaScript, nur mit HTML5, Aufklappboxen realisieren kann: t3n.de.

Erwähnt sei noch (auch wenn es im Artikel selbst ebenfalls steht), dass der vorgeschlagene Quellcode auch in Browsern, die HTML5 nicht verstehen, einigermaßen gut dargestellt wird. Die HTML5-Elemente werden ggf. als Block-Elemente (vergleiche <div>) interpretiert.

Viel Spaß beim Basteln. 

Ein Mix aus .htaccess, PHP, WordPress, JavaScript/jQuery, HTML und CSS.

Das alles gibt's unter perishablepress.com/code-snippets. Sind ein paar tolle Schnipsel dabei, empfehlenswert.

Quelle: t3n.de

Dabei stieß ich allerdings auf ein Problem, welches zwar berechtigt ist, jedoch ersteinmal das ganze als unlösbar darstellt (auf den ersten Blick jedenfalls): man kann das HTML-Attribut type eines Input-Feldes mittels Javascript nicht ändern! Also muss man sich eines kleinen Tricks behelfen, der zwar ein paar Zeilen mehr Code beansprucht, aber trotzdem eigentlich relativ simpel ist: einfach ein zweites Input-Feld vom Typ text, welches auf Klick anstelle des normalen Passwort-Feldes angezeigt wird und dessen Wert auch übernimmt. Mit einem weiteren Klick wird die ganze Aktion umgekehrt gestartet. Als Code sieht das dann so aus:

HTML:

Wichtig! Da es ja noch immer Leute geben soll die mit dem Internet Explorer surfen, darf zwischen den Passwort-Feldern (also dem richtigen und dem "falschen") kein Leerzeichen sein, da der IE dieses sonst ausgibt und die "Fälschung" leicht verschoben dargestellt wird

jQuery:

$(document).ready(function(){
 
     $('#show_password').change(function(){
          if($(this).is(":checked")){
               $('#password_fake').val($('#password').val());
               $('#password').hide();
               $('#password_fake').show();
          } else {
               $('#password').val($('#password_fake').val());
               $('#password_fake').hide();
               $('#password').show();
          }
     });
 
});

Jetzt gibt es nur noch ein Problem: in der Verarbeitung bzw. dem eigentlichen Login-Prozess. Denn hier muss natürlich das richtige Passwort benutzt werden - was, wenn man als letztes die Option auf "Passwort zeigen" hatte, jedoch das andere, das "richtige" Passwort benutzt wird? Ich habe das ganze mittels PHP gelöst: wenn die Checkbox aktiviert ist, soll der Passwort-Fake als $password gesetzt werden - wenn nicht, dann eben das normale, richtige Passwort-Feld.

PHP:

Viel Spaß mit dem Anzeigen des Passwortes!

Dazu gehören einige neue Tags, die verwendet werden können, aber auch Tags, die nun als "veraltet" gelten.

Website-Besitzer sollten in Zukunft z.B. die Tags <center> und <u> nicht mehr verwenden. CSS bietet jeweils einen passenden Ersatz.

Die ganze Liste gibt's unter http://www.w3schools.com/html5/html5_reference.asp. Alternativ-Lösungen für veraltete Tags findet man bspw. unter blog.mixable.de.

Doch auch Statistiken und Diagramme sind vertreten: Mit den Google Chart Tools können sie ganz einfach erzeugt werden.

Eine kleine Anleitung gibt's unter t3n.de. Viel Spaß.

Besonders dieses Mal: Kleine Icons auf den Buttons, erstellt mit "HTML-Entities" in Hexadezimal-Form - ebenfalls nur mit HTML+CSS!

Ein Pfeil nach rechts (➜) z.B., der laut Tabelle über &#x279c; darstellbar ist, wird mit \279C bei der CSS-Eigenschaft "content" angegeben - siehe Demo/Quellcode.

Tutorial samt Demo und Quellcode gibt's unter red-team-design.com.

Unter anderem kann nun ähnlich wie bei Facebooks Like-Button eine sog. "Inline Annotation" eingebaut werden, mit der Nutzer sehen, wenn Freunde den aktuellen Link bereits geteilt haben (siehe Quelle für Screenshot ).

Die Änderung sind bisher nur beim englischen Generator zu sehen: http://www.google.com/intl/en/webmasters/+1/button/.

Quelle: googlewatchblog.de

Besonders nützlich ist jedoch auch ein Codeschnipsel, der unter http://translate.google.com/translate_tools zu finden ist. Mit diesem JavaScript wird eine kleine Box zur Auswahl der Übersetzungssprache angezeigt. Bei Auswahl einer Sprache wird die aktuelle (Unter-)Seite automatisch in dieser neu geladen.

Auch wenn Google Translate natürlich kein perfekter Übersetzer ist, so kann der Dienst doch praktisch sein - z.B. um eine fremde Sprache wenigstens teilweise zu verstehen.

Quelle: stadt-bremerhaven.de

(Ich empfehle zur korrekten Darstellung Firefox ab Version 5.0)

Leider konnte ich den Autor des originalen Scriptes nicht mehr ausfindig machen. Es sei aber erwähnt, dass diese Nyan-Cat under der Mozilla Public-License veröffentlicht wurde.

Auch wenn CSS3 an der Realisierung dieses Mal nicht beteiligt ist, werden einige CSS-Eigenschaften verwendet, die nicht in jedem Browser funktionieren. Eben wie bei CSS3.

Beispiele und den Quellcode gibt's unter t3n.de.

Mehrere Angaben wie Layout, Schrift- und Hintergrundfarbe, Ränder und Schatten lassen sich einstellen. Das Ergebnis gibt's als Code ganze ohne Anmeldung und co.

Quelle: Benjamin Forrest,
flickr.com