Aus unserer Community

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

Fragt mal rattatui, er hat das in seinem Shop

...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="{link file='euerTemplate/frontend/_resources/javascript/jquery.socialshareprivacy.js'></script>

und in den Block
{block name="frontend_index_header_javascript_jquery"}
der euerTemplate/frontend/index/header.tpl* einfügen.*
* (müsste so richtig sein glaub ich, ggf. fehlt noch ein append, je nachdem wie der Block bei euch angelegt ist - bei mir selbst ist java in der index.tpl, die auch nicht per extend die _default index.tpl Datei erweitert und außerdem sieht der link wg. CDN anders aus)

3. Code einbinden
In der euerTemplate/frontend/index/header.tpl
im Block
{block name="frontend_index_header_javascript"}
den Code

{literal}

<script type="text/javascript">
    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:

context.append('<li class="settings_info"><div class="settings_info_menu off perma_option_off"><a href="' + options.info_link + '" target="_blank"><span class="help_info icon"><span class="info">' + options.txt_help + '</span></span></a></div></li>');

... und alle weiteren Optionen kann man direkt in diesem File natürlich auch einstellen.

7. Darstellung auf der Seite
Den Code

<div id="socialshareprivacy"></div>

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

Leider klappt diese Anleitung nicht.

Durch das einbinden im Header.tpl meines Designs kommen Fehlermeldungen

Leider klappt diese Anleitung nicht.

Durch das einbinden im Header.tpl meines Designs kommen Fehlermeldungen

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="{link file='genius/frontend/_resources/javascript/jquery.socialshareprivacy.js'></script>" - Unexpected "<", expected one of: "{" , "$" , "identifier" , LDELIF , LDELFOR , LDELFOREACH , "closing tag" , INTEGER , "+" , "-" , "(" , "(!,not)" , TYPECAST , HEX , "." , SINGLEQUOTESTRING , "#" , "[" , """' in /var/www/demoshop/engine/Enlight/Vendor/Smarty/libs/sysplugins/smarty_internal_templatecompilerbase.php:404 Stack trace: #0 /var/www/demoshop/engine/Enlight/Vendor/Smarty/libs/sysplugins/smarty_internal_templateparser.php(2699): 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,

<script type="text/javascript" src="{link file='genius/frontend/_resources/javascript/jquery.socialshareprivacy.js'></script>

Da wird mit { angefangen und mit > abgesclossen. Das müsste der Fehler sein?!

Unexpected "<", expected one of: "{"

VG - Heiko