Tutorial ShareThis Buttons in NOF einbauen
im Oktober 2013
Um die Buttons von ShareThis einzubauen, benötigt Ihr ein Konto bei “ShareThis”. Bitte lest auch die Bedingungen von ShareThis.
- Klickt auf “Get Sharing”
- Wählt “Website” (zum Einbau in Eure NOF-Seite)
- Klickt auf den “Next” Button zur Auswahl einer Button Leiste. Das sieht zur Erstellung dieses Tutorials gerade so aus:
- Klickt wieder unten auf “Next” und wählt die Buttons, die angezeigt werden sollen
- Klickt auf “Get The Code” - an dieser Stelle müsst Ihr ein Konto bei “ShareThis” erstellen. Es wird eine eMail und ein Passwort verlangt.
Bitte ersetzt jeweils den hier rot markierten Publisher-Key “00000000-0000-0000-0000-000000000000” mit Eurem Key aus dem von “ShareThis” generierten Code. Kopiert Euch also die von “ShareThis” generierten Codes (nicht meine Beispiel-Codes) und fügt diese folgendermaßen ein:
Beispiel Button Bar
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
> “Ende des Haupttextes” (also vor dem schließenden </BODY> Tag) - die gewählten Buttons. Für Leiste links “left” oder Leiste rechts “right” eintragen.
<script type="text/javascript">stLight.options({publisher: "00000000-0000-0000-0000-000000000000", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "00000000-0000-0000-0000-000000000000", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "googleplus", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
Beispiel Egg Gadget
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css">
<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "00000000-0000-0000-0000-000000000000", doNotHash: false, doNotCopy: false, hashAddressBar: false, onhover:false});</script>
> “Ende des Haupttextes” (also vor dem schließenden </BODY> Tag) - ersetzt unten den Titel der Seite und die URL mit Eurer URL zu Eurer Seite
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','googleplus','google','google_translate','wordpress','sharethis','email'], {title:'Titel der Seite',url:'http://www.sharethis.com',theme:'shareegg'});</script>
und diesen DIV-Container in den HTML-Code Editor eines Textfeldes zur Anzeige des Gadgets
<div id='shareThisShareEgg' class='shareEgg'></div>
Beispiel Button Leiste
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
und diesen <SPAN> Klassen in den HTML-Code Editor eines Textfeldes zur Anzeige der gewählten Buttons
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_email_large' displayText='Email'></span>
Beispiel Slider oben beim Scrollen
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”
> zuzüglich der CSS für diesen Slider - hier blau markiert - die Ihr natürlich nach Euren Wünschen anpassen könnt
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
<style type="text/css">
.stpulldown-gradient
{
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;
}
</style>
Bitte ersetzt die oben blau und fett markierte URL mit Euren Logo, welches eine Größe von 40 px Höhe und 300 px Breite haben muss.
> “Ende des Haupttextes” (also vor dem schließenden </BODY> Tag) - die gewählten Buttons - hier erscheint Slider wenn 50 px nach unten gescrollt wird
<script type="text/javascript">stLight.options({publisher: "00000000-0000-0000-0000-000000000000", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script><script>var options={ "publisher": "00000000-0000-0000-0000-000000000000", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["facebook", "googleplus", "email", "sharethis"]}};var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);</script>
