随机文章

2010年7月18日星期日

为blogger添加facebook like(赞)和share(分享)按钮

都是从别人的博客转载的,但绝不是100%copy~只是参考参考
有时候都忘了自己装了什么插件了
这两个我试用很久了,并不太会拖慢blog的载入速度


添加 facebook like(赞)按钮
http://developers.facebook.com/docs/reference/plugins/like
参考网站
添加 facebook share(分享)按钮
http://wiki.developers.facebook.com/index.php/Facebook_Share
 参考网站

图文教程在下面~





添加 facebook like(赞)按钮

 主要功能不太清楚(就只是单纯的like而已)
个人主页会出现链接,前提是要log in facebook



备份模板
 到你的部落格Design-->Edit HTML-->将右上角的Expand Widget Templates打勾
 到你的部落格设计-->修改 HTML-->将右上角的扩展窗口小部件模板打勾

ctrl + F 搜寻

<div class='post-header-line-1'/>
 post-header-line-1 就是我现在放的位置

  或者如果找不到 post-header-line-1 这个代码的话就找

    <data:post.body/>
     


在以上代码后面添加以下代码

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

 红色是可以更改要显示的字眼
蓝色是更改字体
不改也无所谓

图文并茂版,具体的概念一目了然

保存模板就好了

出来的效果

把代码在post-header-line-1 之后的赞的按钮会出现在对应位置,也就是以上图片的效果
可以放在很多不同地方,比如post body.......

________________________________________________


添加 facebook share(分享)按钮

个人不太推荐在部落格放这个代码,如果同一个页面出现太多重复的javascript会拖慢速度 
很明显的,share(分享)按钮可以分享部落格目前的网页到facebook


如果想选择如何显示的share就到以下网址去copy代码
http://www.facebook.com/share/    (PS:2011-06-20 更新,此页面已无效)
(不进入这个网站的话,使用我接下来提供的代码也可以)

 到你的部落格Design-->Edit HTML-->将右上角的Expand Widget Templates打勾
 到你的部落格设计-->修改 HTML-->将右上角的扩展窗口小部件模板打勾

 
ctrl+F 搜寻
<div class='post-header-line-1'/>


               
请使用用下面这个代码。
copy以下代码:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

代码放在header-line-1 的后面,要放在其他位置也行。
 至于其他位置的具体代码我就不太清楚了,大家试试看吧。

保存模板,结束

7 条评论:

linkpost

Related Posts with Thumbnails

页数