Neko．捏扣 心生活小札

捏扣都成功了，你們一定也可以XD 我是一個不折不扣的電腦白癡，但是想要把一件事弄好就會忍不住給他鑽到牛角尖裡面，於是原本是單純想貼個FB拉霸式名片框到痞客邦部落格，後來朋友說想要隱藏式的我又忍不住研究下去，想說分享給大家乾脆基本款也來一下～(不知不覺就這樣從白天到了黑夜O.O)

 

搜尋了很多教學跟看了很多語法天書以後，終於找出最簡易的方法啦！

保證你不用懂CSS語法也能輕鬆完成～

 

先來學學痞客邦的樣式管理～如果你很孰悉基本上就可以直接選款式製造語法囉！！！

進入後台管理照著下圖做(附上文字說明)

1.側欄管理> 2.新增欄位> 3.寫上側欄標題> 4.貼上語法> 5.送出> 6.記得把建立的版位從版位暫存區移到你要放的側欄區塊

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三種樣式取得語法方式如下：(選一個你喜歡的樣式吧!)

第一款：超簡易，基本款的FB名片貼

登入FB後從這裡點à https://www.facebook.com/badges/

選” 粉絲專頁名片貼”(目前FB的功能只剩下個人檔案名片貼了-2017.04.11更新)

(右上編輯名片的地方也可以勾選名片貼你想呈現的方式或資訊)

 

第二款：有拉霸～可以直接在部落格瀏覽FB內容，方便又豐富

我已經幫大家把語法整理好了，只要到粉絲專頁找出你粉絲團的「帳號」＆「名稱」貼到下面相對應顏色的地方就大功告成，不用再另外研究囉！！！

語法：

<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/zh_TW/sdk.js#xfbml=1&version=v2.6";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/Neko.Shismile/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Neko.Shismile/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Neko.Shismile/">Neko微營養小札

 

用我家咕啾的粉絲頁示範一下：

改好語法～燈燈燈

如果想知道語法來源在這裡唷：https://developers.facebook.com/docs/plugins/page-plugin

 

第三款：輕巧的~FB粉絲團浮動外掛 (邊緣隱藏式)

這個很神奇～平常是乖乖地待在邊邊的FACEBOOK小標籤，不會隨頁面滾動而移動，滑鼠移過去後就可以看到粉絲團的資訊

你以為很複雜嗎～我也是！但是搜尋超久還去看了外國網站複製語法貼上卻只有一個不會動的ＦＢ標籤

打算偷偷放棄這一款時～找到了一個佛心來著的網站，於是捏扣又貼心的整理了語法：

<script id="float_fb" src="//pic.sopili.net/pub/float_fb/widget.js" data-href="https://www.facebook.com/Neko.Shismile/" async></script>

這次只要把粉絲專頁帳號替換~名片框就ok啦！！！(如果忘記帳號，請看第二款有教怎麼找唷)

來源網址在這裡à https://tw.piliapp.com/pilipress/float-fb/

 

完工！！！

好佩服那些寫教學文的人噢！！

原本只是發現了簡單方法想要單純分享，而且又剛好沒看到三款綜合教學想整理一下，

但是部落格新手如我寫到一半真的有點想吐血阿～～～

深怕各位客官會看不懂又怕太複雜ＸＤＤ

總之堅持住寫完了～希望以後寫文章也能有如此毅力（汗）

 

如果喜歡捏扣的文章，歡迎按讚、轉貼連結分享或留言唷～

也歡迎加入粉絲團一起聊聊天！

(現學現賣~文章中也可以插入第一款和第二款名片貼唷!只要把語法貼到用"原始碼"檢視時對應的位子就可以呈現了

Neko微營養小札

一併推廣你的粉絲專頁