732 lines
34 KiB
HTML
732 lines
34 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="de-DE">
|
||
|
|
<head>
|
||
|
|
<title>Dokumentation – heise „socialSharePrivacy“–Plug-In</title>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="author" content="Hilko Holweg, Sebastian Hilbig, Nicolas Heiringhoff, Juergen Schmidt - Heise Zeitschriften Verlag GbmH & Co. KG" />
|
||
|
|
<meta name="description" content="Dokumentation und Einbindung des heise SocialSharePrivacy-Plug-Ins" />
|
||
|
|
<style type="text/css">
|
||
|
|
h1, h2, h3 {
|
||
|
|
font: normal 24px/30px Georgia, Times, "Times New Roman", serif;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
font-size: 22px;
|
||
|
|
line-height: 28px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 26px;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: #039;
|
||
|
|
}
|
||
|
|
pre {
|
||
|
|
background-color: #eee;
|
||
|
|
border: 1px solid #bbb;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 20px 0 0;
|
||
|
|
}
|
||
|
|
pre code {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
pre + p {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
ol li, p, td, th {
|
||
|
|
font: normal 14px/20px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
nav {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
border-bottom: 1px solid #333;
|
||
|
|
}
|
||
|
|
nav ol li,
|
||
|
|
nav ol li a {
|
||
|
|
font: bold 16px/24px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
|
||
|
|
color: #039;
|
||
|
|
-moz-transition: all .5s ease-in;
|
||
|
|
-webkit-transition: all .5s ease-in;
|
||
|
|
transition: all .5s ease-in;
|
||
|
|
}
|
||
|
|
nav ol li a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
ol#structure li ol {
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
ol#structure li ol#fb_app_id_step_by_step {
|
||
|
|
list-style-type: decimal;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
ol#structure li ol#fb_app_id_step_by_step li {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
ol#structure li ol li {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
ol#structure li ol li table {
|
||
|
|
border: 1px solid #333;
|
||
|
|
width: 100%;
|
||
|
|
display: table;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
ol#structure li ol.changelog li {
|
||
|
|
margin: 5px 0;
|
||
|
|
}
|
||
|
|
ol#structure li ol.changelog li pre {
|
||
|
|
margin: 5px 0 20px;
|
||
|
|
}
|
||
|
|
table caption {
|
||
|
|
text-align: left;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-indent: 5px;
|
||
|
|
}
|
||
|
|
table th {
|
||
|
|
text-align: left;
|
||
|
|
font-style: italic;
|
||
|
|
background-color: #333;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
table th,
|
||
|
|
table td {
|
||
|
|
padding: 2px 4px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
table tr:hover td {
|
||
|
|
background-color: #eee;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>jQuery Plug-In socialshareprivacy – Dokumentation</h1>
|
||
|
|
|
||
|
|
<h3>Download des jQuery-Plug-Ins:</h3>
|
||
|
|
<p>
|
||
|
|
<a href="http://www.heise.de/extras/socialshareprivacy/jquery.socialshareprivacy.zip">jquery.socialshareprivacy.zip</a><br />
|
||
|
|
<a href="http://www.heise.de/extras/socialshareprivacy/jquery.socialshareprivacy.tar.gz">jquery.socialshareprivacy.tar.gz</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<h2>Navigation</h2>
|
||
|
|
<ol>
|
||
|
|
<li><a href="#changelog">Change-Log</a></li>
|
||
|
|
<li><a href="#files">Dateien</a></li>
|
||
|
|
<li><a href="#pre">Voraussetzungen und Einschränkungen</a></li>
|
||
|
|
<li><a href="#dimensions">Ausmaße</a></li>
|
||
|
|
<li>Einfache Einbindung
|
||
|
|
<ol>
|
||
|
|
<li><a href="#merge">Quelltext</a></li>
|
||
|
|
<li><a href="#explanation">Erklärung des Codes</a></li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li><a href="#options">Optionen</a>
|
||
|
|
<ol>
|
||
|
|
<li><a href="#options_general">Allgemein</a></li>
|
||
|
|
<li><a href="#options_facebook">Facebook</a></li>
|
||
|
|
<li><a href="#options_twitter">Twitter</a></li>
|
||
|
|
<li><a href="#options_gplus">Google+</a></li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li><a href="#examples">Beispiel-Einbindungen</a>
|
||
|
|
<ol>
|
||
|
|
<li><a href="#only_fb">Nur Facebook einbinden</a></li>
|
||
|
|
<li><a href="#no_perma">Keine Option zum dauerhaften Aktivieren anbieten</a></li>
|
||
|
|
<li><a href="#only_gplus_css_path">Nur Google+ anbieten und eigenen Pfad für die CSS-Datei angeben.</a></li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li><a href="#url">URL</a></li>
|
||
|
|
<li><a href="#perma_option">Einstellung merken</a></li>
|
||
|
|
<li><a href="#licence">Lizenz</a></li>
|
||
|
|
<li><a href="#logo">Logo</a></li>
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<ol id="structure">
|
||
|
|
<li>
|
||
|
|
<h2 id="changelog">Change-Log</h2>
|
||
|
|
<ol class="changelog">
|
||
|
|
<li>
|
||
|
|
<h3 id="v1-3">Version 1.3</h3>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
Erste Fassung, die auch mehrmals auf einer Seite verwendet werden kann. Damit in den verschiedenen Instanzen unterschiedliche URIs verwendet werden können, wird der per Option <code>uri</code> gesetzen Funktion ein Kontext-DOM-Knoten übergeben, über den man eine URI ermitteln kann. Beispiele für die Verwendung haben wir in der Dokumentation bei den <a href="#examples">Beispiel-Einbindungen</a> ergänzt.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Korrektur für IE < 9: Das per <code>css_path</code> angegebene Stylesheet wurde mit jQuery-Versionen != 1.4.2 nicht eingebaut.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="v1-2">Version 1.2</h3>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
JS: Facebook App-ID entfernt, da diese nicht mehr nötig ist, um den Like/Recommend-Button zu nutzen.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="v1-1">Version 1.1</h3>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS: Bei diversen Elementen haben wir mehr Angaben hinzugefügt, um die Nacharbeiten, bei der Integration in eigene Seiten, geringer zu halten. Vor allem haben wir <code>margin</code>-, <code>padding</code>-, <code>width</code>- und <code>height</code>-Angaben hinzugefügt.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Die Doku wurde um einen Beispiele- und diesen Change-Log-Bereich erweitert.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Das Plug-In wurde inhaltlich etwas umgestellt und einige Code-Abkürzungen vorgenommen.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS-Bug Korrektur: Es gab einen Fehler, wenn es in der Seite ein <code>canonical</code>-Attribut gab, das aber einen leeren Wert hatte.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS-Bug Korrektur: Bei den Optionen von Google+ gab es eine Angabe, die später im Script nie abgefragt wurde.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS-Bug Korrektur: Die Perma-Option von Google+ wurde nur angezeigt, wenn auch die Perma-Option von Twitter aktiviert war.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Twitter: Wenn aktiviert war das iFrame zu groß und überlagerte darunter liegende Links. <code><iframe ...style="width:130px; height:25px;"></iframe></code> ergänzt.
|
||
|
|
</li>
|
||
|
|
<li>Allgemein: Wenn die Option css_path leer ist, wird kein <link>-Tag mit leerem href in die Seite eingebaut.</li>
|
||
|
|
<li>Allgemein: Die von den Buttons verwendete URI kann jetzt über die Option <code>uri</code> gesteuert werden. Es ist sowohl ein fester Wert, wie auch eine Function möglich. Default ist die enthaltene Funktion <code>getURI</code></li>
|
||
|
|
<li><strong>Neue Features:</strong>
|
||
|
|
<ul>
|
||
|
|
<li>Facebook: Die Beschriftungsvarianten des Buttons "Empfehlen" und "Gefällt mir" kann über die neue Option "action" gesteuert werden. Werte sind "<code>recommend</code>" (default) und "<code>like</code>".</li>
|
||
|
|
<li>Twitter: Parameter "<code>language</code>" (default "<code>en</code>") jetzt auch für Twitter.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="v1-0">Version 1.0</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Erstes öffentliches Release</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h2 id="files">Dateien</h2>
|
||
|
|
<p>Zu unserem Plug-In gehören folgende Dateien:</p>
|
||
|
|
<ul>
|
||
|
|
<li>index.html (die Doku, die Sie gerade lesen)</li>
|
||
|
|
<li>dimensions.gif (Infografik für diese Doku)</li>
|
||
|
|
<li>2-klick-logo_min.jpg (Logo klein)</li>
|
||
|
|
<li>jquery.socialshareprivacy.js</li>
|
||
|
|
<li>jquery.socialshareprivacy.min.js</li>
|
||
|
|
<li>socialshareprivacy/socialshareprivacy.css</li>
|
||
|
|
<li>socialshareprivacy/images/dummy_facebook.png</li>
|
||
|
|
<li>socialshareprivacy/images/dummy_facebook_en.png</li>
|
||
|
|
<li>socialshareprivacy/images/dummy_gplus.png</li>
|
||
|
|
<li>socialshareprivacy/images/dummy_twitter.png</li>
|
||
|
|
<li>socialshareprivacy/images/settings.png</li>
|
||
|
|
<li>socialshareprivacy/images/socialshareprivacy_info.png</li>
|
||
|
|
<li>socialshareprivacy/images/socialshareprivacy_on_off.png</li>
|
||
|
|
<li>socialshareprivacy/images/2-klick-logo.jpg</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="pre">Voraussetzungen und Einschränkungen</h2>
|
||
|
|
<p>
|
||
|
|
Technische Voraussetzungen sind jQuery und aktiviertes JavaScript im Browser. Bei uns getestet mit jQuery 1.4.<br />
|
||
|
|
Das Plug-In kann derzeit innerhalb einer HTML-Seite nur einmal verwendet werden.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Wenn Sie Vorschläge zur Verbesserung haben, wenden Sie sich gerne per Mail an <a href="mailto:2klick@heise.de?subject=Vorschlag%20zum%20Plug-In">2klick@heise.de</a>.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">Für Facebook ist zwingend eine eigene App-ID notwendig, siehe dazu <a href="#fb_app-id">Hinweis zur Facebook App-ID</a>.</del>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="dimensions">Ausmaße</h2>
|
||
|
|
<img src="dimensions.gif" width="600" height="284" alt="Ausmaße des Plug-Ins" />
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<li>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
<h2 id="merge">Einbindung</h2>
|
||
|
|
<pre>
|
||
|
|
<code><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></code>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="explanation">Erklärung des Codes</h3>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code><script type="text/javascript" src="jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="jquery.socialshareprivacy.js"></script></code>
|
||
|
|
</pre>
|
||
|
|
<p>
|
||
|
|
Die erste Zeile bindet das JavaScript-Framework „JQuery“ (<a href="http://jquery.com/">http://jquery.com/</a>) ein, die zweite Zeile unser Plug-In. jQuery liegt unserem Paket <strong>nicht</strong> bei, Sie müssen es erst noch selbst von der eben genannten Website herunterladen.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code><script type="text/javascript">
|
||
|
|
jQuery(document).ready(function($){
|
||
|
|
if($('#socialshareprivacy').length > 0){
|
||
|
|
$('#socialshareprivacy').socialSharePrivacy();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script></code>
|
||
|
|
</pre>
|
||
|
|
<p>
|
||
|
|
In diesem <code><script></code>-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 <code>id</code> <em>socialshareprivacy</em>.<br />
|
||
|
|
Damit das Anhängen des Plug-Ins nur dann geschieht, wenn das Element auch wirklich vorhanden ist, haben wir noch die Kontrollfunktion <code>if</code>, die das Anhängen umschließt und die nötige Bedingung prüft.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
<code><body>
|
||
|
|
…
|
||
|
|
<div id="socialshareprivacy"></div>
|
||
|
|
…
|
||
|
|
</body></code>
|
||
|
|
</pre>
|
||
|
|
<p>
|
||
|
|
Irgendwo im <code><body></code>-Bereich der Website platziert man das leere HTML-Element mit der gewünschten <code>id</code>, die identisch zur verwendeten <code>id</code> im vorhergehenden <code><script></code>-Block sein muss.
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="options">Optionen</h2>
|
||
|
|
<p>
|
||
|
|
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.<br />
|
||
|
|
Beispiel für einen Aufruf mit Optionen:
|
||
|
|
</p>
|
||
|
|
<pre>
|
||
|
|
<code>$('#socialshareprivacy').socialSharePrivacy({
|
||
|
|
services : {
|
||
|
|
facebook : {
|
||
|
|
'perma_option': 'off'
|
||
|
|
},
|
||
|
|
twitter : {
|
||
|
|
'status' : 'off'
|
||
|
|
},
|
||
|
|
gplus : {
|
||
|
|
'display_name' : 'Google Plus'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'cookie_domain' : 'heise.de'
|
||
|
|
});</code>
|
||
|
|
</pre>
|
||
|
|
<ol>
|
||
|
|
<li id="options_general">
|
||
|
|
<table summary="Eine Auflistung aller allgemeinen Optionen des socialSharePrivacy-Plug-Ins">
|
||
|
|
<caption>allgemeine Optionen</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Option</th>
|
||
|
|
<th>Standardwert</th>
|
||
|
|
<th>Beschreibung</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>info_link</td>
|
||
|
|
<td>http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html</td>
|
||
|
|
<td>Link zu detaillierter Datenschutz-Info, in unserem Fall ein heise-Artikel.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_help</td>
|
||
|
|
<td><em>Text</em></td>
|
||
|
|
<td>MouseOver-Text des <em>i</em>-Icons</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>settings_perma</td>
|
||
|
|
<td>Dauerhaft aktivieren und Datenüber­tragung zustimmen:</td>
|
||
|
|
<td>Überschrift des Einstellungsmenüs</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>cookie_path</td>
|
||
|
|
<td>/</td>
|
||
|
|
<td>Pfad der Gültigkeit des Cookies</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>cookie_domain</td>
|
||
|
|
<td><code>document.location.host</code></td>
|
||
|
|
<td>Domain für die das Cookie gültig ist</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>cookie_expires</td>
|
||
|
|
<td>365</td>
|
||
|
|
<td>Dauer die das Cookie gültig ist in Tagen</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>css_path</td>
|
||
|
|
<td>socialshareprivacy/socialshareprivacy.css</td>
|
||
|
|
<td>Pfad zur CSS-Datei, wenn leer wird kein Stylesheet eingebaut</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>uri</td>
|
||
|
|
<td>getURI</td>
|
||
|
|
<td>Die URI, die von den Buttons weitergegeben werden soll. Möglich ist ein fester Wert (z.B. <code>"http://www.heise.de"</code>) oder eine Funktion (siehe <code>function getURI()</code> im Plug-In-Quellcode)</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</li>
|
||
|
|
<li id="options_facebook">
|
||
|
|
<table summary="Eine Auflistung aller Optionen für Facebook des socialSharePrivacy-Plug-Ins">
|
||
|
|
<caption>Optionen: Facebook</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Option</th>
|
||
|
|
<th>Standardwert</th>
|
||
|
|
<th>Beschreibung</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>status</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat Facebook zur Auswahl</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">app_id</del></td>
|
||
|
|
<td><em>entfallen (seit Version 1.2)</em></td>
|
||
|
|
<td><del datetime="2011-10-04" cite="http://www.heise.de/extras/socialshareprivacy/#v1-2">Facebook App-ID; Sie ist nötig um den <em>Empfehlen</em>-Button von Facebook nutzen zu können. Ist sie nicht angegeben, wird dem User Facebook trotz <code>'status' : 'on'</code> <strong>nicht</strong> angeboten. In der JavaScript-Konsole wird dem Entwickler ein entsprechender Hinweis ausgegeben.</del></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>dummy_img</td>
|
||
|
|
<td>socialshareprivacy/images/dummy_facebook.png</td>
|
||
|
|
<td>Pfad zur statischen Grafik</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_info</td>
|
||
|
|
<td><em>Text</em></td>
|
||
|
|
<td>MouseOver-Text des Empfehlen-Buttons</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_fb_off</td>
|
||
|
|
<td>nicht mit Facebook verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_fb_on</td>
|
||
|
|
<td>mit Facebook verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>perma_option</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat die Option sich Facebook dauerhaft einblenden zu lassen (mittels Cookie)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>display_name</td>
|
||
|
|
<td>Facebook</td>
|
||
|
|
<td>Schreibweise des Service in den Optionen</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>referrer_track</td>
|
||
|
|
<td> </td>
|
||
|
|
<td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>language</td>
|
||
|
|
<td>de_DE</td>
|
||
|
|
<td>Spracheinstellung</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>action</td>
|
||
|
|
<td>recommend</td>
|
||
|
|
<td>Beschriftung des Buttons: Empfehlen (<code>recommend</code>) oder Gefällt mir (<code>like</code>)</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</li>
|
||
|
|
<li id="options_twitter">
|
||
|
|
<table summary="Eine Auflistung aller Optionen für Twitter des socialSharePrivacy-Plug-Ins">
|
||
|
|
<caption>Optionen: Twitter</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Option</th>
|
||
|
|
<th>Standardwert</th>
|
||
|
|
<th>Beschreibung</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>status</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat Twitter zur Auswahl</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>dummy_img</td>
|
||
|
|
<td>socialshareprivacy/images/dummy_twitter.png</td>
|
||
|
|
<td>Pfad zur statischen Grafik</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_info</td>
|
||
|
|
<td><em>Text</em></td>
|
||
|
|
<td>MouseOver-Text des Tweet-Buttons</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_twitter_off</td>
|
||
|
|
<td>nicht mit Twitter verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_twitter_on</td>
|
||
|
|
<td>mit Twitter verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>perma_option</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat die Option sich Twitter dauerhaft einblenden zu lassen (mittels Cookie)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>display_name</td>
|
||
|
|
<td>Twitter</td>
|
||
|
|
<td>Schreibweise des Service in den Optionen</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>referrer_track</td>
|
||
|
|
<td> </td>
|
||
|
|
<td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>tweet_text</td>
|
||
|
|
<td><code>getTweetText</code></td>
|
||
|
|
<td>
|
||
|
|
Die Funktion prüft ob es die Meta-Angabe <code>DC.title</code> gibt und verwendet diese. Gibt es außerdem noch <code>DC.creator</code> wird diese etwas abgesetzt (" - ") hinten angehängt. Ist <code>DC.title</code> nicht vorhanden wird das <title>-Tag der Seite verwendet.<br />
|
||
|
|
Diese Option kann mit einem eigenen Text (<code>typeof == string</code>) überschrieben werden oder mit einer eigenen Funktion (<code>typeof == function</code>), die den Text generiert.<br />
|
||
|
|
Der übergebene Texte wird immer auf 120 Zeichen gekürzt und beim letzten Leerzeichen mit … ersetzt.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>language</td>
|
||
|
|
<td>en</td>
|
||
|
|
<td>Spracheinstellung (Default: "<code>en</code>" ja, uns gefällt Tweet besser als Twittern)</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</li>
|
||
|
|
<li id="options_gplus">
|
||
|
|
<table summary="Eine Auflistung aller Optionen für Google+ des socialSharePrivacy-Plug-Ins">
|
||
|
|
<caption>Optionen: Google+</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Option</th>
|
||
|
|
<th>Standardwert</th>
|
||
|
|
<th>Beschreibung</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>status</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat Google+ zur Auswahl</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>dummy_img</td>
|
||
|
|
<td>socialshareprivacy/images/dummy_gplus.png</td>
|
||
|
|
<td>Pfad zur statischen Grafik</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_info</td>
|
||
|
|
<td><em>Text</em></td>
|
||
|
|
<td>MouseOver-Text des „+1“-Buttons</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_gplus_off</td>
|
||
|
|
<td>nicht mit Google+ verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im ausgeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>txt_gplus_on</td>
|
||
|
|
<td>mit Google+ verbunden</td>
|
||
|
|
<td>Text-Entsprechung der Schalter-Grafik im eingeschalteten Zustand, in der Regel nicht sichtbar für den User</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>perma_option</td>
|
||
|
|
<td>on</td>
|
||
|
|
<td>Der User hat die Option sich Google+ dauerhaft einblenden zu lassen (mittels Cookie)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>display_name</td>
|
||
|
|
<td>Google+</td>
|
||
|
|
<td>Schreibweise des Service in den Optionen</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>referrer_track</td>
|
||
|
|
<td> </td>
|
||
|
|
<td>Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>language</td>
|
||
|
|
<td>de</td>
|
||
|
|
<td>Spracheinstellung</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="examples">Beispiel-Einbindungen</h2>
|
||
|
|
<p>
|
||
|
|
Im Folgenden sehen Sie ein paar beispielhafte Einbindungen von gängigen Konfigurationen.
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<h3 id="only_fb">Nur Facebook einbinden</h3>
|
||
|
|
<pre>
|
||
|
|
<code>$('#socialshareprivacy').socialSharePrivacy({
|
||
|
|
services : {
|
||
|
|
twitter : {
|
||
|
|
'status' : 'off'
|
||
|
|
},
|
||
|
|
gplus : {
|
||
|
|
'status' : 'off'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});</code>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="no_perma">Keine Option zum dauerhaften Aktivieren anbieten</h3>
|
||
|
|
<pre>
|
||
|
|
<code>$('#socialshareprivacy').socialSharePrivacy({
|
||
|
|
services : {
|
||
|
|
facebook : {
|
||
|
|
'perma_option' : 'off'
|
||
|
|
},
|
||
|
|
twitter : {
|
||
|
|
'perma_option' : 'off'
|
||
|
|
},
|
||
|
|
gplus : {
|
||
|
|
'perma_option' : 'off'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});</code>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3 id="only_gplus_css_path">Nur Google+ anbieten und eigenen Pfad für die CSS-Datei angeben.</h3>
|
||
|
|
<pre>
|
||
|
|
<code>$('#socialshareprivacy').socialSharePrivacy({
|
||
|
|
services : {
|
||
|
|
facebook : {
|
||
|
|
'status' : 'off'
|
||
|
|
},
|
||
|
|
twitter : {
|
||
|
|
'status' : 'off'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'css_path' : '/style/plugins/socialshareprivacy.css'
|
||
|
|
});</code>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h3>Mehrere 2-Klick-Buttonleisten auf einer Seite</h3>
|
||
|
|
<h4>Variante 1: Ein Aufruf des Plug-Ins mit einem entsprechenden Selektor</h4>
|
||
|
|
<pre>
|
||
|
|
<div class="anriss">
|
||
|
|
<h3><a href="http://www.heise.de">heise</a></h3>
|
||
|
|
<p>lorem ipsum</p>
|
||
|
|
<div class="social"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="anriss">
|
||
|
|
<h3><a href="http://www.heise.de/security/">heise security</a></h3>
|
||
|
|
<p>dolor sit amet</p>
|
||
|
|
<div class="social"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(".social").socialSharePrivacy({
|
||
|
|
uri : function(context) {
|
||
|
|
return $(context).parents(".anriss").find("h3 a").attr("href");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</pre>
|
||
|
|
<h4>Variante 2: Mehrfacher Aufruf des Plug-Ins</h4>
|
||
|
|
<pre>
|
||
|
|
<div>
|
||
|
|
<h3><a href="http://www.heise.de">heise</a></h3>
|
||
|
|
<p>lorem ipsum</p>
|
||
|
|
<div id="one"></div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
$("#one").socialSharePrivacy({
|
||
|
|
uri : "http://www.heise.de"
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3><a href="http://www.heise.de/security/">heise security</a></h3>
|
||
|
|
<p>dolor sit amet</p>
|
||
|
|
<div id="two"></div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
$("#two").socialSharePrivacy({
|
||
|
|
uri : "http://www.heise.de/security/"
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="url">URL</h2>
|
||
|
|
<p>
|
||
|
|
Die URL, die den Services übergeben wird, kann über eine Option gesteuert werden.<br />Standardmäßig wird eine Funktion innerhalb des Plug-Ins verwendet, die die URL der aktuellen Seite aus <code>document.location.href</code> ermittelt, ist jedoch eine kanonische URL hinterlegt (<code><link rel="canonical"></code>), wird diese genommen.
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="perma_option">Einstellungen merken</h2>
|
||
|
|
<p>
|
||
|
|
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.<br />
|
||
|
|
Wurde für alle Services die Merken-Funktion ausgeschaltet (<code>'perma_option' : 'off'</code>) wird auch das Einstellungsmenü nicht mehr angezeigt.
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="licence">Lizenz</h2>
|
||
|
|
<p>
|
||
|
|
Dieses Plug-In ist unter der MIT License (<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>) veröffentlicht und darf gerne für private, wie auch kommerzielle Zwecke genutzt werden.
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2 id="logo">Logo</h2>
|
||
|
|
<p>
|
||
|
|
Unserem Plug-In liegt auch das von uns verwendete Logo bei, das Sie gerne zur Bewerbung dieser Aktion verwenden dürfen.
|
||
|
|
<a href="socialshareprivacy/images/2-klick-logo.jpg"><img src="2-klick-logo_min.jpg" width="150" height="150" alt="Logo 2 Klicks für mehr Datenschutz" style="float: left;" /></a>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</body>
|
||
|
|
</html>
|