豆丁主義（生活。遊記。插畫。故事）: [Blogspot教學]加Facebook徽章

2014年1月22日星期三

[Blogspot教學]加Facebook徽章

之前教過大家加Google+徽章，今天按網友提議，談談我的Facebook徽章（提供專頁連結與「like」按鈕）吧～

圖1）豆丁式Facebook徽章

官方Facebook徽章

介紹我的Facebook徽章前，不得不告訴大家最簡單的方法﹣﹣直接使用Facebook的徽章設計：

網址：https://www.facebook.com/badges/page.php

然後，按網頁指示做就可以了～相當方便～

豆丁式Facebook徽章

注意：如果你一直在文章使用Facebook like（參考《在每篇文章顯示like或+1》），請略過步驟1至3。

步驟1）到「範本」＞「編輯HTML」

步驟2）貼Facebook的程式碼：以Ctrl+F尋找 <body ，然後在 <body那行文字的後面加上以下程式碼：

<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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

步驟3）儲存範本的程式碼

步驟4）到設計平台，在「版面配置」頁選出心水位置，按「新增小工具」

步驟5）在跳出來的頁面選擇「HTML/JavaScript」：

步驟6）在標題處填寫自己喜愛的標題。豆丁的標題是「我的Facebook」（參看圖1）～複製並修改以下程式碼後，貼到大空白處，按「儲存」，成功！^^

＊記得修改引號(" ") 內的東西，但不要刪除那些引號("")：

<a href="Facebook專頁網址" target="_blank"><img src="圖片網址" style="border: 0px;" width="徽章寬度" /></a><br/><div class="fb-like" data-href="Facebook專頁網址" data-send="true" data-layout="button_count" data-width="200" data-show-faces="false" data-font="arial">
</div>

＊如何尋找圖片網址？把圖片上載到Blogspot或Facebook後，按滑鼠右鍵，複製圖片網址就可以了～^^

＞＞繼續閱讀《Blogspot教學》

＞＞你可能想閱讀：
＊《被洋化的蘿蔔糕》
＊《「世界瀑布之都」系列：冰雪瀑布百看不厭》
＊《不要新年願望》
＊《開心黃頁》
＊《何時用Google+？何時用Blogger簡介？》