Καρτέλα στο πλάι της σελίδας με facebook likebox

Καρτέλα στο πλάι της σελίδας με facebook likebox

Αναρτήθηκε από Chris Tetsi στις 10/16/2012 0 σχόλια

Αυτό το widget δεν λειτουργεί με τη προσωπική σας σελίδα-προφίλ στο facebook αλλά μόνον για μια σελίδα του facebook που αφορά blog ή site. Οπότε εάν δεν έχετε σελίδα στο facebook για το blog σας, φτιάξτε μία εδώ.




Για να το εφαρμόσετε στο blog σας κάντε τα παρακάτω:

Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML]

Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλάμε τον παρακάτω κώδικα.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Πατήστε αποθήκευση προτύπου.

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript]. Το widget είναι σημαντικό να το βάλετε κάτω από όλα τα άλλα γιατί αλλιώς υπάρχει η πιθανότητα να μην δουλεύει.

Χωρίς να δώσετε τίτλο, αντιγράψτε έναν από τους παρακάτω κώδικες και την μόνη αλλαγή που πρέπει να κάνετε είναι τα κόκκινα γράμματα. Θα πρέπει να αλλάξετε το MyFacebookPage με το όνομα της σελίδας σας στο facebook.

Αποθήκευση και τέλος.

• 1η Περίπτωση

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script> <style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdOWyJY4LJxT-1H1DMzRRTTdwtmI1muYZQuhvMpbJJ9MRt8lZ8fezB5ww-HyzuZUTkacZIVmuRX8iN53bQqVesZCJ5sixzR5zyyQxUscByXtlSwxnWnaUHdRaqcsnpjIyAtLdtmUtAQI/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style>
<div class="floatinglikebox">
<div>
<iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=MyFacebookPage&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" frameborder="0" scrolling="no" style="background: #fff; border: none; height: 270px; overflow: hidden; width: 251px;"></iframe><span><a href="http://tetsitech.blogspot.com">by TetsiTech</a></span></div>
</div>

Προσοχή: Στο MyFacebookPage βάλτε ολόκληρη τη διεύθυνση. Για παράδειγμα η δικιά μου διεύθυνση είναι https://www.facebook.com/TetsiWorld.

Δείτε demo

• 2η Περίπτωση

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_r4SyyRDh0eTx0R69qo-U0T-VG_vAy3Ukb0-e-IgbuMicI1cBA_i4OEnm_eZI9QEHJZS_v75ToIS1PE9XsMtdnCYPl9ZBp50zP1r5OR6hbvaqfu0pZKgtJwqyaKqUpqs6BqC53s0xMY/s1600/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
    <div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMyFacebookPage&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://tetsitech.blogspot.com">by TetsiTech</a></span>
    </div>
</div>

Προσοχή: Στο MyFacebookPage δεν βάζουμε ολόκληρη τη διεύθυνση αλλά μόνο το Username της Σελίδας. Για παράδειγμα η δικιά μου διεύθυνση είναι https://www.facebook.com/TetsiWorld άρα θα βάλω μόνο το TetsiWorld.

Δείτε demo