Ich kenne mindestens eine Person die sich tierisch über diesen Tipp freuen wird.Hallo Manu, schön Dich hier zu sehen;)
Heute geht es in meinem Tipp darum, wie man eine Social Media Sidebar einbaut.
Ich selbst habe mir die Sidebar hier geholt.Anpassen kann man die hier allerdings nicht großartig, jedoch konnte ich sie für meine Bedürfnisse individualisieren. Hier war wieder ein wenig Bastelarbeit im Html Code nötig.
Da ich davon ausgehe, dass mehr Buttons auch nicht von euch benötigt werden, gebe ich euch dann, wenn es so weit ist einfach meinen Code weiter. Der beinhaltet die wichtigsten Social Media Kanäle und reicht vollkommen aus.
Nun aber zu den einzelnen Schritten.
1. Dashboard/Design/HTML Bearbeiten2. Nun wie im Bild vorgehen und die Codes einfügen.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.z4zen.com/zBar/js/zBar.js" target="_blank"></script>
3. Auf die gleiche Weise kopiert ihr jetzt den folgenden Code und fügt diesen ebenfalls ziemlich weit oben unterhalb des beginnenden <head> Tags ein
<link href="http://www.z4zen.com/zBar/css/z4sidebar.css" rel="stylesheet" type="text/css" />
4. Nun geht es zu den "Seitenelementen". Gleich links der Button neben "HTML Bearbeiten".
5. Auf Gadget hinzufügen und das folgende HTML/Javascript Gadget auswählen.
6. Hier fügt ihr nun den folgenden Code ein.
<!-- ------------------------------------ z4sidebar ------------------------------------ -->
<div id="z4sidebar-show" style="display:none;">
<div id="z4sidebar-show-button"></div>
</div>
<div id="z4sidebar">
<!-- php like button code for dynamic page change goes between here -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?app_id=141440452603597&href=http://www.facebook.com/pages/Tatjanas-Test-Blog/188701754499759&send=false&layout=box_count&show_faces=false&action=like&colorscheme=light&locale=en_US" style="float:left;margin:0 0 0 3px;height:63px;"></iframe>
<!-- php like button code for dynamic page change goes between here -->
<div style="float:left;margin:10px 0 0 3px;">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div style="float:left;margin:10px 0 0 0;">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div style="float:left;margin:10px 0 0 3px;">
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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>
</div>
<div style="float:left;margin:8px 0 0 3px;">
<div id="z4sidebar-hide"></div>
<a href="http://www.z4zen.com/zbar-social-sidebar-social-bottombar" title="z4sidebar social sidebar" target="_blank"><img src="http://www.z4zen.com/zBar/images/z4sidebar.png" alt="z4sidebar social sidebar" /></a>
</div>
<script type="text/javascript">check_z4sidebar_display();</script>
</div><!-- /#z4sidebar -->
<!-- ------------------------------------ /z4sidebar ------------------------------------ -->
7. Den in roter Schrift gehaltenen Teil, ersetzt ihr einfach mit eurer http://Adresse eurer Facebook-Seite.
Habt ihr keine Facebook-Fanseite, nehmt ihr einfach den grün und rot gefärbten Text heraus.
8.Vorlage speichern und schon habt ihr eine Sidebar.
Sichert Euch bevor ihr mit der Arbeit beginnt, vorsorglich eure bisher bestehende Vorlage indem man diese im Bereich "HTML Bearbeiten" - "Vollständige Vorlage herunterladen" auf den Pc speichert.
Lasst es mich wissen, wenn ihr die Sidbar eingebaut habt, ich würde mich freuen, wenn der Tipp mal wieder ein wenig euer Design verschönert hat.
