jQuery Plug-In socialshareprivacy – Dokumentation

Download des jQuery-Plug-Ins:

jquery.socialshareprivacy.zip
jquery.socialshareprivacy.tar.gz

  1. Dateien

    Zu unserem Plug-In gehören folgende Dateien:

  2. Voraussetzungen und Einschränkungen

    Technische Voraussetzungen sind jQuery und aktiviertes JavaScript im Browser. Bei uns getestet mit jQuery 1.4.
    Das Plug-In kann derzeit innerhalb einer HTML-Seite nur einmal verwendet werden.

    Wenn Sie Vorschläge zur Verbesserung haben, wenden Sie sich gerne per Mail an 2klick@heise.de.

    Das dauerhafte Aktivieren der Services funktioniert im Internet Explorer erst ab Version 8, da die Vorgängerversionen kein JSON unterstützen. Daher fehlt im IE <= 7 diese Funktion. Der Rest des Plug-Ins ist davon nicht betroffen.

    Für Facebook ist zwingend eine eigene App-ID notwendig, siehe dazu Hinweis zur Facebook App-ID.

  3. Ausmaße

    Ausmaße des Plug-Ins

    Das Plug-In benötigt insgesamt etwa 600 Pixel in der Breite (wenn alle Services aktiviert sind) und ca. 290 Pixel in der Höhe, wobei dies natürlich auch von der Länge der angegebenen MouseOver-Texte abhängt.

    1. Einbindung

      <head>
  …
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript" src="jquery.socialshareprivacy.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      if($('#socialshareprivacy').length > 0){
        $('#socialshareprivacy').socialSharePrivacy(); 
      }
    });
  </script>
  …
</head>
<body>
  …
  <div id="socialshareprivacy"></div>
  …
</body>

    2. Erklärung des Codes

      <script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.socialshareprivacy.js"></script>

      Die erste Zeile bindet das JavaScript-Framework „JQuery“ (http://jquery.com/) ein, die zweite Zeile unser Plug-In. 

      <script type="text/javascript">
  jQuery(document).ready(function($){
    if($('#socialshareprivacy').length > 0){
      $('#socialshareprivacy').socialSharePrivacy(); 
    }
  });
</script>

      In diesem <script>-Block wird die Plug-In Funktion an ein frei wählbares, leeres HTML-Element in der Seite gehängt, in diesem Fall das Element mit der id socialshareprivacy.
      Damit das Anhängen des Plug-Ins nur dann geschieht, wenn das Element auch wirklich vorhanden ist, haben wir noch die Kontrollfunktion if, die das Anhängen umschließt und die nötige Bedingung prüft. 

      <body>
  …
  <div id="socialshareprivacy"></div>
  …
</body>

      Irgendwo im <body>-Bereich der Website platziert man das leere HTML-Element mit der gewünschten id, die identisch zur verwendeten id im vorhergehenden <script>-Block sein muss.

  5. Optionen

    Zur Einbindung stehen diverse Optionen zur Verfügung. Im Folgenden sind erstmal die allgemeinen Optionen aufgeführt und anschließend die Optionen nach den einzelnen Services (Facebook, Twitter, Google+) aufgelistet.
    Beispiel für einen Aufruf mit Optionen: 

    $('#socialshareprivacy').socialSharePrivacy({
  services : {
    facebook : {
      'app_id'      : '0123456789', 
      'perma_option': 'off'
    }, 
    twitter : {
        'status' : 'off'
    },
    gplus : {
      'display_name' : 'Google Plus'
    }
  },
  'cookie_domain' : 'heise.de'
});
    1. allgemeine Optionen
      Option Standardwert Beschreibung
      info_link http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html Link zu detaillierter Datenschutz-Info, in unserem Fall ein heise-Artikel.
      txt_help Text MouseOver-Text des i-Icons
      settings_perma Dauerhaft aktivieren und Datenüber­tragung zustimmen: Überschrift des Einstellungsmenüs
      cookie_path / Pfad der Gültigkeit des Cookies
      cookie_domain document.location.host Domain für die das Cookie gültig ist
      cookie_expires 365 Dauer die das Cookie gültig ist in Tagen
      css_path socialshareprivacy/socialshareprivacy.css Pfad zur CSS-Datei
    2. Optionen: Facebook
      Option Standardwert Beschreibung
      status on Der User hat Facebook zur Auswahl
      app_id __FB_APP-ID__ Facebook App-ID; Sie ist nötig um den Empfehlen-Button von Facebook nutzen zu können. Ist sie nicht angegeben, wird dem User Facebook trotz 'status' : 'on' nicht angeboten. In der JavaScript-Konsole wird dem Entwickler ein entsprechender Hinweis ausgegeben.
      dummy_img socialshareprivacy/images/dummy_facebook.png Pfad zur statischen Grafik
      txt_info Text MouseOver-Text des Empfehlen-Buttons
      txt_fb_off nicht mit Facebook verbunden Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User
      txt_fb_on mit Facebook verbunden Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User
      perma_option on Der User hat die Option sich Facebook dauerhaft einblenden zu lassen (mittels Cookie)
      display_name Facebook Schreibweise des Service in den Optionen
      referrer_track   Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden
      language de_DE Spracheinstellung
    3. Optionen: Twitter
      Option Standardwert Beschreibung
      status on Der User hat Twitter zur Auswahl
      dummy_img socialshareprivacy/images/dummy_twitter.png Pfad zur statischen Grafik
      txt_info Text MouseOver-Text des Tweet-Buttons
      txt_twitter_off nicht mit Twitter verbunden Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User
      txt_twitter_on mit Twitter verbunden Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User
      perma_option on Der User hat die Option sich Twitter dauerhaft einblenden zu lassen (mittels Cookie)
      display_name Twitter Schreibweise des Service in den Optionen
      referrer_track   Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden
      tweet_text getTweetText Die Funktion prüft ob es die Meta-Angabe DC.title gibt und verwendet diese. Gibt es außerdem noch DC.creator wird diese etwas abgesetzt (" - ") hinten angehängt. Ist DC.title nicht vorhanden wird das <title>-Tag der Seite verwendet.
      Diese Option kann mit einem eigenen Text (typeof == string) überschrieben werden oder mit einer eigenen Funktion (typeof == function), die den Text generiert.
      Der übergebene Texte wird immer auf 120 Zeichen gekürzt und beim letzten Leerzeichen mit … ersetzt.
    4. Optionen: Google+
      Option Standardwert Beschreibung
      status on Der User hat Google+ zur Auswahl
      dummy_img socialshareprivacy/images/dummy_gplus.png Pfad zur statischen Grafik
      txt_info Text MouseOver-Text des „+1“-Buttons
      txt_gplus_off nicht mit Google+ verbunden Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User
      txt_gplus_on mit Google+ verbunden Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User
      perma_option on Der User hat die Option sich Google+ dauerhaft einblenden zu lassen (mittels Cookie)
      display_name Google+ Schreibweise des Service in den Optionen
      referrer_track   Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden
      language de Spracheinstellung

  6. URL

    Standardmäßig wird den Services die URL der aktuellen Seite übergeben (document.location.href), ist jedoch eine kanonische URL hinterlegt (<link rel="canonical">), wird diese genommen.

  7. Einstellungen merken

    Bevor das Cookie abgefragt wird, wie die Einstellungen des Users sind, wird erstmal geprüft, wie das Plug-In konfiguriert ist. Ist das Plug-In eventuell nachträglich umgestellt worden hat der User dadurch keine Nachteile.
    Wurde für alle Services die Merken-Funktion ausgeschaltet ('perma_option' : 'off') wird auch das Einstellungsmenü nicht mehr angezeigt.

  8. Hinweis zur Facebook App-ID

    Für den „Empfehlen“-Button von Facebook benötigt man eine Facebook App-ID. Diese kann man sich mit seinem verifizierten Facebook-Konto auf den Developer-Seiten erzeugen.

    1. Einloggen bei Facebook
    2. Konto verifizieren mittels Handy-Nummer (oder Kreditkartendaten)
      https://www.facebook.com/settings?tab=mobile Option Handy-Nr.:
      Handy-Nr. eintragen und anschließend per SMS empfangenen Bestätigungscode in das Feld auf der rechten Seite eintragen.
    3. Entwickler-Seite aufrufen
      http://developers.facebook.com/docs/reference/plugins/like/
      Dort in der Box unter "Step 1" auf "Get Code" klicken und die App-ID aus dem angezeigten Code-Teil entnehmen.

  9. Lizenz

    Dieses Plug-In ist unter der MIT License (http://www.opensource.org/licenses/mit-license.php) veröffentlicht und darf gerne für private, wie auch kommerzielle Zwecke genutzt werden.

  10. Unserem Plug-In liegt auch das von uns verwendete Logo bei, das Sie gerne zur Bewerbung dieser Aktion verwenden dürfen. Logo 2 Klicks für mehr Datenschutz