在 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

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