大門牙怪獸與阿亮: 【教學筆記】blogger嵌入按讚鈕與Facebook留言板

大門牙怪獸與阿亮這blog才剛開始運作
除了要感謝支持我們的大家外
還要感謝偉大的孤狗大神，以及卡勒與Tony

這邊整理一下關於按讚鈕與臉書留言版設定流程給大家參考喔！

首先無論要放哪個，跟臉書有關的功能最好都先去找出APP ID與admins兩組數字

先來講APP ID～
請進入此網站：https://developers.facebook.com/apps
先建立一個APP，按照網頁的步驟一步步完成，Website with Facebook Login 記得填入網誌首頁的URL，以Funny Story舉例

而最後目的是要取得APP ID，按這裡即可找到。

再來就換個人的ID了！
非常容易～只要去自己臉書的個人頁面對大頭照按右鍵選在新分頁開起影像
ID就會出現在網址那邊囉，如下圖：

接著告訴大家要在哪編輯程式碼，在blogger的後臺選【範本】然後點【編輯HTML】
這樣就可以開始HTML之旅囉～ヽ(✿ﾟ▽ﾟ)ノ

先來把剛剛取得的兩組數字填進這段程式碼： (換掉紅字)

<meta content='個人ID' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>

位置請在<head>與</head>間自己決定，別白目打斷裡頭現有的程式碼喔XD

各篇文章按讚鈕嵌入：

<head>與</head>間再放置下列兩段程式碼： (一樣紅字自行替換)


<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta content='blog' property='og:type'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='大門牙怪獸與阿亮' property='og:site_name'/> <meta content='APP ID' property='fb:app_id'/> <meta content='個人ID' property='fb:admins'/>



<script type='text/javascript'> var blog = document.location.hostname; var slug = document.location.pathname; var ctld = blog.substr(blog.lastIndexOf(".")); if (ctld != ".com") { var ncr = "http://" + blog.substr(0, blog.indexOf(".")); ncr += ".blogspot.com/ncr" + slug; window.location.replace(ncr); } </script>


接著到<body>與</body>間找個位置放下面這段：


<div id='fb-root'/> <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/zh_TW/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>


再來下面這段放在<div class='post-header'>和<div class='post-header-line-1'/>之間
如果跟我們一樣找不到這兩行的話，可以放在<div class='post-outer'>的上面試試看
不然就是在這個區間自行尋找適當位置了：


<div class='fb-like' data-action='like' data-colorscheme='dark' data-height='100' data-layout='standard' data-send='true' data-show-faces='false' data-width='450' expr:data-href='data:post.canonicalUrl'/>


data-height和data-width可以依需求修改
而data-show-faces改成true的話，按讚鈕底下就會出現有按讚的人的照片

出來效果就是這樣囉 (*"･∀･)ﾉ ↓

另外，如果你找出<div class='post-outer'>這行，接著再往下看，把上面那段臉書按讚code放在<b:include data='post' name='post'/>下，按讚鈕位置便會在文末。

※按讚鈕剛設好的頭幾天可能會遇到按完讚需要再按一次確認(confirm)的狀況，那是臉書在確認這個帳號是可信的，只要等個幾天就能正常使用囉～

網頁側邊加入浮動式Facebook粉絲團外掛Widget：

在</head>的前面先加這段：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


這樣才可使用javascript的效果喔！

接著到【版面配置】選擇【新增小工具】再選【HTML/JavaScript新增】
直接貼上線面這段(紅字替換為自己的粉絲團ID)
例如FS網址為https://www.facebook.com/FSTrans，粉絲團ID便是FSTrans

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi735rsUooZrvkpoznWdG8OZ039ff92WOvSTRsWQ1MO8VH7-_aGJdu5sAaBQXRcOGsksc5AjZ7Azz8mVboTRj0K0Znqvnn9nZfule99ahLxGHLG_izuVMK2O-vYbYjDIJMYI4I5D5bI_jE/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F粉絲團ID&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://mbt33.blogspot.in/2012/12/two-new-stylish-floating-facebook-like.html" target="_blank">Get This!</a></span></div></div> </div> </div>

按下儲存就會有以下效果囉 (*"･∀･)ﾉ ↓