[Help] Popup Facebook buat Blogger

Discussion in 'Blogger' started by wphoet, Apr 27, 2013.

  1. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Tadi pagi jam 4 subuh iseng nyobain pakai popup likes facebook buat nambah likes di fanpage fb (ikutan pasang gara2 lihat bersosial.com yg likes fb-nya naik tajam rata2 100an per hari). tampilan popupnya seperti ini:

    [​IMG]

    dapat script popupnya dari sini cuma diedit dikit size dan tampilan warnanya. setelah dipasang sampai siang tadi jumlah likes fanpage saya dari yg cuma 17 orang langsung naik jadi 49 orang likes.

    Nah.., yg jadi masalah ada salah satu user di web/blogku yg ngomong katanya ini popup nongol terus hampir di setiap halaman walaupun sudah di likes. akhirnya siang tadi saya copot dulu popupnya buat di edit lagi, tapi malah bingung editnya. kira2 ada yg bisa bantuin nambahin code scriptnya gk ya? biar bisa cuma nongol sekali terutama buat yg belum likes, sedangkan buat user yg sdh likes gk perlu nongol lagi popupnya, jadi kyk nge-cek cookie browser gitu. soalnya saya gk begitu paham dengan bahsa kyk ginian (maklum gaptek) *pusing*

    ini kode popupnya:
    Code:
    <style type='text/css'>
    #fade {display: none;background: #000;position: fixed; left: 0; top: 0; z-index: 10;width: 100%; height: 100%;opacity: .60;z-index: 9999;}
    .popup_block{display: none;background: #252525;padding: 0 4px; border: 1px solid #333;float: left;position: fixed;top: 50%; left: 50%;z-index: 99999;-webkit-box-shadow: 0px 0px 20px #000;-moz-box-shadow: 0px 0px 20px #000;box-shadow: 0px 0px 20px #000;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
    img.btn_close {float: right;margin: -36px -8px 0;}
    .popup p {padding: 5px 10px;margin: 5px 0;}
    *html #fade {position: absolute;}
    *html .popup_block {position: absolute;}
    .wrapper {padding:5px; margin: 4px auto; width: 310px; height: 310px;border-radius: 0px;position: relative;z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}
    .inner  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
    .ribbon-wrapper-green {width: 85px;height: 88px;overflow: hidden;position: absolute;top: -3px;right: -3px;}
    .ribbon-green {font: bold 15px Sans-Serif;color: #333;text-align: center;text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform:rotate(45deg);position: relative;padding: 7px 0;left: -5px;top: 15px;width: 120px;background-color: #00E100;background-image: -webkit-gradient(linear, left top, left bottom, from(#00E100), to(#00FF00));background-image: -webkit-linear-gradient(top, #00E100, #00FF00);background-image: -moz-linear-gradient(top, #00E100, #00FF00);background-image: -ms-linear-gradient(top, #00E100, #00FF00);background-image: -o-linear-gradient(top, #00E100, #00FF00);color: #fff;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
    .ribbon-green:before, .ribbon-green:after {content: "";border-top:3px solid #6e8900;border-left:3px solid transparent;border-right: 3px solid transparent;position:absolute;bottom: -3px;}
    .ribbon-green:before {left: 0;}
    .ribbon-green:after {right: 0;}
    </style>
    <a href="#?w=auto" rel="popup3" class="poplight"></a>
    <div style="display: none; margin-top: -200px; margin-left: -200px;" id="popup3" class="popup_block"><a href="#" class="close"><img src="https://lh5.googleusercontent.com/-R7QaXS6MEag/UXrZrbgNHlI/AAAAAAAAOcI/Ndly41_AOMI/s36/89a5e725_smush_close.png" class="btn_close" title="Close Window" /></a>
    <div class="wrapper"><div class="inner"><div class="ribbon-wrapper-green">
    <div class="ribbon-green">Facebook</div>
    </div>
    <center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplengdut&width=292&height=290&show_faces=true&colorscheme=light&stream=false&border_color=transparent&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:295px;" allowtransparency="true"></iframe></center>
    </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $.fn.popOpen = function(){
    popID = $(this).attr('rel'); //Get Popup Name
    popURL = $(this).attr('href'); //Get Popup Href To Define Size
    //Pull Query & Variables from href URL
    query= popURL.split('?');
    dim= query[1].split('&');
    popWidth = dim[0].split('=')[1]; //Gets The First Query String Value
    //Fade In The Popup And Add Close Button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
    //Define Margin For Center Alignment
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin To Popup
    $('#' + popID).css({
    'margin-top' : -popMargTop,
    'margin-left' : -popMargLeft
    });
    //Fade In Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
    };
    //When You Click On A Link With Class Of Poplight And The Href Starts With A #
    $('a.poplight[href^=#]').click(function() {
    $(this).popOpen(); //Run PopOpen Function On Click
    return false;
    });
    $('a.poplight[href=#?w=auto]').popOpen(); //Run PopOpen Function Once On Load
    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When Clicking On The Close Or Fade Layer
     	$('#fade , .popup_block').fadeOut(); //Fade Them Both Out
    $('#fade').remove();
    return false;
    });
    popOpen
    });
    </script></div>
    

    itu yg di code iframe tmpat fanpage facebook kita. coba di ctrl+f trs cari: "plengdut" buat diganti dgn nama fanpage fb pnya teman2.

    mohon bantuannya *nangis2*
     
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    Coba pake code pop up yang

    Coba pake code pop up yang ini aja mas, cuma muncul sekali saat membuka halaman blog :

    Code:
    <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;}
    #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://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
    #cboxLoadedContent{margin-bottom:5px;}
    #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
    #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/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://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/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;}
    #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: #3B5998;
    font-size: 15px !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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
    <script src="http://yourjavascript.com/11215013191/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*30;
    var expires = new Date((new Date()).valueOf() + fifteenDays);
    document.cookie = "visited=true;expires=" + expires.toUTCString();
    $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
    });
    </script>
    
    
    <div style='display:none'>
    <div id='subscribe' style='padding:10px; background:#fff;'>
    <h3 class="box-title">Ingin selalu mengetahui Update Film Terbaru di Kenyangdownload.com ? Silakan klik Tombol 'SUKA' dibawah ini ya .....</h3>
    <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FKenyangDownload&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=200" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:200px;" allowtransparency="true"></iframe>
    </center>
    
    </div>
    </div>
    

    CTRL + F cari
    Code:
    KenyangDownload
    
    kemudian ganti sama username fanspagenya,, contohnya ada di blog saya kenyangdownload.com

    *bagus* edit sesuai kebutuhan
     
  3. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    cayun wrote:

    ok dicoba dlu *ketawa3*
     
  4. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    wphoet wrote:

    silahkan mas :)
     
  5. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    479
    Likes Received:
    14
    Trophy Points:
    18
    Google+:
    saya ga ahli dalam gitu"an

    saya ga ahli dalam gitu"an *berkeringat*
     
  6. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @cayun :masih belum bisa

    @cayun :masih belum bisa nongol nih pakai popup punyamu, btw itu dipasang di widget apa langsung di templatenya ya *bingung* soalnya sdh clear cookies & login pakai user fb lain tapi gk nongol juga. pdhl lihat web pnyamu bisa nongol popupnya. *pusing*
    @samuel :hahaha sama *berkeringat* kl cuma edit2 ukuran dgn warnanya doank bisa, tapi kl sdh menyangkut fungsi/perintah/settingannya jadi bingung juga, gk paham *pusing*
     
  7. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,245
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Javascript yah? Bukannya Mbah

    Javascript yah? Bukannya Mbah Google kurang suka ama itu?
     
  8. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    wah baru belajar blogger

    wah baru belajar blogger :D blom nyampe yg begini2an .. lagian blog personal mana ada fanspage, cayun jago yaah :)
     
  9. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @D-dig : bemeran ya? kl

    @D-dig : *bingung* beneran ya? kl gitu saya pasang 3 hari doank sampai selasa besok buat nambah2in like doank trs dicopot lagi *jail*
    @fahmi : *ketawa4* iseng di pasang di blog yg sdh upgrade ke TLD, lumayan sampai detik ini dpt 53 likes *jail*
     
  10. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,245
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Untuk lebih pastinya mas

    Untuk lebih pastinya mas wphoet baca-baca dulu aja artikel tentang itu.
     
  11. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    itu dipasang di Widget , coba

    itu dipasang di Widget , coba buka pake browser lain :)
     
  12. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @D-dig : iya pernah baca juga

    @D-dig : iya pernah baca juga *ketawa3* cuma lagi mau disetting biar gk nongol terus2an jadi cukup sekali buat yg sdh like gk nongol lagi. CSS buat cookienya sdh ketemu contohnya di www.w3schools.com cuma bingung ditempatin dimana nih code cek cookiesnya :D

    @cayun : *ketawa4* iya ntar di coba lagi, ini lgi coba modifikasi dikit yg codeku, mudah2an bisa, kl gk bisa ya akhrnya pakai yg punyamu lagi *ketawa3*
     
  13. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    gamedewa3 wrote:

    maksudnya bukan di halaman home doank, tapi buat semua halaman dan cuma nongol sekaili per ip pengunjung, dan jika ada pengunjung yg sudah like otomatis gk bakal nongol lagi popupnya, jadi kyk meriksa cookie browser gitu *ketawa3*
     
  14. satriajogja

    satriajogja Member

    Joined:
    Feb 24, 2013
    Messages:
    348
    Likes Received:
    7
    Trophy Points:
    18
    Kl ane pribadi cukup

    Kl ane pribadi cukup terganggu dengan pop up seperti ini *bingung*
     
  15. Dan

    Dan Forum Bot

    Joined:
    Dec 4, 2012
    Messages:
    1,316
    Likes Received:
    257
    Trophy Points:
    83
    Google+:
    Facebook popup

    Ketika Facebook popup dipasang yang paling gampang nge-like adalah yang bukan para webmaster/blogger etc. Coba masak seperti kita gampang banget nge-like fanspage website lain? kemungkinannya kecil. Jadi misal niche blog kalian bukan webmaster, pasang saja pasti Facebook like cepet nambahnya *jail*

    Untuk SEO dari popup ini asal digunakan sewajarnya tidak masalah berikut video dari si Matt Cutts alias Mamat, video lama memang tapi setidaknya memberi sedikit gambaran



    Bersosial.com kemarin juga mulai pasang, pertama per session karena module Drupal-nya hanya support seperti itu akhirnya saya modifikasi sendiri supaya cookies expire 30 hari (bisa diset lebih).

    Memang popup itu sedikit menganggu tapi kalau loadingnya cepet dan tanda close-nya jelas tidak masalah *jail*
     
  16. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    alias mamat metal doong

    alias mamat metal doong panjangannya *ketawa4* dalangnya siBewok *ketawa4*
     
  17. sakaji

    sakaji Member

    Joined:
    Mar 13, 2013
    Messages:
    165
    Likes Received:
    2
    Trophy Points:
    18
    Ditunggu lapsusnya mas

    Ditunggu lapsusnya mas @Wphoet
     
  18. Andre

    Andre Member

    Joined:
    Apr 12, 2013
    Messages:
    483
    Likes Received:
    22
    Trophy Points:
    18
  19. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Dan wrote:

    nah itu yg saya cari, bisa lihat contoh script cookienya doank apa gak mas @Dan trs penempatannya dimana aja. di scriptnya si @cayun ada record cookiesnya juga, tapi pas saya kombinasikan dgn punyaku jadi gk ngefek ttp trsus2an nongol. mungkin saya yg salah pasang cookienya kali ya *bingung*
     
  20. Ardiansyah

    Ardiansyah Member

    Joined:
    Feb 5, 2013
    Messages:
    367
    Likes Received:
    18
    Trophy Points:
    18
    Google+:
    kalau popup facebook seperti

    kalau popup facebook seperti yg bersosial.com ini cara buatnya gimana? *bergaya*
    cuma tampil sekali saja waktu di klik
    bagi dong scriptnya mas dan *jail*
     
Loading...

Share This Page