War Thunder

Floating Facebook Like Box για wordpress

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

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

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

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

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

Βήμα 2: Από το dashboard πηγαίνετε Appearance και επιλέξτε widgets. Το widget που θα προσθέσουμε είναι τύπου Text.

Βήμα 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 για τη wordpress ιστοσελίδα μας.

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

loading...

Share This Post

Related Articles

5 Responses to “Floating Facebook Like Box για wordpress”

  1. [...] Σε αντίθεση με άλλα floating widgets που επιτρέπουν μόνο ένα στα δεξιά της οθόνης, αυτό είναι απόλυτα συμβατό και μπορεί να συνδυαστεί με facebook floating box. [...]

  2. [...] Σε αντίθεση με άλλα floating widgets που επιτρέπουν μόνο ένα στα δεξιά της οθόνης, αυτό είναι απόλυτα συμβατό και μπορεί να συνδυαστεί με facebook floating box. [...]

  3. George says:

    Φίλε το έκανα ακριβώς έτσι όπως το λες αλλά τίποτα… μήπως πρέπει να κάνω κάτι επιπλέον?

    • demiscy says:

      Φίλε Γιώργο στείλε ένα email (info@greekpcblog.com) εξηγώντας μου τι ακριβώς έκανες για εκ πρώτης όψεως κοιτώντας το site σου δεν βλέπω λόγο να μην μπαίνει το fb floating box. Ίσως να οφείλεται στο theme που επέλεξες όμως για εξήγησε λίγο καλύτερα και θα σε βοηθήσουμε να μπει…

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

Leave a Reply

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