幣圈日記

浮動版FB插件外掛試了了幾次終於成功了,這邊我將教學分享給大家使用,若有不清楚部分可以留言

文章更新日期:2022-5-26

我用自己痞客邦示範,這是已經完成facebook浮動

Step 1 開啟FB粉絲專頁複製網址

Step 2  開啟粉絲專頁外掛程式

1. 粉絲專頁外掛程式網址連結:https://developers.facebook.com/docs/plugins/page-plugin

2. 將剛剛複製FB粉專網址貼上

3. 取得程式碼

4.  IFrame複製

5.  IFrame  html 貼上 【頁尾描述】

Step 3

1. 複製 css語法 貼到後台 樣式管理

.fbbox {
  transition: 0.6s;
  background: url("http://pic.pimg.tw/blogbackup/1416463254-1526616050.png") no-repeat scroll left top transparent !important;
  display: block;
  float: right;
  height: 240px;
  padding: 0 0 0 46px;
  width: 292px;
  z-index: 99999;
  position: fixed;
  right: -260px;
  top: 15%;
}
.fbbox div {border: none;position: relative;display: block;}
.fbbox span {
  bottom: 12px;
  font: 8px "lucida grande", tahoma, verdana, arial, sans-serif;
  position: absolute;
  right: 6px;
  text-align: right;
  z-index: 99999;
}
.fbbox span a {color: #808080;text-decoration: none;}
.fbbox span a:hover {text-decoration: underline;}
.fbbox:hover, .fbbox:focus {right: 0 !important;}

2.  複製css語法貼在樣式管理最後一段

若有什麼問題歡迎留言 謝謝!!

相關文章:

FB粉絲頁嵌入側欄網址

痞客邦、部落格嵌入 浮動版FB粉絲團外掛

我用自己【幣圈日記】粉絲專頁做示範

Step 1 到臉書官方取程式碼

1. 先透過粉絲專頁外掛程式網址:https://developers.facebook.com/docs/plugins/page-plugin

2. 輸入自己FB粉絲專頁網址

3.取得程式碼 複製Code

Step 2 將程式碼貼到部落格後台

用頁尾描述編輯

標題:依照自己風格命名

內容:這邊有個小小重點是你複製 取得 iframe 整串程式碼 之後,我反綠色中間地方貼上去

<div class="fbbox" style="right: -292px;">
   <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcurrencydiary168&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>

痞客邦後台新增 側欄版位 ,就完成!!