FB按讚提醒教學

最近有人注意到進入樂夫輕鬆遊的網頁,
會顯示一個FB粉絲團按讚的提醒,
也想知道怎麼做的,那樂夫就在此把小技巧分享出來給大家參考囉~
廢話不多說,直接來看看以下的程式碼區塊~ Go!

CSS的部分:

<style type="text/css">
.fbPopBox{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    display: none;
    z-index: 1000;
}
.fbPopBox-div{
    position: absolute;
    top: 120px;
    left: 38%;
    width: 400px;
    padding: 5px 5px;
    background-color: white;
    border-radius: 10px 10px 10px 10px;
}
.fbPopBox-close{
    position: absolute;
    right: -15px;
    top: -10px;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
}
.fbPopBox-title{
    background-color: rgba(61, 147, 204, 1);
    border-radius: 10px 10px 0px 0px;
    color: white;
    font-size: 150%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    z-index: 100;
}
</style>

配色上或大小不想跟樂夫相似度太高,可以透過CSS調整一下 background-color 的設定!!

JavaScript的部分:

<!--使用pixnet 平台已有引入JQuery 可省略-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 此為記錄cookie 的套件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
var readCount = 5; //避免過度影響觀看,6次才出現1次提醒,隔日重計
var waitPopSec = 6; //停留6秒後才顯示提醒
function callFbPopBox(){
    var popFbBox = jQuery.cookie("popFbBox");
    if(popFbBox==null || popFbBox=='' || popFbBox >=readCount){
        jQuery('.fbPopBox').fadeIn();
    }else{
        var popFbBoxInt = parseInt(popFbBox)+1;
        jQuery.cookie("popFbBox", popFbBoxInt, { expires: 1, path: '/' });
    }
}
function closeFbPopBox(){
    jQuery('.fbPopBox').fadeOut();
    jQuery.cookie("popFbBox", '1', { expires: 1, path: '/' });
}
jQuery(document).ready(function() {
    setTimeout(callFbPopBox,waitPopSec*1000);
    jQuery('.fbPopBox-close').on('click', closeFbPopBox);//點選關閉按紐
    jQuery('.fbPopBox').on('click', closeFbPopBox);//點選空白處即可關閉
    //按ESC 即可關閉
    jQuery(window).on("keyup", function (e){
        if (e.which == 27) closeFbPopBox();
    })
});
</script>

HTML的部分:

<div class="fbPopBox">
<div class="fbPopBox-div">
<div class="fbPopBox-title">

    <strong>樂夫輕鬆遊</strong>
    <img class="fbPopBox-close" src="https://c1.staticflickr.com/1/724/33039351921_f6f1016cf2_o.png"/>
</div>
<div style="color: #666; font-size: 14px; text-align: center;">如果喜歡樂夫的文章,請幫我們按個讚唷~ (・◇・)/~~~</div>
<iframe class="pix-iframe" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Floveplay6688&amp;width=400&amp;height=310&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" style="border:none;overflow:hidden;width:400px;height:210px;"></iframe>
</div>
</div>

HTML這邊的標題、說明文字,也可以改成自己想說的字樣喔!!

FB按讚提醒教學

把上面三個區塊全部都給貼到【側欄管理】>【自訂欄位】中,
當然不要忘記把 loveplay6688 換成自己的FB粉絲團帳號或ID唷~
不然可就要感謝各位幫樂夫多多宣傳呢~ 哈哈XD
ps. 因為pixnet的側欄在手機版網頁不會出現,所以手機版也就不會跳出提醒囉~

不知道有人注意到側欄滑出FB視窗嗎?下一篇~ 【在Blog網頁側邊滑出FB粉絲頁

那就分享到這邊,使用上若有什麼想法或疑問,歡迎按讚加入底下粉絲專頁樂夫分享或提問喔~~ 

快來按讚底下#樂夫輕鬆遊粉絲專頁,跟樂夫一起留言交流!!

文章標籤
創作者介紹

樂夫輕鬆遊

樂夫輕鬆遊 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • 鑫部落
  • 看到了, 謝謝分享! 比起側欄滑出FB視窗. "FB粉絲團按讚的提醒"相當複雜啊. Tks!
  • 呵呵 直接三個區塊複製貼上 很簡便的使用法XD

    樂夫輕鬆遊 於 2017/04/06 18:28 回覆

  • Rikki
  • 超專業的解說呀!太感謝了~ 崁入的畫面超好看!
    不過是否只有電腦版看得到,手機看不到呢? 謝謝:)
  • 對的,若是痞客邦平台,只有電腦版有效喔!:)

    樂夫輕鬆遊 於 2017/09/24 12:08 回覆

找更多相關文章與討論