Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
732 lines (720 sloc) 33.4 KB
<!DOCTYPE HTML>
<html lang="de-DE">
<head>
<title>Dokumentation &ndash; heise &bdquo;socialSharePrivacy&ldquo;&ndash;Plug-In</title>
<meta charset="UTF-8" />
<meta name="author" content="Hilko Holweg, Sebastian Hilbig, Nicolas Heiringhoff, Juergen Schmidt - Heise Zeitschriften Verlag GbmH &amp; 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 &ndash; 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 &lt; 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>&lt;iframe ...style="width:130px; height:25px;">&lt;/iframe></code> ergänzt.
</li>
<li>Allgemein: Wenn die Option css_path leer ist, wird kein &lt;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 &lt;= 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>&lt;head&gt;
&hellip;
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.socialshareprivacy.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
jQuery(document).ready(function($){
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy();
}
});
&lt;/script&gt;
&hellip;
&lt;/head&gt;
&lt;body&gt;
&hellip;
&lt;div id="socialshareprivacy"&gt;&lt;/div&gt;
&hellip;
&lt;/body&gt;</code>
</pre>
</li>
<li>
<h3 id="explanation">Erklärung des Codes</h3>
<pre>
<code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.socialshareprivacy.js"&gt;&lt;/script&gt;</code>
</pre>
<p>
Die erste Zeile bindet das JavaScript-Framework &bdquo;JQuery&ldquo; (<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>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function($){
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy();
}
});
&lt;/script&gt;</code>
</pre>
<p>
In diesem <code>&lt;script&gt;</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>&lt;body&gt;
&hellip;
&lt;div id="socialshareprivacy"&gt;&lt;/div&gt;
&hellip;
&lt;/body&gt;</code>
</pre>
<p>
Irgendwo im <code>&lt;body&gt;</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>&lt;script&gt;</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&uuml;ber&shy;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>&nbsp;</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>&nbsp;</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 (&quot; - &quot;) hinten angehängt. Ist <code>DC.title</code> nicht vorhanden wird das &lt;title&gt;-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 &hellip; 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 &bdquo;+1&ldquo;-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>&nbsp;</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>
&lt;div class="anriss">
&lt;h3>&lt;a href="http://www.heise.de">heise&lt;/a>&lt;/h3>
&lt;p>lorem ipsum&lt;/p>
&lt;div class="social">&lt;/div>
&lt;/div>
&lt;div class="anriss">
&lt;h3>&lt;a href="http://www.heise.de/security/">heise security&lt;/a>&lt;/h3>
&lt;p>dolor sit amet&lt;/p>
&lt;div class="social">&lt;/div>
&lt;/div>
&lt;script>
$(".social").socialSharePrivacy({
uri : function(context) {
return $(context).parents(".anriss").find("h3 a").attr("href");
}
});
&lt;/script>
</pre>
<h4>Variante 2: Mehrfacher Aufruf des Plug-Ins</h4>
<pre>
&lt;div>
&lt;h3>&lt;a href="http://www.heise.de">heise&lt;/a>&lt;/h3>
&lt;p>lorem ipsum&lt;/p>
&lt;div id="one">&lt;/div>
&lt;/div>
&lt;script>
$("#one").socialSharePrivacy({
uri : "http://www.heise.de"
});
&lt;/script>
&lt;div>
&lt;h3>&lt;a href="http://www.heise.de/security/">heise security&lt;/a>&lt;/h3>
&lt;p>dolor sit amet&lt;/p>
&lt;div id="two">&lt;/div>
&lt;/div>
&lt;script>
$("#two").socialSharePrivacy({
uri : "http://www.heise.de/security/"
});
&lt;/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>&lt;link rel="canonical"&gt;</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>
Jump to Line
Something went wrong with that request. Please try again.