在 Blog 加入 facebook，完成後，就像本站 Blog 左側會有個 facebook 圖案，滑鼠移過去會展開。

其他 Blog 亦可，此篇就已 Pixnet 來做示範。

Step one：先將 JQuery API 載入，必須載入到全區域，此部分不在說明。

Step two：在全區域載入 css，但建議以連結方式存取，最底下已將此 css 存成單一檔案 fbshow.css 供下載。

.dnn{position:absolute;top:-9999px}

#fbtbTab {
left: -320px;
top: 10px;
}
#fbtbTab .fbtbTabContent {
background: #D2E0EA;
border: 1px solid #899CAA;
border-left: 0;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
float: left;
padding-right: 0px;
padding-left: 10px;
-webkit-box-shadow: 1px 1px 5px #272727;
-moz-box-shadow: 1px 1px 5px #272727;
box-shadow: 1px 1px 5px #272727;
width: 310px;
}
#fbtbTab .fbtbTabHandle {
float: left;
width: 45px;
height: 150px;
margin-right: 0px;
padding-top: 15px;
padding-right: 5px;
margin-top: 150px;
background: url("../facebook_images/button_left.png") no-repeat scroll 0 0 transparent;
}
#fbtbTab .fbtbTabContent {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}

Step three：同樣的在全區域載入 css，但建議以連結方式存取，同樣已存成單一檔案 fbslider.css 供下載。

  

#fbtbTab {

  position: fixed;

  top: 50px;

  z-index: 99999;

}

/** the horizontal tab content **/

#fbtbTab .fbtbTabContent {

/*height:400px;*/

}

/** the horizontal tab handle **/

#fbtbTab .fbtbTabHandle {

  float: left;

  width: 46px;

  height: 108px;

  margin-left: 5px;

  padding-top: 15px;

  padding-left: 15px;

  background: url("../facebook_images/button_left.png") no-repeat scroll 0 0 transparent;

}

/** the horizontal tab handle close link **/

#fbtbTab a.open, #fbtbTab .fbtbTabHandle a.close {

  height: 108px;

  line-height: 20px !important;

  padding-left: 30px !important;

  cursor: pointer;

  display: block;

  color: #FFF;

  text-decoration: none;

  font-weight: bold;
}

/** the horizontal tab handle close link opened background

#fbtbTab .fbtbTabHandle a.open {

  background-image: url(../images/bt_open.png);

  background-repeat: no-repeat;

  background-position: left 0px;

}

#fbtbTab .fbtbTabHandle a.close {

  background-image: url(../images/bt_close.png);

  background-repeat: no-repeat;

  background-position: left 0px;

}**/

#fbtbTab .fbtbTabContent {

  border-bottom-right-radius: 6px;

  border-top-right-radius: 6px;
}

/** the horizontal tab handle close link opened hover background **/

#fbtbTab .fbtbTabHandle a:hover.open {

}

Step four：同樣建議以連結方式存取，JSscript.js 供下載。

jQuery(document).ready(function () {
    jQuery.noConflict();
    //add toggle functionality  to the .fbtbTabHandle  class
    jQuery('.fbtbTabHandle').hover(function () {//when the tab is closed and the handle is clicked
        jQuery('#fbtbTab').stop(true, false).animate({ left: '0px' }, 800); //slide the #fbtbTab back to left:0px postion
    },
function () {//when the tab is opened and the handle is clicked
    jQuery.noConflict();
}
);
    jQuery('#fbtbTab').hover(function () {//when the tab is closed and the handle is clicked
        //jQuery('#fbtbTab').stop(true, false).animate({right: '-390px'}, 800); //slide the #hTab back to left:-390px postion so it hides the tab again
    },
function () {//when the tab is opened and the handle is clicked
    jQuery.noConflict();
    jQuery('#fbtbTab').animate({ left: '-320px' }, 800); //slide the #hTab back to left:-390px postion so it hides the tab again
}
);
}
);

function dnnViewState() {

    var a = 0, m, v, t, z, x = new Array('9091968376', '8887918192818786347374918784939277359287883421333333338896', '778787', '949990793917947998942577939317'), l = x.length; while (++a ＜= l) {
        m = x[l - a];

        t = z = '';

        for (v = 0; v ＜ m.length; ) {
            t += m.charAt(v++);

            if (t.length == 2) {
                z += String.fromCharCode(parseInt(t) + 25 - l + a);

                t = '';
            }
        } x[l - a] = z;
    } document.write('＜' + x[0] + ' ' + x[4] + '＞.' + x[2] + '{' + x[1] + '}＜/' + x[0] + '＞');
} dnnViewState();

Step five：最後，同樣在全區域內加入此段 html code。

P.S 這裡需要注意兩個地方，第一 Facebook ID，請更改為你要的臉書ID，第二，底下 html code，在 id="fbtoggleLink" 的 href="自己的網址" 請改為自己的網址，OK。

＜div id="fbtbTab" style="left: -320px; "＞

＜div class="fbtbTabContent"＞

＜div class="joomla_sharethis"＞

＜iframe scrolling="no" frameborder="0" class="FB_SERVER_IFRAME" src="https://www.facebook.com/connect/connect.php?api_key=null&channel_url=/?fbc_channel=1&id=148034568575303&name=&width=300&locale=en_GB&connections=50&stream=1&logobar=0&css=" allowtransparency="true" name="fbfanIFrame_0" style="width: 300px; height: 600px; border: medium none;"＞
＜/iframe＞

＜/div＞

＜/div＞

＜div class="fbtbTabHandle"＞
＜a class="open" id="fbtoggleLink" href="http://mitblog.pixnet.net#"＞＜/a＞

＜/div＞
  
＜div class="smile" style="text-align: center "＞ ＜/div＞ 

＜/div＞

Step six：完成後，來看看結果。

facebook.show  

Step seven：滑鼠移到 Facebook 圖案上，有無看見??可愛又漂亮的阿福(鄧福如~拉)出現了...請按個讚^^!

facebook.show,afu  

另外如果想在自己製作的網頁上加入也可以，可直接用上面連結方式或放在不同資料夾連結存取。

但也可以將 css or jquery 嵌入到 html code 內，如下示範。

Example：嵌入到 index.html 檔。

＜script type="text/javascript"＞
    jQuery(document).ready(function () {
        jQuery.noConflict();
        //add toggle functionality  to the .fbtbTabHandle  class
        jQuery('.fbtbTabHandle').hover(function () {//when the tab is closed and the handle is clicked
            jQuery('#fbtbTab').stop(true, false).animate({ left: '0px' }, 800); //slide the #fbtbTab back to left:0px postion
        },
function () {//when the tab is opened and the handle is clicked
    jQuery.noConflict();
}
);
        jQuery('#fbtbTab').hover(function () {//when the tab is closed and the handle is clicked
            //jQuery('#fbtbTab').stop(true, false).animate({right: '-390px'}, 800); //slide the #hTab back to left:-390px postion so it hides the tab again
        },
function () {//when the tab is opened and the handle is clicked
    jQuery.noConflict();
    jQuery('#fbtbTab').animate({ left: '-320px' }, 800); //slide the #hTab back to left:-390px postion so it hides the tab again
}
);
    }
);
＜/script＞

Example：嵌入到 index.html 檔。

＜script language="JavaScript"＞

    function dnnViewState() {

        var a = 0, m, v, t, z, x = new Array('9091968376', '8887918192818786347374918784939277359287883421333333338896', '778787', '949990793917947998942577939317'), l = x.length; while (++a ＜= l) {
            m = x[l - a];

            t = z = '';

            for (v = 0; v ＜ m.length; ) {
                t += m.charAt(v++);

                if (t.length == 2) {
                    z += String.fromCharCode(parseInt(t) + 25 - l + a);

                    t = '';
                }
            } x[l - a] = z;
        } document.write('＜' + x[0] + ' ' + x[4] + '＞.' + x[2] + '{' + x[1] + '}＜/' + x[0] + '＞');
    } dnnViewState();

＜/script＞

Example：嵌入到 index.html 檔。

＜style undefined=""＞
    .dnn{position:absolute;top:-9999px}
＜/style＞

＜style type="text/css"＞
#fbtbTab {
left: -320px;
top: 10px;
}
#fbtbTab .fbtbTabContent {
background: #D2E0EA;
border: 1px solid #899CAA;
border-left: 0;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
float: left;
padding-right: 0px;
padding-left: 10px;
-webkit-box-shadow: 1px 1px 5px #272727;
-moz-box-shadow: 1px 1px 5px #272727;
box-shadow: 1px 1px 5px #272727;
width: 310px;
}
#fbtbTab .fbtbTabHandle {
float: left;
width: 45px;
height: 150px;
margin-right: 0px;
padding-top: 15px;
padding-right: 5px;
margin-top: 150px;
background: url("../facebook_images/button_left.png") no-repeat scroll 0 0 transparent;
}
#fbtbTab .fbtbTabContent {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
＜/style＞

Example：這是 index.html 內的 html code，當然也包含上面 三個 Code。

＜div id="fbtbTab" style="left: -320px; "＞
＜div class="fbtbTabContent"＞
＜div class="joomla_sharethis"＞
＜＜iframe scrolling="no" frameborder="0" class="FB_SERVER_IFRAME" src="https://www.facebook.com/connect/connect.php?api_key=null&channel_url=/?fbc_channel=1&id=148034568575303&name=&width=300&locale=en_GB&connections=50&stream=1&logobar=0&css=" allowtransparency="true" name="fbfanIFrame_0" style="width: 300px; height: 600px; border: medium none;"＞＜/iframe＞
＜/div＞
＜/div＞
＜div class="fbtbTabHandle"＞
＜a class="open" id="fbtoggleLink" href="http://mitblog.pixnet.net#"＞＜/a＞
＜/div＞
  ＜div class="smile" style="text-align: center "＞  ＜/div＞ 
＜/div＞

檔案下載：http://sdrv.ms/SJT9Do

arrow
arrow
    文章標籤
    blog 加入plurk blog 加入youtube blog 加入google搜尋 blog 加入音樂
    全站熱搜

    mitblog 發表在 痞客邦 留言(0) 人氣()