Heise Online hat mit ihrer 2-Klick-Lösung eine datenschutzfreundliche Einbindung von Buttons von Facebook, Twitter und Google+ gefunden. Leider nur für Wordpress und Joomla. Wäre schön wenn jemand der Ahnung von der Materie hat, das auch für unsere Shopwareshops umstricken könnte! 
guckst du hier und Joomla Erweiterung
Ja, das wäre echt cool!
Fragt mal rattatui, er hat das in seinem Shop
[quote]Fragt mal rattatui, er hat das in seinem Shop ;)[/quote] …Verräter! 
-und ohne wen hätte ich das nicht hinbekommen? 
Also los: 1. Filepacket Zuerst diese Seite hier aufsuchen und das Filepacket runterladen - weiterhin findet man dort alle Parameter erklärt (die mittlerweile für v 1.3 recht ausgereift und umfangreich sind - weiterhin ist es nun möglich, socialshareprivacy mehrmals zu verwenden, also sollte es z.B möglich sein, diese im Blog-Beitrag, Artikeldetailseite und/oder Header/Footer zu verwenden). 2. .js File einbinden Das File jquery.socialshareprivacy.js in euerTemplate/frontend/_resources/javascript kopieren (Anpassung folgt weiter unten). Die Zeile von Heise <script type="text/javascript" src="jquery.socialshareprivacy.js"></script> anpassen in <script type="text/javascript" src="%7Blink%20file='euerTemplate/frontend/_resources/javascript/jquery.socialshareprivacy.js'></script>%5B/code%5D%0Aund%20in%20den%20Block%0A%5Bb%5D%7Bblock%20name=" frontend_index_header_javascript_jquery der euertemplate einf so richtig sein glaub ich ggf. fehlt noch ein append je nachdem wie block bei euch angelegt ist mir selbst java in index.tpl die auch nicht per extend _default datei erweitert und au sieht link wg. cdn anders aus code einbinden im name="frontend_index_header_javascript" den>
jQuery(document).ready(function($){
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy({
services : {
facebook : {
'status' : 'on',
'dummy_img' : 'templates/euerTemplate/frontend/_resources/images/socialshareprivacy/dummy_facebook.png'
},
twitter : {
'status' : 'on',
'dummy_img' : 'templates/euerTemplate/frontend/_resources/images/socialshareprivacy/dummy_twitter.png'
},
gplus : {
'status' : 'on',
'language' : 'de',
'dummy_img' : 'templates/euerTemplate/frontend/_resources/images/socialshareprivacy/dummy_gplus.png'
},
}
});
}
});
</script>{/literal} einfügen. Die Optionen gemäß dem Heise-Link je nach eurem Gusto anpassen. Pfade natürlich auch anpassen. 4. Images Ein Verzeichnis „socialshareprivacy“ in templates/euerTemplate/frontend/_resources/images/ anlegen und die Bilder des Paketes dorthin kopieren. 5. CSS Datei kopieren Wenn (selbst) angepasstes CSS gewünscht, dann die dem Packet beiliegende socialshareprivacy.css nach templates/euerTemplate/frontend/_resources/styles kopieren** **(ein Einfügen des CSS Codes in eure Template.css funktioniert (im Gegensatz zum Beispiel der NivoSlider.css) leider nicht, da durch das Skript die template.css komplett nochmals geladen wird.) 6. jquery.socialshareprivacy.js anpassen Ich habe die unkomprimierte Version genommen, zwar ist auf der Heise-Seite dieser Options-Aufruf im Code unter 3. als Beispiel zu sehen, funktionierte aber leider bei mir nicht - das ist aber kein Problem, denn auf dieser Seite wieder selbst minifizieren lässt (funktioniert übrigens auch mit allen weiteren .js Dateien, z.B. auch der shopware.js) - In Zeile 128 ‚css_path‘ '/templates/euerTemplate/frontend/\_resources/styles/socialshareprivacy.css', - In Zeile 254 target="_blank" einsetzen führt dazu, dass nicht die aktuelle Shopseite zugemacht wird, sondern ein neuer Tab im Browser aufgeht - meiner Meinung nach recht sinnvoll: [code]context.append(’
[’ + options.txt_help + ‚](‘ + options.info_link + ')
');[/code] … und alle weiteren Optionen kann man direkt in diesem File natürlich auch einstellen. 7. Darstellung auf der Seite Den Code [code]
[/code] dorthin setzen, wo Ihr ihn haben wollt - bei mir z.B. auf der Detailseite in der templates/meinTemplate/frontend/detail/index.tpl unterhalb des Blocks {block name=‚frontend_detail_description_links‘} 8. Rechtliches Betreffs der Verlinkung mit der Heise-Seite beim Klick auf den „i“-Button kann man auch auf die eigene Datenschutzseite verlinken, teilte mir Trusted Shops mit - allerdings sollten dort dann auch wirklich zutreffende Informationen stehen. TS hat mir dazu einen angepassten Text (Facebook-Zwei-Button Lösung) zur Erweiterung der Datenschutzseite zur Verfügung gestellt. Weitere Datenschutzergänzungen zu Twitter/Google+ findet man ggf. auf Spreerecht.de wie zum Beispiel hier - sehr lesenswert das Ganze. Das sollte man auch überlegen, wenn man anstelle der Heise-Lösung das neue Plugin für Social-Sharing benutzt. Ich konnte nicht erkennen, dass dieses Plugin bzw. der Anbieter dieser Dienstleistung auf rechtliche deutsche Sonderwege eingeht. PS: den google+ code für die Seite nicht vergessen und ggf. eine Unternehmensseite bei Google erstellen. Grüße rattatui
1 „Gefällt mir“
Leider klappt diese Anleitung nicht. Durch das einbinden im Header.tpl meines Designs kommen Fehlermeldungen 
[quote=“geniusgmbhtv”]Leider klappt diese Anleitung nicht. Durch das einbinden im Header.tpl meines Designs kommen Fehlermeldungen :-([/quote] Hallo, Bei mir geht es. welche Fehlermeldungen denn genau? Grüße rattatui
danke für die anleitung, nur leider bekomme ich auch bei punkt 2 einen fehler mit dem smarty compiler… kannste nochmal gucken ob das mit der header.tpl so stimmt?
Hi Charly, Ja das könnte sein, weil wie ich geschrieben habe genau diese Einbindung bei mir nicht mehr dem Standard entspricht - und ich nicht genau weiß, wie die dann genau bei euch aussehen müsste. Vielleicht hilft die Fehlermeldung hier weiter, kanst die ja mal posten bitte. Evtl. fällt mir was dazu ein oder Anderen hier (die mehr auf dem Kasten haben als ich ) Das sollte sich aber lösen lassen denn es funktioniert ja bei mir. Grüße rattaui
Das hier ist die Fehlermeldung: Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "/var/www/demoshop/templates/genius/frontend/index/header.tpl" on line 2 " <script type="text/javascript" src="%7Blink%20file='genius/frontend/_resources/javascript/jquery.socialshareprivacy.js'></script>" unexpected expected one of: ldelif ldelfor ldelforeach tag integer typecast hex singlequotestring in stack trace: smarty_internal_templatecompilerbase->trigger_template_error() #1 /var/www/demoshop/engine/Enlight/Vendor/Smarty/libs/sysplugins/smarty_internal_templateparser.php(2764): Smarty_Internal_Templateparser->yy_syntax_error(65, '<') #2 /var/www/demoshop/engine/Enlight/Ve in /var/www/demoshop/engine/Enlight/Vendor/Smarty/libs/sysplugins/smarty_internal_templatecompilerbase.php on line 404
Und irgendwie hilft mir das nicht so weiter…
Hallo, [code]
1 „Gefällt mir“
Danke Heiko, habe es just in dieser Sekunde auch rausgefunden. Hinten am Ende ist ein Fehler beim js code. Danke!
Hallo Heiko, danke für Deine Unterstützung an dieser Stelle. Hatte ich nicht gesehen und ich konnte es so nicht testen weil es bei mir anders ist. Funktioniert jetzt alles bei euch? Grüße rattatui
Leider nicht. Bei mir zeigt er nie die social media buttons an. Unter Firebug sehe ich auch nur den leeren Div Container. Mir ist aufgefallen das beim einbinden in z.B. die Detailansicht eines Produktes die Tabs zerschossen werden und die Abstände und alles verloren gehen. Ich denke mal das hat was mit js zu tun? Weil wenn ich den Codeteil hier aus dem header entferne: {block name="frontend\_index\_header\_javascript" append} {literal} <script type="text/javascript">
jQuery(document).ready(function($){
if($('#socialshareprivacy').length > 0){
$('#socialshareprivacy').socialSharePrivacy({
services : {
facebook : {
'status' : 'on',
'dummy_img' : 'templates/genius/frontend/_resources/images/socialshareprivacy/dummy_facebook.png'
},
twitter : {
'status' : 'on',
'dummy_img' : 'templates/genius/frontend/_resources/images/socialshareprivacy/dummy_twitter.png'
},
gplus : {
'status' : 'off',
'language' : 'de',
'dummy_img' : 'templates/genius/frontend/_resources/images/socialshareprivacy/dummy_gplus.png'
},
}
});
}
});
</script> {/literal} {/block} geht alles, nur eben die social media sachen werden nicht angezeigt.
Hallo, weiß nicht welche SW-Version etc. Du nutzt - evtl. hat es hiermit etwas zu tun: allgemeines-f2/update-3-5-5-problem-artikel-in-wk-legen-ie6-t4425.html#p24076 Geht zwar dort um etwas anderes, jedoch hat die dort beschriebene Lösung auch bei anderen js-Fehlern zum Erfolg geführt. Ich hatte das gleiche Problem mit den Tabs etc. auch in Zusammenhang mit IE8 und dem Plugin „Sexybookmarks“ - nach der im Beitrag beschriebenen Änderung ging dann alles.
Hi, [quote]Weil wenn ich den Codeteil hier aus dem header entferne:[/quote] [quote]geht alles, nur eben die social media sachen werden nicht angezeigt.[/quote] Wenn du das entfernst, kann auch nichts mehr angezeigt werden. Das sollte sich alles per CSS regeln lassen. Ich denke es macht wenig Sinn, wenn ich meine CSS hier poste, aber vielleicht hilft es doch… .social\_share\_privacy\_area { clear: both; margin: 20px 0 !important; list-style-type: none; padding: 0 !important; width: auto; height: 25px; display: block; } .social\_share\_privacy\_area li { margin: 0 !important; padding: 0 !important; height: 21px; float: left; } .social\_share\_privacy\_area li .dummy\_btn { float: left; margin: 0 0 0 10px; cursor: pointer; padding: 0; height: inherit; } .social\_share\_privacy\_area li div iframe { overflow: hidden; height: inherit; width: inherit; } /\* Facebook begin \*/ .social\_share\_privacy\_area .facebook { width: 180px; display: inline-block; } .social\_share\_privacy\_area .facebook .fb\_like iframe { width: 145px; } /\* Facebook end \*/ /\* Twitter begin \*/ .social\_share\_privacy\_area .twitter { width: 148px; } .social\_share\_privacy\_area li div.tweet { width: 115px; } /\* Twitter end \*/ /\* Google+ begin \*/ .social\_share\_privacy\_area .gplus { width: 123px; } .social\_share\_privacy\_area li div.gplusone { width: 90px; } /\* Google+ end \*/ /\* Switch begin \*/ .social\_share\_privacy\_area li .switch { display: inline-block; text-indent: -9999em; background: transparent url(../images/socialshareprivacy/socialshareprivacy\_on\_off.png) no-repeat 0 0 scroll; width: 23px; height: 12px; overflow: hidden; float: left; margin: 4px 0 0; padding: 0; cursor: pointer; } .social\_share\_privacy\_area li .switch.on { background-position: 0 -12px; } /\* Switch end \*/ /\* Tooltips begin \*/ .social\_share\_privacy\_area li.help\_info { position: relative; } .social\_share\_privacy\_area li.help\_info .info, .social\_share\_privacy\_area li .help\_info.icon .info { display: none; position: absolute; bottom: 40px; left: 0; width: 290px; padding: 10px 15px; margin: 0; font-size: 12px; line-height: 16px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 3px 4px #999; -webkit-box-shadow: 0 3px 4px #999; box-shadow: 0 3px 4px #999; background-color: #fdfbec; color: #000; z-index: 500; } .social\_share\_privacy\_area li.gplus.help\_info .info { left: -60px; } .social\_share\_privacy\_area li .help\_info.icon .info { left: -243px; width: 350px; } .social\_share\_privacy\_area li.help\_info.display .info, .social\_share\_privacy\_area li .help\_info.icon.display .info { display: block; } .social\_share\_privacy\_area li.help\_info.info\_off.display .info { display: none; } .social\_share\_privacy\_area li .help\_info.icon { background: #fff url(../images/socialshareprivacy/socialshareprivacy\_info.png) no-repeat center center scroll; width: 25px; height: 20px; position: relative; display: inline-block; vertical-align: top; border: 2px solid #e7e3e3; border-right-width: 0; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; margin: 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu.on .help\_info.icon { border-top-width: 0; border-left-width: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu.perma\_option\_off .help\_info.icon { border-right-width: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /\* Tooltips end \*/ /\* Settings/Info begin \*/ .social\_share\_privacy\_area li.settings\_info { position: relative; right: 124px; top: 22px; } .social\_share\_privacy\_area li.settings\_info a { text-decoration: none; margin: 0 !important; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu { background-color: #f3f4f5; border: 2px solid #e7e3e3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 3px #c1c1c1; -webkit-box-shadow: 2px 2px 3px #c1c1c1; box-shadow: 3px 3px 3px #c1c1c1; left: 0; position: absolute; top: 0; width: 135px; z-index: 1000; margin: 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu.off { border-width: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu.off form { display: none; margin: 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu .settings { text-indent: -9999em; display: inline-block; background: #fff url(../images/socialshareprivacy/settings.png) no-repeat center center scroll; width: 25px; height: 20px; border: 2px solid #e7e3e3; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; border-left: 1px solid #ddd; margin: 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu.on .settings { border-top-width: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu form fieldset { border-width: 0; margin: 0; padding: 0 10px 10px; width: 250px; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu form fieldset legend { font-size: 11px; font-weight: bold; line-height: 14px; margin: 0; padding: 10px 0; width: 115px; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu form fieldset input { clear: both; float: left; margin: 4px 10px 4px 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu form fieldset label { display: inline-block; float: left; font-size: 12px; font-weight: bold; line-height: 24px; -moz-transition: color .5s ease-in; -webkit-transition: color .5s ease-in; transition: color .5s ease-in; margin: 0; padding: 0; } .social\_share\_privacy\_area li.settings\_info .settings\_info\_menu form fieldset label.checked { color: #090; } span.info { width: 200px !important; } Grüße rattaui
[quote=„digitalwaagen123“]Hallo, weiß nicht welche SW-Version etc. Du nutzt - evtl. hat es hiermit etwas zu tun: allgemeines-f2/update-3-5-5-problem-artikel-in-wk-legen-ie6-t4425.html#p24076 Geht zwar dort um etwas anderes, jedoch hat die dort beschriebene Lösung auch bei anderen js-Fehlern zum Erfolg geführt. Ich hatte das gleiche Problem mit den Tabs etc. auch in Zusammenhang mit IE8 und dem Plugin „Sexybookmarks“ - nach der im Beitrag beschriebenen Änderung ging dann alles.[/quote] Ich nutze die neuste Version. Dort stehen diese Dinge schon so in der js. Kann von Shopware mal jemand was dazu sagen? Grüße
ok habe es nun hinbekommen mit deiner anleitung. könnt ihr euch ja mal anschauen auf www.gamekeyshop.net dickes danke an rattatui!
Hallo, ja schöne Lösung. Sieht gut aus. @geniusgmbhtv: Was genau meinst du hier? Wenn bei dir die Tabs nicht korrekt dargestellt werden ist das ja i.d.R. auf einen JS-Fehler zurückzuführen. Es kann da aber auch ein Plugin o.ä. Ursache sein. (Das wäre aber besser in einem eigenen Thema aufgehoben )
Hallo, vielen Dank für diese Anleitung. Ich habe jedoch einige Fehler entdeckt und habe mehrere Stunden benötigt um diese zu entfernen. Jetzt läuft es. Gruß Maik
fällt mir gerade ein wo ich das hier lese. Die Rhinos Media UG wollte mal das Google Plus Plugin updaten auf der 2 Klick Verfahren (so wie Heise.de) (http://store.shopware.de/werbung-marketing/google-modul) Leider ist dadraus wohl nichts mehr geworden… Die hätten das auch mit den anderen Social Media Sachen umsetzen können, bzw das Plugin erweitern. Schade eigentlich.