Floating Facebook Like Box for Blogger [2]


Καλησπέρα σε όλους τους φίλους του Blogger Tricks !

Σήμερα θα σας παρουσιάσω την δεύτερη έκδοση [2] του Floating Facebook Like Box !

Έχει γίνει ήδη η ανάρτηση του Floating Facebook Like Box [1] την οποία μπορείτε να βρείτε εδώ:

http://www.bloggertricks.gr/2011/11/floating-facebook-like-box-for-blogger.html

Αναφέρομαι στο κανονικό Facebook Like Box αλλά σε πλάγιο μεγάλο κουμπί.

Είναι πιστεύω ένα αρκετά χρήσιμο Gadget που πρέπει να έχει κάθε blog, αφού:

  • Εξοικονομείτε αρκετό χώρο για την sidebar σας που είναι σημαντική για κάθε blog.
  • Κερδίζετε Likes κάνοντας το Facebook Like Box πιο φανερό στους επισκέπτες σας.
Πάμε όμως να δούμε πως θα το εγκαταστήσετε στο blog σας:

1) Σύνδεση στον Blogger
2) Πρότυπο
3) Δημιουργία αντίγραφου ασφαλείας / Λήψη πλήρους προτύπου
4) Επεξεργασία HTML
5) Συνέχεια
6) Πατάμε CTRL + F και εκεί ψάχνουμε τον παρακάτω κώδικα:

</head>

7) Αφού το βρούμε , ακριβώς από πάνω , κάνουμε επικόλληση τον παρακάτω κώδικα:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function(){jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -304}, 500); });jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -304}, 500); });jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -203}, 500); });jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); }); });</script>

8) Ελέγχουμε αν δουλεύει πατώντας προεπισκόπηση και πατάμε αποθήκευση.

9) Στην συνέχεια, πατάμε Διάταξη > Προσθήκη Gadget > HTML/JavaScript

<style>#facebook_link {float:right; padding-right:5px;margin-top:-58px;}#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:300px; height:335px; }#facebook_right {z-index: 10005;border:2px solid #3b5998;background-color: #fff;width:300px;height: 335px;position: fixed;right: -304px;}#facebook_right img {position: absolute;top: -2px;left: -40px;}#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-62px;top:-3px;}</style><div id="on"><div id="facebook_right" style="top: 15%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-MfikPju8cfM/UDaQ9xnOhiI/AAAAAAAAAZw/b7TyuHT1Vqw/s200/fb2-right.png" alt="boton facebook flotante" />
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricksgr&amp;width=300&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowTransparency="true"></iframe>
<div id="facebook_link"><span style="font-size: x-small;"><a href="http://bloggertricks.gr" target="_blank">Blogger</a></span></div></div></div></div>

Τώρα θα πρέπει να αλλάξετε το iframe που είναι με κόκκινα γράμματα με το δικό σας

Για να δημιουργήσετε ένα τέτοιο iframe θα πρέπει να πατήσετε ΕΔΩ

Το iframe σας θα πρέπει να έχει τα εξής χαρακτηριστικά:
  • Το URL της σελίδας σας στο Facebook ( πχ: http://www.facebook.com/bloggertricksgr)
  • Width : 300
  • Height: 335
  • Color Scheme : Light
  • Show Faces :
  • Border Color :
  • Stream : 
  • Header
Και στην συνέχεια πατάμε στο κουμπί  Get Code

10) Κάνουμε αντικατάσταση τα κόκκινα γράμματα με το καινούργιο iframe που πήραμε

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



Number of Comments: 16

σας ευχαριστώ πάρα πολύ με βοηθήσατε αφάνταστα είστε αστέρια!!!!! http://olympiakosnewsdaily.blogspot.gr/

Σας ευχαριστώ κι εγώ με την σειρά μου. Κατατοπιστικότατες οι οδηγίες σας. Συνεχίστε έτσι, συγχαρητήρια.

Καλησπερα,
εγω πηγαινω επεξεργασια html ψαχνω για " head "
αλλα δεν το βρισκει γιατι??

Καλησπέρα γίνεται να το βγάλουμε?

Άκυρο τελικά το βρήκα.

Οκ Κώστα, αν θέλεις κάτι πες μου ;)

Καλημέρα, το κάνω αλλά μου το βγάζει άσπρο, τι φταίει ; Όταν ζητώ από το facebook το Iframe της σελίδας με πηγαίνει να συνδεθώ με το χρονολόγιο και πιθανόν μου δίνει το iframe από το χρονολόγιο..

ola kala paidia alla otan pataw like m vgazei epivevaiwsi kai prepei na xana patisw gia na kanei like

πολύ καλή δουλεία! με έχετε βοηθήσει πόλη το blog moy είναι www.skarlatosvaptisi.gr αν έχετε καμιά ιδέα για να το βελτιώσω πείτε μου,βασικά δεν ξέρω αν έκανα καλό seo

@Sodomakai Gomora αυτό έχει σχέση με το Facebook σου, ίσως κάνεις σε αρκετές σελίδες Like, και πιστεύει ότι πρόκειτε για Robot που κάνει τα Likes, όποτε δεν σε αφήνει με την πρώτη. Το έχω πάθει και εγώ ;)

@Tzepeto είσαι πολύ καλός φίλε συνέχισε την δουλειά ;)

GEIA SU, EFARMWSA OLA OSA EJEIDES ALLA TO PARAUYRO POY VGAINEI STO BLOG MOY EINAI ADEIO.....TI EKANA LATHOS?

Καλημερα θαυμασιο αλλα σε μερικα template δημιουργει προβλημα.. οπως στο Apriezt..
δοκιμασα διαφορες θεσεις ελτος απο την ακρωβως επανω απο το και τελικα ειναι μια χαρα και κατ απο το
* δεν δεχεται στα σχολια τα σωστα ηεαντ και ταιλτ!!
ευχαριστω

Γεια σας. Στο βήμα 8, κάνω προεπισκόπηση αλλά μου βγάζει αυτό:
Bad Request
Error 400.

Τι πρέπει να κάνω;

Πολυ καλο ομως οταν το κανω σταματαει να δουλευει το καρουζελ στo blog μου.
http://tainiesmeelinikousipotitlous.blogspot.gr

Vasilis, αυτο συμβαινει επειδη χρησιμοποιούν το ίδιο Script και δεν μπορουν να δουλευουν ταυτοχρονα