Die Bilder sind die von heise.
Template:
<div id="sociallinks" style="display:none"> <div class="links"> <div id="btn_facebook" class="facebook button off inittiptool"></div> <div id="link_facebook" class="facebook inittiptool">facebook</div> </div> <div class="rechts"> <div id="btn_gplus" class="gplus button off inittiptool"></div> <div id="link_gplus" class="gplus inittiptool">gplus</div> </div> </div>
Header:
document.observe('dom:loaded', function() {
frontend = new Frontend();
}Stylesheet:
div#sociallinks {
margin-top:30px;
padding-left:25px;
background-color:transparent;
border:none;
display:block;
}
div#sociallinks>div {
width:49%;
}
div#sociallinks .links {
float:left;
min-width:110px;
}
div#sociallinks .mitte,
div#sociallinks .rechts{
float:right;
text-align:right;
width:80px;
}
div#sociallinks div#link_facebook,
div#sociallinks div#link_gplus
{
color:transparent;
width:83px;height:20px;
margin-left:24px;
background: url(../../../image/socialshareprivacy/dummy_facebook.png) -0px -0px no-repeat;
}
div#sociallinks div#link_gplus
{
background: url(../../../image/socialshareprivacy/dummy_gplus.png) -0px -0px no-repeat;
}
div#sociallinks div#link_gplus.on,
div#sociallinks div#link_facebook.on
{
background:none;
}
div#sociallinks div#btn_gplus,
div#sociallinks div#btn_facebook
{
width:24px;height:12px;
margin-top:6px;
float:left;
background: url(../../../image/socialshareprivacy/socialshareprivacy_on_off.png) -0px -12px no-repeat;
}
div#sociallinks div#btn_gplus.off,
div#sociallinks div#btn_facebook.off
{
background-position: 0 0;
}
div#sociallinks div#link_gplus:hover,
div#sociallinks div#link_facebook:hover,
div#sociallinks div#btn_gplus:hover,
div#sociallinks div#btn_facebook:hover
{
cursor:pointer;
}
Javascript:
var Frontend = Class.create({
sociallinksdefaults : {
'services' : {
'facebook' : {
'status' : 'on',
'app_id' : '__FB_APP-ID__',
'dummy_img' : 'socialshareprivacy/images/dummy_facebook.png',
'txt_info' : '2 Klicks für mehr Datenschutz: Erst wenn Sie hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an Facebook senden. Schon beim Aktivieren werden Daten an Dritte übertragen.',
'txt_info_on' :'Jetzt sind sie verbunden',
'txt_off' : 'nicht mit Facebook verbunden',
'txt_on' : 'mit Facebook verbunden',
'perma_option' : 'on',
'display_name' : 'Facebook',
'referrer_track' : '',
'language' : 'de_DE',
'action' : 'recommend'
},
'gplus' : {
'status' : 'on',
'dummy_img' : 'socialshareprivacy/images/dummy_gplus.png',
'txt_info' : '2 Klicks für mehr Datenschutz: Erst wenn Sie hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an Google+ senden. Schon beim Aktivieren werden Daten an Dritte übertragen.',
'txt_info_on' :'Jetzt sind sie mit Google verbunden',
'txt_off' : 'nicht mit Google+ verbunden',
'txt_on' : 'mit Google+ verbunden',
'perma_option' : 'on',
'display_name' : 'Google+',
'referrer_track' : '',
'language' : 'de'
}
},
'info_link' : 'http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html',
'txt_help' : 'Wenn Sie diese Felder durch einen Klick aktivieren, werden Informationen an Facebook, Twitter oder Google in die USA übertragen und unter Umständen auch dort gespeichert. Näheres erfahren Sie durch einen Klick auf das i.',
'settings_perma' : 'Dauerhaft aktivieren und Datenübertragung zustimmen:',
'cookie_path' : '/',
'cookie_domain' : document.location.host,
'cookie_expires' : '365',
'css_path' : 'socialshareprivacy/socialshareprivacy.css',
'uri' : "getURI"
},
initialize: function() {
frontend = this;
if ($("sociallinks"))
{
$("sociallinks").show();
frontend.sociallinksdefaults.uri = frontend.getURI();
this.initSociallinkTipTool();
}
},
getURI:function ()
{
var uri = document.location.href;
var canonical = $$("link[rel=canonical]");
if (canonical && canonical.length > 0) {
var _uri = canonical[0].href;
if (_uri.indexOf("http") < 0) {
_uri = document.location.protocol + "//" + document.location.host + canonical;
}
if (_uri)
uri = _uri;
}
return uri;
},
initSociallinkTipTool:function()
{
var sl = $$(".inittiptool");
if (sl && sl.length)
{
sl.each(function(el)
{
el.observe("click", frontend.sociallinkAction)
if (el.hasClassName("gplus"))
settings = frontend.sociallinksdefaults.services.gplus;
else settings = frontend.sociallinksdefaults.services.facebook;
onoroff = "off";
frontend.sociallinkToolTip(el,settings,onoroff);
});
}
},
sociallinkToolTip:function(el,settings,onoroff)
{
var opts = {};
opts.hook = { tip: 'topLeft', mouse: true };
opts.stem = 'topLeft';
opts.style = 'bwhint';
opts.width = 240;
opts.offset= { x: 0, y: 16};
var dertext = settings.txt_info;
if (onoroff=="on")
dertext = settings.txt_info_on;
new Tip(el.id, dertext, opts);
},
sociallinkAction:function(ev)
{
el = ev.element();
if (!el) return;
var ersterstatus = "off";
var neuerstatus = "on";
var uri = frontend.sociallinksdefaults.uri;
if (el.hasClassName("gplus"))
{
settings = frontend.sociallinksdefaults.services.gplus;
var btn_id = "btn_gplus";
var lnk = $("link_gplus");
var code = '<div class="g-plusone" data-size="medium" data-href="' + uri + '"></div>
<script type="text/javascript">window.___gcfg = {lang: "de"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script>';
}
else
{
settings = frontend.sociallinksdefaults.services.facebook;
var btn_id = "btn_facebook";
var lnk = $("link_facebook");
var code = '<iframe src="http://www.facebook.com/plugins/like.php?locale=de&app_id='+ settings.app_id +'&href=' + uri + '&send=false&layout=button_count&width=120&show_faces=false&action='+ settings.action +'&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:145px; height:21px;" allowTransparency="true"></iframe>';
}
btn = $(btn_id);
if (el.id == btn_id)
{
if (el.hasClassName("off"))
ersterstatus = "off";
else {ersterstatus = "on"; neuerstatus="off";}
}
tlt = (neuerstatus == "on" ? settings.txt_on:settings.txt_off);
if (neuerstatus == "off")
code = "";
lnk.update(code).removeClassName(ersterstatus).addClassName(neuerstatus);
btn.removeClassName(ersterstatus).addClassName(neuerstatus);
btn.title = tlt;
frontend.sociallinkToolTip(btn,settings,neuerstatus);
frontend.sociallinkToolTip(lnk,settings,neuerstatus);
}
