越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | Facebook Page Like 小工具


- Tutorial requested by Onn Yee -

效果图、如果看不清楚,可以看部落格的右手边,有一个 Like Ma'blog 的东东,就是那个了。

1. 设计 → 修改 HTML

2. 寻找代码 <head>

3. 在 <head> 后面添加代码:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

4. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

5. 添加以下代码:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>

<style type="text/css">
.fblikebox{
background: url("图片 url") no-repeat scroll left center transparent;
display: block;
float: right;
height: 270px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position: fixed;
right: -250px;
top: 20%;
}

.fblikebox div{
border: none;
position: relative;
display: block;
}
</style>

<div class="fblikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=专页 url&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
</div>
代码有点乱,因为我将全部的代码放入一个小工具里面,避免你们开太多的小工具 ;)

6. 保存,即可。

小解释
红色代码:Like Ma'blog Here 的图片 url  *可改
紫色代码:小工具离顶部多远(% 越大,小工具离顶部越远)  *可改
蓝色代码:专页 url  *必改 


如何取得专页网址

1. 登入你的面子书专页

2. 拷贝网址:

3. 拷贝蓝色 highlight 起来的网址,取代蓝色代码,即可。

9 comments:

  1. Replies
    1. 暂时还没有研究到哦 :) 我研究到了,会更新这篇教学的 ^^

      Delete
  2. 可是我加了 like my page 就按 不到 back to top 了 . 有什么代码的问题吗 ? 还是有新的教程 ? :) 很喜欢你的教程和素材 . 加油加油 !

    ReplyDelete
    Replies
    1. 那是因为你的 Like My Page 的 hover 范围太大了。跟 Back to top 叠在一起了。所以你可以试试把内个 Back to top 移去左边 :)

      - replied by Bii.

      Delete
  3. harlo:)为什么不成功呢?
    有图片可是他没有移出来/\

    ReplyDelete
    Replies
    1. 可能你忘了添加某些代码。
      所以请你把之前的添加的代码删掉,再重新添加过试试看 :)

      -replied by Bii.

      Delete
  4. 请问你有 like me blog 类是图片嘛?

    ReplyDelete
    Replies
    1. 抱歉,没有发布过.. :)

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。