標籤 : facebook like

2012.03 22

標籤： blog, comment box, Facebook, facebook like, textcube

部落格内Facebook Comment Box for TEXTCUBE

不久前做了少少改变，在部落格放了facebook comment box。说起来还有点麻烦，因为要到Facebook Developer那先去create 一个 Apps先才可以。 1.去到 https://developers.facebook.com/apps create apps。2.任意为你新增的这个app取个名，至少7个字母，不能有号码（下图错了，因为6个字母而已）webhosting可以不用。填妥了就按continue好了。3. 填写Security Check。对了，要申请这个apps，一定要用手机鉴定fb帐号先。手机和fb 连线后，记得选择“不要显示电话号码”的选项哦！4.简单的输入一些基本资料（我乱填的@@ )不过最重要的是，把那个 APP ID给抄下来！！！！！！================================================================接下来的步骤是输入代码的时刻了：1）去到部落格后台，选择 Edit Skin2）在Skin.Html 的部分，<html>过后先输入几样东西。 a) JS SDK. <div style="padding:10px; background-color:#FFDAED"> <div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=345573468812321"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script></div>b)在<head>过后输入以下META ：<meta property="og:type" content="article"><meta property="og:title" content=" :: "><meta property="og:image" content="http://xxx.jpg换成你要显示的照片"><meta property="fb:app_id" content=" 你的APPID号码"> c)在过后，输入以下代码。 <div class="fb-comments" data-href="你的网址/" data-num-posts="4" data-width="445"></div><p><a hfef= 'http://kimhaur.com/656'>GET Facebook comments box ?</a></p>Sample：<div class="fb-comments" data-href="http://ifublog.com" data-num-posts="4" data-width="445"></div><p><a href= 'http://kimhaur.com/656'>GET Facebook comments box ?</a></p>3.可以测试了 =）Blogspot版，可直接参考：http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/

【教学】如何在部落格增加Facebook like的功能（3）–显示头像+For Textcube

2011.03 21

分類：软件介绍&电脑教学

標籤： blogspot, Facebook, facebook like, 教学, 显示头像, 电脑

【教学】如何在部落格增加Facebook like的功能（3）–显示头像+For Textcube

在过去的两篇文章：【教学】如何在部落格增加Facebook like的功能【教学】如何在Blog增加Facebook like 功能（2 ）提到了如何在Blog里增加Facebook Like的这项功能，很多网友也依据所教的方式去进行了，而且都没有问题，总算小有满足。可惜的是1）之前这个Like的功能稍微有点不够完整，就是无法显示出“like"的人到底有谁。[#M_ more.. | less.. | -----------------------------------------------如果目前你的部落本身并没有显示出图像的话，那就照着这个步骤去做哦（注：以下步骤是For已经有添加facebook like功能的Blogspot博客）1）打开Edit HTML界面2）勾选Expand widget3）用Ctrl + F，查找这段代码：<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div>4）把以上3）找出的代码全选，然后删除5）复制以下代码，然后粘贴在刚刚删除旧Facebook like的位置。<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:67px;'/></div> 6）插入了我新给你们的这段代码后，应该就可以看见like你的人的头像了。By传说中最帅的电脑老师======================================注2：如果like的人并不在你的friend list里，则不会显示。_M#]2）然后呢，Blogspot更改模板后无法使用like的问题在(2)那篇已经解决了，剩下的另外一个问题就是Textcube用户的问题。如果照着第一篇，其实是很容易的，可是呢，很多人遇上了问题：A)Blog Services Provider （例如Ifublog/Antzblog这些BSP）可能没有在blog里安装FB的插件（Plugin)，而Blogger也没有权限使用Ftp自己去安装Plugin，所以我的方法等于是失效了。B)另外一种情形是，付费的Textcube Blogger（不是使用免费BSP的）完全没有Cpanel和FTP的使用经验，甚至连Password都不懂（从免费BSP里跳出来的blogger大多数就有这个问题><），所以也无法安装插件。因此现在针对Textcube无法安装插件的用户，再附上另一教程=) 各位，请笑纳～～～[#M_ more.. | less.. | (以Ifublog blogger为例子)1)Login进Textcube后台2）去到Skin（模板）->Edit Skin（编辑模板）3)在Skin.html的部分，使用Ctrl+F（查找功能）找寻以下字眼： <div class="article"> </div>4)在<div class="article"> </div>下面插入以下代码：<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=http://ifublog.com&layout=standard&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:67px;'></iframe></div>5）完成。注意事项：a)其实有些网站不需要http://也可以的，为安全起见先提醒，如果使用了中文里的：的话，那会造成问题哦！一定要用英文的:b)如果你是个人用户，直接写入你的网址；如果你是BSP用户，就写下你的BSP的网址名（不需要包括你的部落格网址，因为那已经包括在后面的代码了***大多数***）_M#]有任何疑问欢迎留言洽询，我会尽力解答。

2011.02 01

分類：Uncategorized

標籤： eq, facebook like, ifublog, 公司, 同事, 新年

新年前记复杂情绪 + 给Ifublog的

1. 那个董百勤，竟然乱乱宣布我是得奖者，还把礼物寄来我家。可是我还没有收到，他也真够搞笑的。 2.新年前的心情很复杂，像昨天心情很不好的，超级的不好的，一大清早。EQ控制的十分的不好，处理事情没那么冷静。其实心知正确方式是怎样应对，可是就是无法控制自己。应该是工作压力，然后再受委屈的关系。后来崩溃了。3. EQ不好也是一下子而已，我就好像拼图那样，崩溃了过后，还会拼回再一起。可能别人都看不出。嗯，我是很乐观的，虽然乐观到最后还是会有承受不住的那一刻，可是我会尽量的，尽力的站回起来。我那么差劲么？不，我很强的。我是全能的。4. 失控的一瞬间，做了很不理智的事情。到冷静过后，想起了不应该那样的做。不管和谁吵架都好，都不应该牵扯到第三者。我竟然扯了我的同事几下。lunch后，我向他道歉。5. 晚上在kepong和朋友聚会，竟然让我遇到了我的学生，从巴生来到那么远都会遇到，总算有缘。亏我还记得到她的名字。学生记得你的感觉真好。有些学生，会忘记你的哦。6. 今天终于收工了，回家的途中心情非常的愉快。忽然很有迎接新年的感觉。mood来了！开新年歌，很爽！！！7. 鸡蛋糕，那个internet一直断线，害我写一篇文章都po不上来。还好终于成功了。接近12点的这一刻……#%W#$^$#W&2#@$%#$!@8. 最近的那个facebook like教学不够完善，ifublog的人说他们做不到。所以补充：在Edit Skin--> Skin.html的部分找寻这一段：<div class="article"> </div>在后面加入这一段：找寻要插入like button的地段，然后paste这个<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=http://ifublog.com&layout=standard&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:77px;'/></div>大概是这样，应该就可以了。9. 其中一个好久不见的学生，哈哈。

2010.10 23

分類：软件介绍&电脑教学

標籤： facebook like

【教学】如何在Blog增加Facebook like 功能（2 ）

不久之前在部落里分享了一篇文章，教如何增加like功能的。虽然留言只有4个，不过至少有看到39个like，直到有人阅读过就很好了。 http://kimhaur.com/453当时的文章。如果有人还没增添此功能的话，快快去参考吧！！--------------------至于今天的增加facebook like 功能（2）的起源就是阿紫了！这个大帅哥原本就有加了facebook like的功能，都很顺利，不过却心血来潮的换了部落格的模板去。（而且还换了个蛮复杂的模板！）因为换了比较classic的模板，当要重装like功能的时候就出现了问题：根据上一篇的教学指南，应该是几个简单的步骤如：[#M_ more.. | less.. | 1.登陆后台，去到Design-->Edit HTML.2.把Expand Widgets Templates 打勾。3.用Ctrl + F （find)的功能，输入 <data:post.body/> 。4.在这下面paste入以下代码：<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div>5.save 你的Templates._M#]不过换了模板后，出现一个问题就是步骤2无法实行：expand widgets template这个小格子不在了。没有勾起来的话，步骤3也无法进行因为<data :post.body/>是不会出现的。如果你也有这样的疑问的话，就要用以下的方法了。在HTML页面找到文章body的部分，例如阿紫部落格新模板的文章部分就是这一段：[#M_ more.. | less.. | <div class="title"><b></b> <BlogDateHeader><$BlogDateHeaderDate$>,</BlogDateHeader><$BlogItemDateTime$></div> <div class="sorry"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div> <br><div id="postbody"><$BlogItemBody$><br></div></div> <blogitemcommentsenabled><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>comment|</a><$BlogItemCommentCount$> 细语 </BlogItemCommentsEnabled><br><br> </td></tr></table></Blogger>_M#] 所以，就在文章的最尾端即“细语”那个部分添加facebook like的Iframe代码，如下：[#M_ more.. | less.. | <div class="title"><b></b> <BlogDateHeader><$BlogDateHeaderDate$>,</BlogDateHeader><$BlogItemDateTime$></div><div class="sorry"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><br><div id="postbody"><$BlogItemBody$><br></div></div><blogitemcommentsenabled><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>comment|</a><$BlogItemCommentCount$>细语 </BlogItemCommentsEnabled><br><br><div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></td></tr></table></Blogger>_M#]只是如果就这样save话，等下display的时候也会出现问题，因为现在模板里的data:post.url根本不存在，所以还要做一项改正，就是黑色部分的字要换成<BlogItemPermalinkURL$>.更正过后，代码会如下：[#M_ more.. | less.. | <div class="title"><b></b> <BlogDateHeader><$BlogDateHeaderDate$>,</BlogDateHeader><$BlogItemDateTime$></div><div class="sorry"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><br><div id="postbody"><$BlogItemBody$><br></div></div><blogitemcommentsenabled><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>>comment|</a><$BlogItemCommentCount$>细语 </BlogItemCommentsEnabled><br><br><div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=<BlogItemPermalinkURL$>&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:27px;'/></div></td></tr></table></Blogger>_M#]如果没用<BlogItemPermalinkURL$>而使用自己的网址URL的话，到时候的like就不会根据每篇文章，而是根据整个部落格的累积like来计算了。最后还要设置一样东西就是，去到HTML<head> 和 </head>之间加插一段meta：<meta property="og:title" content="<$BlogPageTitle$>"/><meta property="og:site_name" content="你的部落格名字"/>完成了这一段就可以了。（阿紫：你的这一段我好想设置错了，你要重新检查～用CTrl + F）===========================Blogspot的模板多不胜数，很多人也喜欢去下载各式各样的来使用，可是他们的HTML就会有所不一样了。如果你也遇上了像阿紫那样的问题，不妨照着我的方法去做看看吧。谢谢～like一个！