嘿渼and淘皮皮

                   
大家是否注意到很多人的部落格裡面，在側邊的欄位上可以找到他們的臉書連結方框，看起來好厲害又好方便。

我太想要這樣的臉書按讚方框了，知道它叫做 Like Box名片貼之後，特別請教了我無所不知的"學海大帝"--> 網路，在知識無涯的茫茫網海裡，找到一些網友的分享文，實際操作之後發現並不困難。 不過在實驗的過程當中，覺得這些文章的作者都已經有某種程度的基礎了，中間有些小步驟還是讓我花了一點時間來弄懂，沒辦法呀~我是個商學系出生又步入家庭相夫教子有七年的宅媽，跟電腦不太熟悉之外，也跟"大家"脫節很久了XD。我遇到的問題可能對第一次想學的人來說也是個問題，所以決定把我學到的重新整理一下，看看能否減低初學者的無力感。

步驟:

1. 首先，將你的臉書Facebook的粉絲專頁(個人臉書也可)的連結網址複製下來
   例如我的粉絲團是 https://www.facebook.com/happymarysurprise

2. 接著登入個人的臉書，然後開一個新的頁面點開以下網址http://developers.facebook.com/docs/reference/plugins/like-box
    這個是Social plugins的Like Box網頁 (Social plugins屬於臉書系統內的應用，要先登入臉書，才能製作Like Box名片貼)
    在這裡，我們要設定欄寬欄高顏色……等等來取得”程式碼”。

    這個程式碼可以用在各家的部落格欄位裡面，就是這篇文章的終極目標囉^^~很重要，目前市面上的部落格平台有:痞客邦(Pixnet)、隨意窩(Xuite)、天空部落(Yam)、樂多(Roodo)、中時部落格(ChinaTimes)、聯合(udn)部落格、PChome…等。

進入連結的網址後~畫面呈現這個樣子的

都按照上面圖片說明填好之後
表格的最後有個 "Get Code"取得程式碼

按下它
就會出現我們要的程式碼囉^^
是不是很簡單!!!

可以看到上面有四種程式碼
大部分部落格平台都可以使用IFRAME
痞客邦這裡也是

現在這個程式碼的頁面先不要關閉
我們另外再開一個新的頁面，登入到自己痞客邦部落格
(別家的部落格也行)
然後到: 管理後台(右上大頭照旁的下拉式選單)-->部落格(畫面偏上方)-->側邊欄位設定(畫面左側)-->新增版位(在畫面右邊)
按下+新增版位就會出現這個畫面

標題可以依自己的喜好填入
有人填: 來臉書找我們 或是粉絲團標題  甚至直接說: 喂~按個讚吧  XD
自訂區塊內容就必須把上面說的"程式碼"複製貼上到這裡歐

按下"完成"或是"儲存"
你的"新增版位"的畫面右下方就會出現屬於你自己的 Like Box囉

因"新增版位"這一個區塊是暫存區
所有你不希望在部落格出現的功能都暫時放在這裡
方便日後想要用的時候可以拿來用
所以......把你做好的 Like Box拖曳到左方的使用中欄位裡面
這樣讀者到你的部落格就會看到它


這裡就是你部落格畫面欄位的地方會出現的內容物
並且可以調整位置
也許你想要放在"最新文章"的後面
就拖曳到"最新文章"跟"月曆"的中間
很簡單的
然後......記得要按下"完成"或是"儲存"
以免前功盡棄 ......

不過我在做的過程當中
發現很多痞客邦可套用的版型
它的欄位很狹窄
Like Box顯得太胖的都超出欄位之外了
Box就被切惹~!!!!
(這是我原先藍色的版型不理想  改成預設版型(粉色的  如圖一)才成功)

我甚至重複上面的步驟
把Like Box程式碼裏面的寬度width改小
(例如:  241改成200)
還是被切

又到部落格: 後台管理-->自訂樣式
試圖把"CSS 原始碼"裡面的側邊欄位的寬度改寬一點
(例如: 欄位在語法裡是 #Links width:200改成250)
仍舊一籌莫展  
一絲一毫的沒有改變

CSS部分太繁雜，像我沒有學過程式語法的人
不是只改個寬度就能解決的
牽一髮而動全身
只改了一個寬度 (#Links width:200改成250)
版面裡很多東西就走位了
不在它該在的地方@@|||

沒有想到   這個時候  最有效的方法
就是去: 後台管理-->樣式管理-->樣式選擇 裡面所有樣版一個一個試看看

聽起來也沒有多快速
但是......還是比你自己去改CSS快多了

現在的畫面就是我花了一番功夫找到的
(插畫/卡通類  裡面的樣版大部分都可以用  如果已經找累 也不排斥插畫類的話.......XD)
我的Like Box名片貼在這個版型上看上去還不錯耶~
雖然有點小切  但字都在

沒有想到教學文並沒有想像中的簡單
圖文要能搭配起來
並且兼具詳盡跟淺顯易懂
不是一次就可以寫好的
期間增增刪刪又改改
咻~~還好總算完成了 
沒有半途而廢 :)

不知道我這篇還可以嗎?