War Thunder

Floating Facebook Like Box για τον Blogger

Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε στη ιστοσελίδα μας facebook like box. Η διαφορά με τη ανάρτηση αυτή είναι ότι θα είναι σε μορφή μετακινούμενου button στα δεξιά της οθόνης μας, αποκαλύπτοντας το like box όπως φαίνεται στη παρακάτω εικόνα.

Πλεονεκτήματα

  1. Eξοικονομείτε πολύτιμο χώρο στο sidebar σας
  2. Tο likebox βρίσκεται πάντα στο οπτικό πεδίο του αναγνώστη έτσι μπορείτε να αυξήσετε τα likes του facebook fan page σας.

Σημ: Για wordpress ακολουθήστε το σύνδεσμο αυτό.

Βήμα 1: Συνδεθείτε στον λογαριασμό σας στο blogger.

Βήμα 2: Πηγαίνετε Σχεδίαση και επιλέξτε να προσθέσετε ένα νέο gadget στο sidebar σας. Το gadget που θα προσθέσουμε είναι τύπου HTML/JavaScript.

Βήμα 3: Αντιγράψτε τον παρακάτω κώδικα στο gadget που δημιουργήσατε:

<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() {$(".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("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/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" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGreek-PC-Blog%2F254728711248684&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe><span><a href="http://greekpcblog.com/?page_id=754" target="_blank">Blogging Tutorials</a></span>
</div></div>

Βήμα 4: Ο κώδικας αυτός μόλις σας πρόσθεσε ένα floating like box με το like box του Greek PC Blog. Για να προσθέσετε το δικό σας, ανοίξτε σε ένα νέο tab το facebook fan page σας:

H διεύθυνση του fan page σας φαίνεται στο address bar του browser σας και είναι της μορφής:
http://www.facebook.com/pages/όνομα_του_fan_page_σας/ID_του_fan_page
Στη γραμμή 17 του κώδικα αντικαταστήστε το Greek-PC-Blog με το όνομα_του_fan_page_σας και το id του Greek PC Blog με το ID_του_fan_page_σας.

To URL του κώδικας σας τώρα στη γραμμή 17 θα πρέπει να είναι της μορφής:
href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fόνομα_fan_page_σας%2Fid_fan_page

Αυτό ήταν! πολύ εύκολα και απλά προσθέσαμε ένα floating facebook like box για τη ιστοσελίδα μας στο blogger.

Σημ: Για όσους ξέρουν τι κάνουν. Αν έχετε ήδη στο header της ιστοσελίδας σας κάποια έκδοση του jquery μπορείτε να μην αντιγράψετε τις πρώτες 2 γραμμές έτσι ώστε να μην φορτώνετε δυο φορές το jquery.

loading...

Share This Post

Related Articles

38 Responses to “Floating Facebook Like Box για τον Blogger”

  1. Giannis says:

    Σ’ ευχαριστώ πολύ. Έψαχνα πολλές μέρες να βρω πως γίνεται και κόντεψα να σπάω το κεφάλι μου. Να είσαι καλά. Μια ερώτηση μόνο. Όταν κάποιος like οι δημοσιεύσεις από το blog μου θα εμφανίζονται στον τοίχο του;

  2. Giannis says:

    Κάνω αυτήν την ερώτηση γιατί μπαίνω στον τοίχο από κάποιους που έχουν κάνει like αλλά δεν βλέπω τις δημοσιεύσεις από το blog μου. Ευχαριστώ για τον χρόνο σου.

  3. demiscy says:

    Ευχαριστώ Γιάννη!
    Μόνο ότι κάνεις share στο wall του fan page σου θα εμφανίζονται στο wall των αναγνωστών σου.
    Για το πως μπορείς να βάζεις να δημοσιεύονται αυτόματα οι δημοσιεύσεις σου στο fan page σου, ετοιμάζω άρθρο που θα είναι έτοιμο μέχρι το σαββατοκυρίακο!

  4. Αν εννοείς αν δημοσιεύονται οι αναρτήσεις στην fan page αυτό γίνεται μέσω του rss grafitti. Δημοσιεύονται άμεσα. Μήπως δεν πάνε στον τοίχο τους αλλά στις ενημερώσεις τους γι αυτό δεν το βλέπω;

    Όπως και να έχει θα περιμένω το άρθρο σου.
    Ευχαριστώ

  5. MeymiGrøu says:

    Ξέρεις μήπως που μπορώ να βρω το ίδιο widget αλλά για το Twitter?
    Ευχαριστώ!

    • demiscy says:

      MeymiGrou Θα ετοιμάσω άρθρο για twitter floating box (το widget το έφτιαξα!) και θα το αναρτήσω μέχρι το τέλος της εβδομάδας!

  6. saksis says:

    kati den kano sosta. an den einai ths morfhs alla einai pos ginete ??
    kano ola ta vimata mou grafeis vgenei h efarmogei alla mou grafei to ekseis :

    Could not retrieve id for the specified page. Please verify correct href was passed in.

    ti prepei na kano gia na mou doulepsei??

  7. navou says:

    re paidia oti kai na kanw den mporw na vrw to id…

  8. edo pieria blog says:

    paidia ta exo kani ola kai den moy doyleyi me tipota https://www.facebook.com/edopieria

    • admin says:

      Βάλε για http%3A%2F%2Ffacebook.com%2Fedopieria και δεν θα έχεις πρόβλημα! το https είναι που σου τα χαλάει…

  9. giannis says:

    den einai sosto to id moy lei olo

    • admin says:

      gianni βρήκα το πρόβλημα σου. Το url που δίνεις είναι προφίλ. like box βάζουμε μόνο σε fan page. Καλό είναι να κάνεις facebook fan page γιατί από 1/7/12 το fb θα καταργήσει προφίλ που δεν αντιστοιχούν σε αληθινά άτομα. Για το πως να φτιάξεις fan page και να βάλεις like box κοίταξε το λινκ αυτό http://greekpcblog.com/?p=154

  10. giannis says:

    OLA OK EYXARISTO PARA POLI EKANA SELIDA KAI PIRA APO EKI TO ID

  11. [...] Προσθέστε back to top και home button στο blog σας! 17 mins ago by demiscy 0 var addthis_product = 'wpp-264'; var addthis_config = {"data_track_clickback":false,"data_track_addressbar":false};if (typeof(addthis_share) == "undefined"){ addthis_share = [];}Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε στο blogger μπλογκ μας δυο πολύ χρήσιμα buttons. Τα δυο buttons που θα προσθέσουμε είναι το back to top (πίσω στη κορυφή), όπου αν ο αναγνώστης πατήσει σε αυτό, ενώ έχει φτάσει στο τέλος του άρθρου που διαβάζει, τότε τον επαναφέρει στη αρχή του και το άλλο button παίρνει τον αναγνώστη στη αρχική σελίδα. Τα κουμπάκια αυτά, θα “συνοδεύουν” τον χρήστη κατά τη ανάγνωση του, δεξιά ή αριστερά, έτσι ώστε να είναι πάντα ορατά σε αυτόν. Κάτι αντίστοιχο με το facebook floating like box. [...]

  12. Kostas says:

    Εμφανίζει το κουτί αλλά γράφει could not retrive id for the specified page.
    Μπορεί να βοηθήσει κάποιος;
    Το ιστολόγιο είναι αυτό http://chorisonoma.blogspot.com/
    και η σελίδα στο fb αυτή

  13. [...] Αν θέλετε ένα floating facebook like box που θα ακολουθεί το χρήστη όταν κάνει scroll τότε διαβάστε τη ανάρτηση αυτή. [...]

  14. tainies.org says:

    gia na vreite to id mias selida to kalytero pou mporeite na kanete einai

    p.x to id gia auti ti selida https://www.facebook.com/edopieria apla antikatastiste to https://www. me graph. px http://graph.facebook.com/edopieria tha sas vgalei kati paromoio me auto
    {
    “id”: “100003706382990″,
    “name”: “\u0395\u03b4\u03ce \u03a0\u03b9\u03b5\u03c1\u03af\u03b1″,
    “first_name”: “\u0395\u03b4\u03ce”,
    “last_name”: “\u03a0\u03b9\u03b5\u03c1\u03af\u03b1″,
    “link”: “http://www.facebook.com/edopieria”,
    “username”: “edopieria”,
    “gender”: “male”,
    “locale”: “el_GR”
    }

    to id to vlepete e? {{ “id”: “100003706382990″,}}

  15. [...] Σημ: Για blogger ακολουθήστε το σύνδεσμο αυτό. [...]

  16. Christie says:

    Οι οδηγίες σου πολυ καλές, σ’ευχαριστώ πολύ! Και μια και συζητάμε για like buttons, μόλις πάτησα και το δικό σου :)

  17. smokeland says:

    kalispera mporo nato balo kai se selida eshop ??

    an nai pos mpenei ston kodiko auto sto fb profil mou

    • admin says:

      Καλησπέρα φίλε!
      Για αρχή συγχαρητήρια για το eshop σου!
      1. Πρέπει να έχεις facebook fan page και όχι προφιλ για να το χρησιμοποιήσεις αυτό και στο συστήνω για το eshop σου.
      2. Μπορείς να χρησιμοποιήσεις τον κώδικα που έχω εδώ http://greekpcblog.com/?p=730 είναι για wordpress αλλά θα κάνει και για το CMS του papaki.

      Για οποιανδήποτε άλλη απορία μην διστάσεις να επικοινωνήσεις μαζί μας εδώ

  18. smokeland says:

    ok to ftiaksa http://www.smokeland.gr

    eiste protoi sas euxaristo gia thn grigori boi8ia

  19. Η σελίδα μου είναι αυτή. hττps://www.facebook.com/candlespirit08
    Τι γίνεται και δεν μπορώ να το έχω;; Δοκίμασα και το id και το cover id. Γιατί μου δίνει δύο;; Ποιο απ’τα δύο είναι; Το παρακάτω μου έδωσε όταν αντικατέστησα το hττps://www. με το graph. Τι φταίει;; Πού τελειώνει το id του Greek PC Blog;; Μόνο αυτό πρέπει να αντικαταστήσω ή όλο το υπόλοιπο της 17ης σειράς;

    • admin says:

      Βάλε hττp://www.facebook.com/candlespirit08 είναι το hττps που σου τα χαλάει!

      Σημ: Άλλαξε τα ελληνικά τ με t. Βάζουμε ελληνικά για να μην είναι ενεργά τα λινκς στα σχόλια.

      Για οποιανδήποτε άλλη απορία μην διστάσεις να επικοινωνήσεις μαζί μας εδώ

  20. Vagelis says:

    Καλησπέρα. Εγώ θέλω να τοποθετήσω το facebook like και το twitter like στο blog μου ακριβώς όπως είναι στο δικό σας μιας και θα ταιριάζει γάντι. Επειδή δεν ξέρω πως γίνεται, μπορείτε να με βοηθήσετε;

  21. jacob says:

    Καλημερα και καλη χρονια και συγχαρητηρια για το μπλογκ

    Προσπαθω να βαλω αυτο το plug in στο μπλογκ http://donotbuyjustcry.blogspot.gr/
    και να το συνδεσω με το αντιστοιχο facebook do not buy just cry
    αλλα μου βγαζει Please verify correct href was passed in
    Ta baΤα βαζω ολα σωστα
    τι μπορει να πηγαινει στραβα?

    ευχαρθστω ιακωβος

    • admin says:

      Jacob πες μας το url του fb fan page σου. Αν προσπαθείς να το βάλεις για προφιλ δεν δουλεύει. Αν θες περισσότερη βοήθεια στείλε μας email στο info@greekpcblog.com ευχαρίστως να βοηθήσουμε!

  22. andreas says:

    Καλησπερα…προσπαθω να βαλω το facebook button αλλα δεν…η σελιδα μου ειναι https://www.facebook.com/udraulikos…οτι κι αν εκανα δεν μπαινει(εκανα ολες τις παραπανω δοκιμες και με https και με http) help me…

    • admin says:

      Ανδρέα δοκιμάζω σε ένα τεστ μπλογκ και μπαίνει χωρίς το https. Θα σου στείλω email τον κώδικα για το site σου έτοιμο να το βάλεις!

  23. athalex7 says:

    καλησπέρα απο μένα.λειτουργεί άψογα αλλά έχω το πρόβλημα με το jquery που αναφέρεις στο τέλος.Έχω προσπαθήσει τα πάντα,απο όσα εγω μπορώ τουλάχιστον,και το μόνο που γίνεται είναι είτε να τρέχει το slidebar είτε το Floating Facebook Like Box όχι όμως και τα δυο.θα εκτιμούσα κάποια γνώμη ή λύση. axizi.blogspot.gr

    • admin says:

      Σου έστειλα email προτείνοντας μια λύση που μπορείς να κάνεις!

Leave a Reply

Άδεια Creative Commons
Χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Παρόμοια Διανομή 4.0 Διεθνές .
© 2017 Greek PC Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS