jquery.socialshareprivacy.zip
jquery.socialshareprivacy.tar.gz
perma_orientation
ist hinzugekommen, sie dient der Steuerung wohin sich das Perma-Menü ausklappt.
.live()
-Funktion auf .on()
umgestellt wurde.
dnt=true
) angehängt.
uri
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 Beispiel-Einbindungen ergänzt.
css_path
angegebene Stylesheet wurde mit jQuery-Versionen != 1.4.2 nicht eingebaut.
margin
-, padding
-, width
- und height
-Angaben hinzugefügt.
canonical
-Attribut gab, das aber einen leeren Wert hatte.
<iframe ...style="width:130px; height:25px;"></iframe>
ergänzt.
uri
gesteuert werden. Es ist sowohl ein fester Wert, wie auch eine Function möglich. Default ist die enthaltene Funktion getURI
recommend
" (default) und "like
".language
" (default "en
") jetzt auch für Twitter.Zu unserem Plug-In gehören folgende Dateien:
Technische Voraussetzungen sind jQuery und aktiviertes JavaScript im Browser. Seit Plugin-In Version 1.5 ist mindestens jQuery 1.7 erforderlich.
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.
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.
<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({
"css_path" : "/js/plugins/socialshareprivacy/socialshareprivacy.css",
"lang_path" : "/js/plugins/socialshareprivacy/lang/",
"language" : "de"
});
}
});
</script>
…
</head>
<body>
…
<div id="socialshareprivacy"></div>
…
</body>
<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. jQuery liegt unserem Paket nicht bei, Sie müssen es erst noch selbst von der eben genannten Website herunterladen.
<script type="text/javascript">
jQuery(document).ready(function($){
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy({
"css_path" : "/js/plugins/socialshareprivacy/socialshareprivacy.css",
"lang_path" : "/js/plugins/socialshareprivacy/lang/",
"language" : "de"
});
}
});
</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.
Der Wert zum Schlüssel css_path
gibt an, wo auf ihrem Server die CSS-Datei unseres Plug-Ins abgelegt wurde.
Der Wert zum Schlüssel lang_path
gibt das Verzeichnis an, wo auf ihrem Server die Sprach-Dateien (*.lang) unseres Plug-Ins abgelegt wurden.
Der Wert zum Schlüssel language
wählt die Sprach-Datei im Verzeichnis (angegeben unter lang_path
) aus. Als Dateinamenserweiterung wird .lang
angenommen. Ist die Datei nicht vorhanden bricht das Plug-In ab und schreibt eine Ausgabe in die Entwickler-Konsole des Browsers.
<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.
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 : {
'perma_option' : 'off'
},
twitter : {
'status' : 'off'
},
gplus : {
'dummy_img' : '/images/socialshareprivacy/images/dummy_gplus_variante.png'
}
},
'css_path' : '/js/plugins/socialshareprivacy/socialshareprivacy.css',
'lang_path' : '/js/plugins/socialshareprivacy/lang/',
'language' : 'de',
'cookie_domain' : 'heise.de'
});
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. |
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, wenn leer wird kein Stylesheet eingebaut |
uri | getURI | Die URI, die von den Buttons weitergegeben werden soll. Möglich ist ein fester Wert (z.B. "http://www.heise.de" ) oder eine Funktion (siehe function getURI() im Plug-In-Quellcode) |
language | de | Name der Sprachdatei (Schema de.lang) Beispiel |
lang_path | lang/ | Pfad zum Verzeichnis, wo die Sprachdateien zu finden sind Beispiel |
skin | light | Möglich sind dark und light |
alignment | horizontal | Möglich sind horizontal und vertical . Diese Angabe bezieht sich darauf, ob die Buttons neben- oder untereinander stehen. |
switch_alignment | left | Möglich sind left und right . Die Schalter-Grafik wird auf der entsprechende Seite der Buttons angezeigt. Diese Option hat nur Auswirkungen, wenn alle 3 Dienste die Darstellung des Zählers über dem Button nutzen.(Facebook: 'layout' : 'box_count' Twitter: 'count' : 'vertical' Google Plus: 'size' : 'tall' )
|
perma_orientation | down | Die Werte "down " und "top " sind möglich. Bei "top " klappt sich das Kontextmenü für die Perma-Optionen der Services nach oben auf. "down " ist das bisherige Standardverhalten und klappt das Menü nach unten auf. |
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) |
Option | Standardwert | Beschreibung | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
status | on | Der User hat Facebook zur Auswahl | ||||||||||||
dummy_img | socialshareprivacy/images/dummy_facebook.png | Pfad zur statischen Grafik | ||||||||||||
perma_option | on | Der User hat die Option sich Facebook dauerhaft einblenden zu lassen (mittels Cookie) | ||||||||||||
referrer_track | Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden | |||||||||||||
action | recommend | Beschriftung des Buttons: „Empfehlen“ (recommend ) oder „Gefällt mir“ (like ) |
||||||||||||
layout | button_count | Möglich sind button_count (der Zähler wird neben dem Button dargestellt) und box_count (der Zähler wird über dem Button dargestellt) |
||||||||||||
sharer
|
||||||||||||||
entfallen (seit Version 1.2) | 'status' : 'on' nicht angeboten. In der JavaScript-Konsole wird dem Entwickler ein entsprechender Hinweis ausgegeben. |
|||||||||||||
entfallen (seit Version 1.5) | ||||||||||||||
entfallen (seit Version 1.5) | ||||||||||||||
entfallen (seit Version 1.5) | ||||||||||||||
entfallen (seit Version 1.5) | ||||||||||||||
entfallen (seit Version 1.5) |
Option | Standardwert | Beschreibung |
---|---|---|
status | on | Der User hat Twitter zur Auswahl |
dummy_img | socialshareprivacy/images/dummy_twitter.png | Pfad zur statischen Grafik |
perma_option | on | Der User hat die Option sich Twitter dauerhaft einblenden zu lassen (mittels Cookie) |
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. |
count | horizontal | Möglich sind horizontal (der Zähler wird neben dem Button dargestellt) und vertical (der Zähler wird über dem Button dargestellt) |
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | en " ja, uns gefällt Tweet besser als Twittern) |
Option | Standardwert | Beschreibung |
---|---|---|
status | on | Der User hat Google+ zur Auswahl |
dummy_img | socialshareprivacy/images/dummy_gplus.png | Pfad zur statischen Grafik |
perma_option | on | Der User hat die Option sich Google+ dauerhaft einblenden zu lassen (mittels Cookie) |
referrer_track | Wird ans Ende der URL gehängt, kann zum Tracken des Referrers genutzt werden | |
size | medium | Es gibt noch small , standard und tall ; Um den +1-Zähler über dem Button anzuzeigen wählen Sie bitte tall |
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) | ||
entfallen (seit Version 1.5) |
Im Folgenden sehen Sie ein paar beispielhafte Einbindungen von gängigen Konfigurationen. Da die meisten Benutzer den Pfad zu CSS- und Sprach-Dateien vermutlich anpassen müssen, werden diese Optionen hier immer mit angegeben.
$('#socialshareprivacy').socialSharePrivacy({
services : {
twitter : {
'status' : 'off'
},
gplus : {
'status' : 'off'
}
},
'css_path' : '/js/plugins/socialshareprivacy/socialshareprivacy.css',
'lang_path' : '/js/plugins/socialshareprivacy/lang/',
'language' : 'de'
});
$('#socialshareprivacy').socialSharePrivacy({
services : {
facebook : {
'perma_option' : 'off'
},
twitter : {
'perma_option' : 'off'
},
gplus : {
'perma_option' : 'off'
}
},
'css_path' : '/js/plugins/socialshareprivacy/socialshareprivacy.css',
'lang_path' : '/js/plugins/socialshareprivacy/lang/',
'language' : 'de'
});
$('#socialshareprivacy').socialSharePrivacy({
services : {
facebook : {
'status' : 'off'
},
twitter : {
'status' : 'off'
}
},
'css_path' : '/style/plugins/socialshareprivacy.css',
'lang_path' : '/js/plugins/socialshareprivacy/lang/',
'language' : 'de'
});
<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>
<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>
geladen wird nun /js/l10n/firma_de.lang
$('#socialshareprivacy').socialSharePrivacy({
'language' : 'firma_de',
'lang_path' : '/js/l10n/'
});
Als Dummy wird nun die Grafik aus dummy_img
angezeigt, beim Aktivieren wird die Grafik getauscht gegen eine zu Facebook verlinkende (normales <a>-Tag) aktiv aussehende Grafik aus img
.
Bei der Share-/Teilen-Option gibt es keine Anzeige eines Like-Counts. Der Vorteil des Teilen-Buttons ist einerseits, dass der Benutzer zum geteilten Link bei Facebook noch eine persönliche Nachricht hinzufügen kann, außerdem wird auch beim Aktivieren dieser Option keine Verbindung zu Facebook-Servern aufgebaut.
$('#socialshareprivacy').socialSharePrivacy({
'services' : {
'facebook' : {
'sharer' : {
'status' : 'on',
'dummy_img' : '/js/plugins/socialshareprivacy/images/dummy_facebook_share_de.png',
'img' : '/js/plugins/socialshareprivacy/images/facebook_share_de.png'
}
}
},
'css_path' : '/js/plugins/socialshareprivacy/socialshareprivacy.css',
'lang_path' : '/js/plugins/socialshareprivacy/lang/',
'language' : 'de'
});
$('#socialshareprivacy').socialSharePrivacy({
'services' : {
'facebook' : {
'dummy_img' : 'js/plugins/socialshareprivacy/images/dummy_facebook.png',
'layout' : 'box_count'
},
'twitter' : {
'dummy_img' : 'js/plugins/socialshareprivacy/images/dummy_twitter.png',
'count' : 'vertical'
},
'gplus' : {
'dummy_img' : 'js/plugins/socialshareprivacy/images/dummy_gplus.png',
'size' : 'tall'
}
},
'css_path' : 'js/plugins/socialshareprivacy/socialshareprivacy.css',
'lang_path' : 'js/socialshareprivacy/lang/',
'alignment' : 'vertical'
});
Die URL, die den Services übergeben wird, kann über eine Option gesteuert werden.
Standardmäßig wird eine Funktion innerhalb des Plug-Ins verwendet, die die URL der aktuellen Seite aus document.location.href
ermittelt, ist jedoch eine kanonische URL hinterlegt (<link rel="canonical">
), wird diese genommen.
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.
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.
Unserem Plug-In liegt auch das von uns verwendete Logo bei, das Sie gerne zur Bewerbung dieser Aktion verwenden dürfen.
Unser Projekt war von Anfang darauf ausgelegt offen zu sein, sodass andere es weiterentwickeln und an ihre Bedürfnisse anpassen können. Das haben zu unserer Freude auch viele getan.
Im Folgenden finden Sie eine kleine Auflistung einiger Forks. Diese Liste erhebt keinerlei Anspruch auf Vollständigkeit.