Sehr geehrte Kunden,
aufgrund des Beitrages "Facebook Button illegal mit heutigem Urteil LG Düsseldorf" vom 09.03.16 möchten wir Ihnen eine Alternative zu den bisherigen share-Buttons zeigen. Die sogenannte 2-Klick Lösung.
Folgendes ist als Beispiel für die Anzeige unter Ihrem Basket im Artikeldetail zu tun (facebook, google+ und twitter):
Sollten Sie Hilfe bei der Einbindung benötigen, schreiben Sie mir bitte einfach eine E-Mail: skb@powergap.de
aufgrund des Beitrages "Facebook Button illegal mit heutigem Urteil LG Düsseldorf" vom 09.03.16 möchten wir Ihnen eine Alternative zu den bisherigen share-Buttons zeigen. Die sogenannte 2-Klick Lösung.
Folgendes ist als Beispiel für die Anzeige unter Ihrem Basket im Artikeldetail zu tun (facebook, google+ und twitter):
- Erstellen Sie eine Grafik, z.B.:
und laden diese in Ihren IMG-Explorer.
Achtung: Die Grafik sollte die Bezeichnung button_soc.png haben, weil dies die Bezeichnung in diesem CSS-Beispiel ist. - Erstellen Sie eine htm Datei mit folgendem Inhalt und laden diese ebenfalls in Ihren IMG-Explorer.
Achtung: Die htm-Dateil sollte die Bezeichnung socialbar.htm, weil dies die Bezeichnung in diesem Code-Beispiel ist.
<style>
#socialsContainer
#sozialbar {list-style: none;text-align: left;margin: 0;padding: 0;}
.sozialbarbox {overflow:hidden;padding:5px 0;display:block;}
</style>
<ul id="sozialbar">
<li class="sozialbarbox">
<!--GooglePlusButton-->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'de'}
</script>
<div class="g-plusone" data-size="medium"></div>
</li>
<li class="sozialbarbox" style="margin-right:35px">
<!--FacebookButton-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li class="sozialbarbox">
<!--TwitterButton-->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="de">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);](document, 'script', 'twitter-wjs');</script>
</li>
</ul> - Legen Sie eine Formatierung in Ihrer CSS-Datei fest, z.B.:
#artikeldetailsocials {overflow: hidden;padding: 10px 5px;margin: 5px 0;clear:both;}
#socialbarbutton {width: 120px;height: 31px;background-image: url(https://cdn.powergap.de/button_soc.png);background-repeat: no-repeat;cursor: pointer;background-position: top left;}
#socialbarbutton .socialinfo {display:none}
#socialbarbutton .socialinfo button{border:0;color:white;background:#5ea9dd;cursor:pointer;padding:6px;margin-top:20px;}
#socialbarbutton .socialinfo:before { content: ' '; position: absolute; width: 20px; height: 20px; display: block; transform: rotate(45deg); margin-left: 1px; margin-top: -21px;border-left: 1px solid silver; border-top: 1px solid silver; background-color: white;}
#socialbarbutton.clicked .socialinfo {position: absolute;margin-left: -4px;margin-top: 33px;z-index: 10;display: block;width: 277px;color: #000;background: #FFF none repeat scroll 0% 0%;border: 1px solid #ddd;padding: 10px;text-align: center;}
#socialbarbutton .socialinfo p {margin:0;padding:0} - Fügen Sie folgenden Code über rotes T > Seitentexte >>> ArtAnz_Weiterempfehlung:
<div id=socialbarbutton>
<div class="socialinfo"><p>Mit einem Klick auf den Social Media Button können Sie die Funktion zum Teilen von Inhalten aktivieren. Erst mit der Aktivierung werden Daten an die Betreiber der sozialen Netzwerke gesendet. Weitere Informationen zum Thema erhalten Sie auf unserer Datenschutzseite.</p><button>Social Media anzeigen</button></div>
</div>
<div id='socialsContainer'>
</div>
<script>
jQuery('#socialbarbutton').click(function(){ jQuery(this).toggleClass('clicked '); })
jQuery('#socialbarbutton button').click(function(){
jQuery.post('img/socialbar.htm',{v:'xx'},function(data){
jQuery('#socialsContainer').html(data);
jQuery('#socialbarbutton').remove();
})
})
</script>
ein. - Fügen Sie zum Schluss folgenden Code über Layout > Artikelanzeige > Template > Pflege >>> (vermutlich bei den meisten) Standard hinter #basket ein. Für diese Position ist das CSS ausgelegt:
Achtung: Entfernen Sie ggf. alten Code der Share-Buttons.
<section id="artikeldetailsocials">#weiterempfehlung</section></div>
Sollten Sie Hilfe bei der Einbindung benötigen, schreiben Sie mir bitte einfach eine E-Mail: skb@powergap.de