2-Klick-Empfehlungsbutton von Heise (socialshareprivacy) in Light-Version mit prototype

Sehr schön, da haben die Entwickler von heise.de eine in Deutschland rechtskonforme Möglichkeit entwickelt, wie man Facebook, Google+ und Twitter Buttons auf Webseiten einbinden kann, den 2-Klick-Empfehlungsbutton von Heise. Leider läuft das Plug-In socialshareprivacy nur mit jQuery. Meine Anfrage, ob es auch für prototype entwickelt wird wurde negativ beanrtwortet. Deshalb habe ich eine Light Version (nur Google+ und Facebook, ohne Dauereinstellungsmöglichkeiten) zur Nutzung mit prototype erstellt, diese nutzt zum anzeiten der Hover-Texte prototip, weil ich es eh schon nutze.

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über­tragung 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); 
}