War Thunder

jquery pop up facebook like box για blogger

Στη ανάρτηση αυτή θα δούμε πως μπορούμε να προσθέσουμε facebook like box που θα κάνει τη εμφάνιση του με τη είσοδο του αναγνώστη στη ιστοσελίδα μας όπως στη παρακάτω εικόνα:

Προσοχή: Συστήνουμε να δοκιμάσετε την νέα και βελτιωμένη έκδοση του jquery pop up facebook like box v2 (για blogger ή wordpress)

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

Blogger

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

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

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

<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }

#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->

        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Έλα και συ στη παρέα μας στο Facebook!<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/pages/Greek-PC-Blog/254728711248684&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://greekpcblog.com">Greek PC Blog</a></p>
</div>
</div>

Βήμα 4: Πατήστε αποθήκευση και μεταφέρετε το gadget αυτό ώστε να είναι το τελευταίο στο sidebar σας. Ο λόγος που το κάνουμε αυτό είναι για να μην επηρεάζετε το scriptακι αυτό με άλλα που τυχόν να έχετε από διαφημίσεις κτλ.

Βήμα 5: Ο κώδικας αυτός μόλις σας πρόσθεσε το 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

Στη γραμμή 115 του κώδικα αντικαταστήστε το Greek-PC-Blog με το όνομα_του_fan_page_σας και το id του Greek PC Blog με το ID_του_fan_page_σας.

Βήμα 6: Αδειάστε τα cookies από τον browser σας και κάντε refresh. Θα δείτε τώρα ότι εμφανίζετε το pop up που μόλις φτιάξαμε. Αν θέλετε να αλλάξετε το κείμενο απλά αντικαταστήστε το δικό στη γραμμή 112 με το δικό σας.

loading...

Share This Post

Related Articles

10 Responses to “jquery pop up facebook like box για blogger”

  1. exairetico says:

    Καλησπέρα! Μόλις δοκίμασα στο test site μου τον συγκεκριμένο κώδικα, αλλά δεν λειτουργεί :( Πιθανόν λόγω της ύπαρξης και άλλου jquery το οποίο υπάρχει ήδη στην template που χρησιμοποιώ?Υπάρχει κάποια λύση για το συγκεκριμένο πρόβλημα ή κάποιος άλλος κώδικας?

    • demiscy says:

      Γεια! Για αρχή δοκίμασε να βάλεις το html gadget τελευταίο στο sidebar σου. Άδειασε τη cache του browser σου και δες αν δουλεύει. Αν ούτε αυτό δουλεύει, σβήσε τη γραμμή 96 από το κώδικα, άδειασε τη cache του browser σου και δοκίμασε πάλι… αν έχεις ακόμη πρόβλημα πες το και θα το βρούμε.

  2. chris777 says:

    φιλε μου προσπαθησα να το βαλω και δεν μου εμφανιζεται τιποτα,το ιδιο συνεβη οσες φορες προσπαθησα να βαλω αυτο το gadget και απο αλλες σελιδες…πιστευω πως τα κανω ολα σωστα,μπορεις να μου πεις τι συμβαινει και δεν τα καταφερνω;

  3. chris777 says:

    ok φιλε μου,το εβαλα και δουλευει τελεια…τελικα το προβλημα μου ηταν οτι ειχα ενα αλλο gadget πιο χαμηλα στο τελος της διαταξης το οποιο δημιουργουσε το προβλημα….οποιος εχει παρομοιο προβλημα ας ελενξει τα gadget που εχει στη διαταξη του και βρισκονται χαμηλα

  4. ninaki says:

    geia sas ekana oti legate alla den mou to emfanizei mhpws mporeite na me voh9hsete ??

  5. Giannis says:

    doulevei gamataaa thanks

  6. alex says:

    kalispera, evala to kodika kanonika opos eipes.

    ola einai sosta leitourgei to box alla molis patiseis like vgazei mesa sto box ena Confirm

    an to patiseis se pop up window se metaferei sto facebook kai vgazei to eksis minima.

    “The page you requested was not found
    You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.

    Return home
    Go back to the previous page”

    ti eho kanei lathos ? efharisto polu!

    ekana mia dokimi me to safari kai doulepse kanonika. eho diagrapsei cookies kai cache apeires fores.. alla tpt ..

    efharisto ek ton proteron

    • admin says:

      Δυο πράγματα μπορεί να συμβαίνουν εδώ… είτε κάτι δεν πάει καλά με το url που βάζεις (στείλε μας στο email info(at)greekpcblog.com τι σελίδα του fb σου) είτε έχει κάποιο conflict το template σου με το jquery του script που εμφανίζει το κουτάκι. Αν έχεις εμπειρία από κονσόλα του browser σου μπορείς να ανιχνεύσεις τέτοια προβλήματα.

      • alex says:

        ok efharisto kapoio bug epaize alla ola koble tora ta ksana ekana ola ap tin arhi … kai epiase kanonika … kai prin to ksana ekana delete k ap tin arhi … alla den epiase iparhei periptosi na ksanaginei kati tetoio apo do k sto eksis ?

  7. margi says:

    polu kalo kolpaki ki auto gia na mazeueis fans..

Leave a Reply

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