2-Klick-Empfehlungsbutton von Heise und Plugin

[nettesekel]

***Quelle***

     

Wer datenschutzrechtlich auf der sicheren Seite sein möchte, der nutzt für deine Website am besten den 2-Klick-Empfehlungsbutton von Heise.
Im Gegensatz zu den herkömmlichen Like-Button, sendet dieser besucherspezifische Daten erst dann, wenn er vom Seitenbesucher auch aktiviert wurde.

In folgendem Beispielprojekt könnt ihr euch ansehen, wie das Ganze aussieht, nachdem es in NOF eingebaut wurde.

http://demos.nof-community.de/heise/index.html

[nettesekel]

Ladet zunächst unter folgendem Link die zip-Datei mit den benötigten Scripts und Grafiken herunter.  http://www.heise.de/extras/socialshareprivacy/




Wenn ihr die zip-Datei entpackt, erhaltet ihr einen Ordner mit dem Namen „jquery.socialshareprivacy” in welchem sich ein weiterer Ordner mit dem Namen „socialshareprivacy” befindet. Öffnet bitte diesen Ordner.




In diesem Ordner seht ihr nun wieder einen Ordner namens „socialshareprivacy” und einige einzelne Dateien. Für euer Projekt benötigt ihr den Ordner „socialshareprivacy” und die Datei „jquery.socialshareprivacy.js”.

Um den 2-Klick-Button auch bei lokaler Publizierung sehen zu können, kopiert ihr  ihr den Ordner „socialshareprivacy” und die Datei „jquery.socialshareprivacy.js”...




... und fügt sie im Ordner lokale Publizierung eures Projekts wieder ein, wenn ihr den Button auf der Startseite nutzen wollt.




...und fügt sie im hml-Ordner euerer lokalen Publizierung ein, wenn ihr den Button auf den Unterseiten nutzen wollt.
(wenn ihr den Button auf alles Seiten nutzen wollt, fügt ihr die Dateien an beiden Orten ein)




Damit das Ganze auch online funktioniert müsst ihr die Dateien ebenfalls auf eurem Server platzieren. Hierzu benötigt ihr ein FTP-Programm.
Anleitung - Publizieren mit Filezilla

Hier gilt das Selbe wie offline. Soll der Button auf der Starseite genutzt werden, müssen der Ordner „socialshareprivacy” und die Datei „jquery.socialshareprivacy.js” ins Rootverzeichnis kopiert werden. (dorthin, wo auch die index.html liegt)



Und für alle Unterseiten müssen die Dateien ebenfalls im html-Ordner eingefügt werden.

[nettesekel]

Nun startet ihr eurer NOF und öffnet das Projekt, in welchem der Button genutzt werden soll. Möchtet ihr den Button auf mehreren Seiten einsetzen, so solltet ihr den folgenden Code im Masterrahmen platzieren. (Masterrahmeneigenschaften mit F10 aufrufen)
Der Code muss zwischen den Head-Tags eurer Seite eingefügt werden.

Anleitung, wie man Code zwischen den Head-Tags einfügt...

Code: HTML5

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. <script type="text/javascript" src="jquery.socialshareprivacy.js"></script>
3. <script type="text/javascript">
4.   jQuery(document).ready(function($){
5.     if($('#socialshareprivacy').length > 0){
6.       $('#socialshareprivacy').socialSharePrivacy();
7.     }
8.   });
9. </script>

Im Anschluss platziert ihr ein Textfeld an der Stelle, an welcher euer Button erscheinen soll. Zieht das Textfeld etwas in die Breite. Im html des Textfeldes hinterlegt ihr nun folgenden Code.
Anleitung, wie man Code in ein Textfeld einfügt...

Code: HTML5

1. <div id="socialshareprivacy"></div>

[nettesekel]

Sollten nach Publizierung der Seite die Button nicht in einer Reihe erscheinen, so müsst ihr das Textfeld noch etwas breiter ziehen.
Die volle Funktion des Buttons könnt ihr erst online sehen. Offline erscheinen die aktiven Grafiken von Facebook und Google+ nicht. Davon also davon bitte nicht irritieren lassen.

Ich hab ebewußt die ältere jQuery-Datei eingebunden. es gibt zwar inzwischen schon die Version 1.9. damit funktioniert jedoch der 2-Klick-Button nicht.

Viel Erfolg!