Floating Facebook Like Box for Blogger





Καλησπέρα σας, απο το Blogger Tricks

Σήμερα θα σας παρουσιάσω ένα πολύ όμορφο αλλά και πρακτικό Blogger Widget.
Αναφέρομαι στο Facebook Like Box αλλά σε "πλάγιο κουμπί" όπως στην παραπάνω εικόνα.

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

1) Σύνδεση στον Blogger
2) Σχεδίαση
3) Προσθήκη Gadget
4) HTML/JavaScript

Και στο δεύτερο κουτάκι προσθέστε τον παρακάτω κώδικα:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;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%2Fbloggertricksgr&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=12&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>Widget by:<a href="http://www.bloggertricks.gr">Blogger Tips</a></span></div></div>

Ο παραπάνω κώδικας είναι για την σελίδα του Blogger Tricks:

http://www.facebook.com/bloggertricksgr

Κάνε το ανάλογο για την σελίδα σου..

Αν δεν καταλάβεις κάτι απο τα παραπάνω, γράψε μου στα σχόλια !



Number of Comments: 83

και κάτι ακόμα! Έχει appid! Πρέπει να βάλουμε το appid της δικής μας εφαρμογής! Αλλιώς μπορεί να έχουμε θέματα με τα σχόλια facebook ή με τα Like στις δημοσιεύσεις επειδή δημιουργείται μπέρδεμα! Το είδα όταν πήγα να το κάνω στο bolg μου! Και γι' αυτό το έβγαλα! Αλλά θα το βάλω πάλι μόλις το φτιάξω!

@Skountouflis

Θες σε κάτι βοήθεια?
Λειτουργεί τώρα έτσι δεν είναι?

@ Blogger Tricks

Ναι! Λειτουργεί! Κάπου στο script Που έχεις γράφει: appId=159468740772399..

Αυτό θέλει αλλαγή..
Αν δεν το αλλάξεις τότε δεν λειτουργούσαν τα like και τα σχόλια κάτω από τις δημοσιεύσεις!

@ Skountouflis

Πρέπει να το αλλάξω ή όχι xD
αυτό ρωτάω :D αν πρέπει πες μου τι να βάλω :)

Δοκιμάζω πολύ ώρα! Διέγραψε μόνο τον αριθμό από την appid: 159468740772399

Αυτό που έλεγα είναι ότι έχω ενεργοποιημένα και τα comments του facebook! Και επειδή υπήρχαν δύο appid δεν δούλευαν!

ΓΕΙΑ ΣΑΣ ΠΑΙΔΙΑ. ΤΟ FACEBOOK ΜΟΥ ΕΙΝΑΙ http://www.facebook.com/petrovon?ref=tn_tnmn ΑΛΛΑ ΔΕΝ ΚΑΤΑΛΑΒΑ ΠΩΣ ΠΡΕΠΕΙ ΝΑ ΤΟ ΧΩΡΙΣΩ ΚΑΙ ΜΟΥ ΒΓΑΖΕΙ ΤΗΝ ΚΑΡΤΕΛΑ ΤΟΥ FB ΣΤΟ BLOG ΜΟΥ ΑΛΛΑ ΜΕΣΑ ΜΟΥ ΛΕΕΙ Could not retrieve id for the specified page. Please verify correct href was passed in. ΔΕΝ ΞΕΡΩ ΤΙ ΦΤΑΙΕΙ. :(

Το Gadget αυτό είναι μόνο για σελίδες όχι για profiles

@ Angeloukos Green

Τίποτα ρε φίλε ;)

Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

Αν θέλω να εμφανίζεται από την αριστερή μεριά τί πρέπει να αλλάξω στον κώδικα;

@mareseis το βρηκες ολα οκ?

ολα οκ παιδια ευχαριστω !!!! :D

ΘΕΟΣ !!!!! ΣΕ ΕΥΧΑΡΙΣΤΩ !!!!!!!!!!!!

Υπάρχει αυτό το widget για το Twitter;

Τώρα προσπαθώ να το φτιάξω, δουλεύει απλά καθυστερεί λίγο xD

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

Ξαναπροσπάθησε ;) η ανάρτηση είναι 100% σωστή. Δεν μπορώ να σε help διοτι ειναι απλα σωστη και checkαρησμενη :P

Συγχαρητήρια, είναι τέλειο!
pardalokatsiki.com

kalimera... den mporv na to kanv me tipota... an mporeis na me boi8iseis... i selida moy einai http://www.facebook.com/pages/Angel-face/153063781472034?sk=wall
Eyxaristw...

Ευχαριστώ. Είναι όμορφο.

@Angel Mel
Είναι πολύ εύκολο Angel Mel :)
Για την σελίδα σου θα βάλεις..

Αντί για ANT1 το Angel-face
Αντί για 56484855901 θα βάλεις το 153063781472034

Καλησπερα παιδια το δοκιμασα και εγω ειναι και πολυ καλο αλλα δεν επιπλεει ειναι μονιμα πανω στην σελιδα..δεν υπαρχει κατι σαν και αυτο που εχεισ για twiter thanks..

kalispera... tha kano mia ilithia erotisi... oso kai an exo dokimasi... sto facebook meta to onoma den mou vgazei to noumero... eno se alla profile to vlepo... ti kano lathos???

EISAI O KALYTEROSA SE EYXARISTW FILE MOY

kai ego to ekana ala otan pas ton ani3eis pou einai sta plagia einai aspro den dixnei tipota ... ti na kano ?

Μάλλον θα έκανες κάτι λάθος γιατί δουλεύει σε όλους όσους το έχουν δοκιμάσει. Παρόλα αυτά θα το ξαναδοκιμάσω για σιγουριά να δω αν λειτουργεί ακόμα γιατί πολλές φορές αλλάζουν κάτι μικρό και παύει να δουλεύει όλο το gadget.

πολυ ωραιο αυτο!!
υπαρχει τροπος να προσθέσουμε το chatroll σε pop up box όπως το facebook; ειναι πολυ χρησιμο και δεν το γνωριζω

ΠΑΙΔΙΑ ΝΑ ΣΑΣ ΡΩΤΗΣΩ ΚΑΤΙ. ΠΩΣ ΜΠΟΡΩ ΝΑ ΤΟ ΚΑΝΩ ΝΑ ΕΜΦΑΝΙΖΕΤΕ ΜΠΡΟΣΤΑ ΜΟΛΙΣ ΜΠΑΙΝΟΥΝ. ΟΧΙ ΠΛΑΓΙΑ ΟΠΩΣ ΑΥΤΟ. ΟΥΤΕ ΣΤΟ ΜΠΛΟΚ... ΝΑ ΕΜΦΑΝΙΖΕΤΑΙ ΜΠΡΟΣΤΑ ΑΠΟ ΟΛΑ ΟΠΩΣ ΤΟ ΕΧΟΥΝ ΜΕΡΙΚΑ ΜΠΛΟΚ.??

Δωσε μου το ονομα ενος μπλογκ να το δω, να καταλαβω τι εννοεις και θα το αναρτησω σε 3 μερες

re paidia emena h selida moy einai http://www.facebook.com/AlexandrosKaratzasMusic ti na kanw??

Να σαι καλα!Λειτουργει!Τσεκαρετε το στο tismaimous.blogspot.com

Μια συμβουλη επειδη κι εγω μπερδευτηκα στην αρχη...εκανα copy το link της σελιδας μου το εκανα paste σε ενα εγγραφο word..και εκανα paste και τον κωδικο οπως δινεται στο αρθρο και αντεγραψα ακριβως αυτα που ειναι με κιτρινο πολυ πιο ευκολα απο οταν το εκανα στον blogger κατευθειαν.

Και παλι ευχαριστω!

PEKTARA MOU !!!! SE EUXARISTW !

Καλημερα.
ΝΑ ρωτησω..
μπαινω στην σελιδα και μου ωγαζει μονο αυτο
http://www.facebook.com/LoveKuzina

χωρις ΑΝΤ1 και αριθμους..τι λαθος κανω?ευχαριστω προκαταβολικα

Παιδιά είναι για μερικούς τύπους σελίδας του Facebook. Δεν ξέρω καλά απο Facebook για να πω κατι παραπάνω, πάντως η μορφή της σελίδας σας πρεπει να είναι σαν το παράδειγμα με το ANT1. Αν βρω κάτι άλλο θα το αναρτήσω αμέσως.

pou leei re gloger


3) Προσθήκη Gadget
4) HTML/JavaScript


giati 8a trela8w!!

Ευχαριστω για τον κωδικα και γενικοτερα για τις ωραιες συμβουλες που δινεις στη σελιδα σου.

Αυτο που θα ηθελα να σε ρωτησω σχετικα με το συγκεκριμενο θεμα ειναι το εξης: Οταν βαζω τον κωδικα βγαινει κανονικα, ειναι πολυ ομορφο, ολα καλα. Δημιουργει ομως προβλημα στο Submenu που εχω, δεν το αφηνει να κανει dropdown, να αναπτυχθει.

Μηπως ξερεις τι μπορει να φταιει και να συμβαινει αυτο?

Ευχαριστω εκ των προτερων
Ανδρεας

Καλησπέρα και συγχαρητήρια για την προσπάθεια!
Εγώ έχω ένα γρουπάκι στο facebook, από αυτά που βγαίνουν στην αρχική σελίδα στο πλάι. Έκανα ένα πείραμα ... και έγραψα : http%3A%2F%2Fwww.facebook.com%2Fgroups%2Ftokouzinakitispareas%2F5 αλλά δυστυχώς δεν δουλεύει ... υπάρχει κάποια εναλλακτική λύση;

Ευχαριστώ εκ των προτέρων.
Κάτια

Καλησπέρα και πάλι, δημιούργησα μια σελίδα εν τέλει με την οποία όμως και πάλι έχω πρόβλημα.. το link είναι αυτό https://www.facebook.com/ToKouzinakiTisPareasMas πως θα πρέπει να το μετατρέψω;

Ευχαριστώ,
Κάτια.

@ToKouzinakiTisPareas
Δεν γινεται με αυτον τον τυπο σελιδας, πρεπει να εχεις το αλλο με τους αριθμους :(

@ΤΕΡΙΑΧΑΤΙ ΒΟΡΕΙΟΥ ΗΠΕΙΡΟΥ Ευχαριστώ πολύ ρε φίλε ;)

Για σου φιλε φοβερο το site σου και μπραβο! Φιλε εχω ενα τεράστιο πρόβλημα, εχω εφαρμόσει στο blog μου ενα template που πολλά απο τις tips σου (καλως , κακως) τα εχει εφαρμοσμένα .. Το template αυτο περιείχε και ενα photo Gallery ενσωματομενο και όταν εφασρμοσα το facebook,twitter float και δουλευαν κανονικά το photo gallery έπαψε να γυρνάει και έχασε την κάπως μοντέρνα εμφάνιση του και τελος ειχε μετατραπει σε απλή εικόνα .. Δεν ξέρω εαν μπορείς να καταλάβεις το πρόβλημα ή εαν μπορείς να κανεις κατι αλλα δεν εχω κανενα προβλημα να σου δωσω username και password να δεις κι εσυ ..
Ευχαριστω εκ των προτερων

Αν για παράδειγμα η σελίδα σου είναι αυτή:
http://www.facebook.com/pages/ΑΝΤ1/56484855901

Θα την μετατρέψεις σε:
http%3A%2F%2Fwww.facebook.com%2Fpages%2FΑΝΤ1%2F56484855901
ΛΟΙΠΟΝ ΔΕ ΜΠΟΡΩ ΝΑ ΒΡΩ ΤΗ ΣΕΛΙΔΑ ΜΟΥ ΟΠΩς ΛΕΣ ΕΣΥ PAGES/ANTI1
ΤΗ ΒΡΗΣΚΩ ΕΤΣΙ

http://www.facebook.com/profile.php?id=100003736923361
ΠΩΣ ΝΑ ΕΑΦΑΡΜΟΣΩ ΤΟ ΚΩΔΙΚΟ??

Παιδια κανετε την ιδια ερωτηση συνεχεια. Να βλεπετε και τα σχολια των αλλων οταν προκειται για προβλημα διοτι μπορει να το εχω απαντησει.
Λοιπον, αν η σελιδα σας δεν εχει την μορφη αυτη που δινω παραπανω, δεν γινεται να το εφαρμοσετε με αυτο τον τροπο. Αν βρω στο Web καποιον αλλο τροπο για να μπουν και τα profiles ή τα groups (που δεν εχουν αυτη την μορφη), θα το αναρτησω αμεσως. Για την ωρα ΜΟΝΟ οι σελιδες που μοιαζουν με αυτο ( http://www.facebook.com/pages/ΑΝΤ1/56484855901 ) γινεται να μπουν.

Οποιος εχει αφησει σχολιο (με εξαιρεση τα ανωνυμα) θα ενημερωθει για τυχον καινουργιους τροπους μεσω του e-mail του αυτοματα.

Σας ευχαριστω, Blogger Tricks

εγώ το βάζω κανονικά αλλά μου εμφανίζει εκτός απ το widget και ένα άσπρο κουτί...τι γίνεται μ αυτό?

ευχαριστώ, πολύ χρήσιμο!

na rwtisw kati otan vazw ton kodiko se efarmogi ton idio alla meta otan mbenw na kanw like stin selida den to kani like k olo lei log in with facebook aplos den kani like ti ginete?

Exw ena mikro provlimataki -.- pws mporo na kanw etci tin URL tis selidas mou i opoia parepiptontos einai h e3is :
https://www.facebook.com/pages/Metin2-Private-servers-GR/229299197111922 mipos kapoios apo esas mpori na me voithisi? tha t eimoun evgomon!

To provlima lithike me ton e3is logo :PP otan topothetisa to gadget ekana akrivos oti eipate me to URL tis selidas m to ekana etci:
http%3A%F%2Fwww.facebook.com%2Fpages%2FMetin2-Private-servers-GR%2F229299197111922

kai to evala k m evgaze ena minima error etci alla3a kapoia pragmatakia sto url k pali m evgaze error opote eipa as valw to kanoniko URL kai doulepse me to parakato url : https://www.facebook.com/pages/Metin2-Private-servers-GR/229299197111922 dn 3r gia pio logo to testara kiolas kai ta likes ta eperna normal :)ty gia to gadget pl xrisimo k poli wraio!!

paidia kalispera na kanw mono mia paratirisi...!! epeidi isws na sas kolisei kapoia allh leitourgia h opoia xrisimopoei jquery opws mou ekane k emena... aplws sbiste tis 2 prwtes grammes pou anoigei to jqeuery k ola 8a leitourgoun swsta. emena as poume mou kolage ena slide show kolage stin prwti eikona... molis aferesa to jquery apo edw ola leitourgousan kanonika k pali..!!
ty gia to gadget!!!

Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

Καλησπέρα,

Η σελίδα μου είναι tilephonika-kentra.com έβαλα το Floating Facebook Like αλλά δεν είμαι σίγουρος ότι όταν πατάω πάνω σε αυτό θα πρέπει να κάνω login πρώτα για να δώ τα like της σελίδας

Σας ευχαριστώ για την βοήθεια που μας παρέχεται!

http://www.facebook.com/pages/Greek-Lovers/161534697312104?ref=hl

πως θα το αλλαξω και που πρεπει να το βαλω μεσα στν κωδικα...
παρακαλω απαντησε μου στο petros97pap@gmail.com εκει θα το δω το μηνυμα σου

@stivk

επειδή έχω το ίδιο πρόβλημα ποιες σειρές να σβήσω μπορείς να μου το εξηγήσεις.

κάποιος μπορεί να με βοηθήσει? έχει κολήσει το κουμπή και φαίνεται σαν μια απλή εικόνα. μια βοήθεια σας παρακαλώ.

file mou polu wreo to sait sou ..!!!
Thelw monaxa mia boh8eia ... pou akribos στο κίτρινο πεδίο του κώδικα πρεπει να βάλω την σελίδα μου

kalispera kano ola ta apaetita vimata alla ithela na mou peis http vazo tis omadas pou exo sto facebook h tou blog mou ekei kano to lathos kai de mporo na do to facebokk sto blog an to afiso os exei vgainei kanonika tou ant1 pou exeis os paradeigma .an mporeis steile mou mail andreasrigas@hotmail.gr eyxaristo

Καλησπέρα. Στο δικό μου blog δεν λειτουργεί. Δεν κάνει καν hover. Δείχνει απλά μια πλαγιαστή καρτέλα που λέει facebook και δεν κάνει τίποτα. Την έχω βγάλει τώρα. Ξέρεις τι μπορεί να φταίει; Έχω και jquery στο head μου. Μπορείς να με βοηθήσεις; Το blog μου είναι το: www.to-parakseno.blogspot.com
Ευχαριστώ

φιλε το βαζω οπως λες και μου εμφανιζει μονο ενα κουτακι που λεει facebook μολις παω αππανω του απλα δεν ανοιγει το λινκ πρεπει να ειναι απο ομαδα στο facebook η απο σελιδα ?

ΚΑΙ ΓΩ ΤΟ ΙΔΙΟ ΠΡΟΒΛΗΜΑ ΕΧΩ ΜΟΥ ΕΜΦΑΝΙΖΕΙ ΩΣ ΕΙΚΟΝΑ ΤΟ FB ΠΟΥ ΑΚΡΙΒΩΣ ΒΑΖΟΥΜΕ ΤΟ ΚΩΔΙΚΟ?? ΚΑΙ ΠΟΙΟ ΝΟΥΜΕΡΟ ΔΙΑΓΡΑΦΟΥΜΕ??

HELP!!!!!!!!

ΕΥΧΑΡΙΣΤΩ ΕΚ ΤΩΝ ΠΡΟΤΕΡΩΝ

καλησπερα, πως πορω να βαλω το floating-twitter που εχεις εσυ στο μπλογκερ μου??
εχω βαλει το αλλο μου ειπες αλλα μου το εμφανιζει σε κικκινο..
και δεν με εξυπηρετει

αντικαθιστώ το www.facebook.com%2Fpages%2FΑΝΤ1%2F56484855901
με την διεύθυνση της σελίδας μου στο fb και μένει κενό το πλαίσιο. Ενώ όταν βάζω του ant1 φαίνεται κανονικά
kathy by anthomeli

Καλησπέρα παιδιά,
έχω βάλει Floating Facebook Like Box for Blogger και θελω να το βγαλω αλλα τα εχω χασει πηγαινω στη διαταξη αλλα δεν το βρισκω πουθενα για να το διαγραψω τι μπορω να κανω;;;

ΠΑΙΔΙΑ ΤΟ ΕΒΑΛΑ,ΤΟ ΔΕΙΧΝΕΙ ΣΤΑ ΠΛΑΓΙΑ ΑΛΛΑ ΔΕΝ ΑΝΟΙΓΕΙ,ΤΙ ΠΡΕΠΕΙ ΝΑ ΚΑΝΩ?

ειναι πολυ καλο.Μια ερωτηση.Εχω αλλαξει το χρωμα στο μπαγκραουντ.Μπορω ν'αλλαξω και το χρωμα στο αυτακι?

geia sas ..an kai i selida mou einai tou swstou typou symfwna me auta pou exete pei kai an kai akolou8w kata gramma tin entoles to mono pou me vgazei einai mia eikona tou faceboo san th dikh sas mono pou den borw na patisw panw tis gia na anoi3ei... BOREITE NA ME BOH8HSETE ??? euxaristw

Spiros Stavrou, πρέπει να δεις αν εχεις την σωστή έκδοση γιατί η ανάρτηση ενημερώθηκε. Για ξαναδοκίμασε και συγνώμη αλλά όλο το αλλάζουν και πρεπει να εκσυγχρονιστώ εκ νέου.

ΟΙ ΔΡΟΜΟΙ ΤΗΣ ΜΟΥΣΙΚΗΣ, αν ενοοείς αυτό "που ακουμπάς" για να ανοιξει το κουτί που κάνουμε Like, ναι μπορεις να το αλλαξεις βάζοντας όποια φωτογραφία θέλεις. Έχει πολλές αν ψάξεις στο Google Εικόνες. Αλλά θα σου συνηστούσα να κρατήσεις την μπλε :)

Nick, ξαναδοκίμασε γιατί ενημέρωσα την ανάρτηση. Ευχαριστώ για την αναφορά του σφάλματος, αν χρειάζεσαι κάποια βοήθεια με χαρά να σε βοηθήσω.

Καλημέρα! Κάτι κάνω λάθος γιατί όσο κι αν προσπαθώ δεν τα έχω καταφέρει. Αυτή είναι η σελίδα μου, πώς μπορείς να με βοηθήσεις; https://www.facebook.com/pages/%CE%9A%CE%AC%CE%B8%CE%B5-%CE%BC%CE%AD%CF%81%CE%B1-%CE%93%CE%BF%CE%BD%CE%B5%CE%AF%CF%82-Everyday-Parents/681779175172003

ισχύει και για τις δυναμικές προβολές παρακαλώ?

paides kalhspera! exw thema!! pernaw ton kodika ola komple allazw to onoma allazw ton id pataw apothikeusei bgenei kanonika sta deksia tis selida ola komple dld. to mono pou me enoxlei einai oti osoi exoun kanei like tous emfanizei 2 fores! ti paizei plz helparete me!! euxaristw!

Πολύ ωραίο! Ευχαριστώ πολύ.
Έχουμε κάτι τέτοιο κ' για το google+ ??

Το έκανα και πέτυχε!!! Σε ευχαριστώ πολύ!!!!!

Είστε πραγματικά απίστευτοι!!! Με έχετε βοηθήσει πάρα πολλές φορές και πλέον για ότι χρειάζομαι να βάλω στο blog μου εμπιστεύομαι την σελίδα σας!!!

τέλειο δούλεψε με την πρώτη!!!

Καλο αλλα εκτος του οτι δειχνει ενα ασπρο κενο..σταματαει και το κινουμενο καρουζελ στην σελιδα μου http://tainiesmeelinikousipotitlous.blogspot.gr

@Vasilis αν σταματάει κάτι άλλο στην σελίδα σου σημαίνει πως 2 Gadgets χρησιμοποιούν το ίδιο Script.

Thanks for sharing!!! Πολύ καλό και εύκολο και μου εξοικονομεί και χώρο στο side bar!

Δεν μπορω να το καταφερω.
η σελιδα μου ειναι
https://www.facebook.com/The-Happy-Kidz-1780818758857731/