War Thunder

jquery pop up facebook like box v2 (για blogger ή wordpress)

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

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

Blogger

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

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

WordPress

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

Βήμα 2b: Πηγαίνετε Appearance -> Widgets και επιλέξτε να προσθέσετε ένα νέο Text Widget στο sidebar σας.

Ο Κώδικας

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

<style>
    #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;}
    
 
    </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
<script src="http://yourjavascript.com/3093182329/btt_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:"390px", inline:true, href:"#subscribe"});}});</script>
   
        <div style='display:none'> 
       <div id='subscribe' style='padding:10px; background:#fff;'> 
            <center><h3 class="box-title"><img alt='' src='http://lh4.ggpht.com/-mIbTVG56MQU/T00kHYih-mI/AAAAAAAAGAQ/zi16v-beLao/facebookbutton%25255B2%25255D.png?imgmax=800'/></h3> </center> 
          <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=270" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:270px;" allowtransparency="true"></iframe>
</center> 
    <p style="font-size:x-small; float:right;  margin-right:10px;" >Powered By <a style="text-decoration:none;" href="http://greekpcblog.com" target='_blank'>Greek PC Blog</a></p> 
    </div> 
    </div>

Βήμα 4: Πατήστε αποθήκευση και μεταφέρετε το gadget/widget αυτό ώστε να είναι το τελευταίο στο 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

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

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

Σημ: Το popup αυτό εμφανίζεται μια φορά. Είναι σχεδιασμένο έτσι ώστε να μην είναι κουραστικό και να ενοχλεί τον χρήστη. Αν θέλετε να εμφανίζεται σε κάθε σελίδα του site σας, ενοχλώντας τον χρήστη μέχρι να πατήσει like (δεν το συνιστούμε) τότε στην γραμμή 56 αντικαταστήστε το visited=true με visited=false.

loading...

Share This Post

Related Articles

4 Responses to “jquery pop up facebook like box v2 (για blogger ή wordpress)”

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

  2. Greg Dallas says:

    Μπράβο, πολύ καλές οι οδηγίες σου! Ευχαριστώ πολύ!!!!!

  3. kostas says:

    Κάνω copy/paste τον κώδικα και δεν δουλέυει, μου εμφανίζει τον κώδικα αντί για το pop up. Τι μπορεί να φταίει;

    • έχω το ίδιο πρόβλημα και προσπαθώ να βρώ κάπως να το μετατρέψω ή να το προσαρμόσω στα μέτρα του wordpress.
      Στο blogger, o κώδικας εμφανίζει κανονικά την έξοδο που πρέπει να βγάλει στον χρήστη.
      Στο wordpress μάλλον φταίει ο περιορισμός χρήσης στους δωρεάν χρήστες….για widget κειμένου με υποστήριξη html/ javascript!

Leave a Reply

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