2014年5月23日 星期五

Xuite 綜合留言板 (含 Google+ 與 Facebook)

2014.8.7 公告:因 Xuite 新增官方 FB 留言板,導致本文工具目前無法執行,如果對留言版分頁有需求的讀者,請留言告知,會更新程式碼。

這個留言板分頁工具包含三個留言板分頁:

1. Xuite 原生留言板
2. G+ 留言板
3. FB 留言板

其中 G+ 與 FB 留言板想要在 Xuite 安裝都是很困難的事,不過這個小工具可以讓你三個願望、一次滿足!




一、安裝程式碼


請到後台 → 編排欄位(含自由欄位) → 新增自由欄位 → 複製貼上以下程式碼:

<script>
var xuiteFB = {};
xuiteFB.email = "waynefu.g@gmail.com", // 填入自己的 email 可收到留言通知
xuiteFB.notify = "N", // 若要收到自己的留言通知請改為 Y
xuiteFB.admins = 351945654935259, // 可填入自己的 FB 管理者 ID
xuiteFB.numposts = 5, // 最多顯示幾則留言
xuiteFB.color = "light", // 預設值適合部落格底色為淺色;若部落格底色為深色, 字串請改為 "dark"
xuiteFB.sheet = "dEJjWGJDWWlDRl9YZld0ZDJGN2tlN0E6MA";

(function () {
var url = "https://googledrive.com/host/0BykclfTTti-0ZnpXa185Z1VkVDg/xuite-comm-tab-140523-min.js",
script = document.createElement("script");
script.src = url;
document.documentElement.firstChild.appendChild(script);
} )();
</script>

<div id="xuiteCommTab" style="display: none;">
<div class="stab-menu" id="sTab1" style="height: 35px; margin-top: 50px;">
<b class="stab-out" onclick="Side_Tab.toggle('sTab1', this);" style="font-size: 20px; color: orange; padding: 2px 5px; margin-right: 15px; margin-left: 10px;">+</b>
<span class="stab-in" style="font-size: 20px;" title="使用 Xuite 留言系統">
<img src="http://2.bp.blogspot.com/-OyP41Z1oJSY/U38ZMKoSlGI/AAAAAAAAJgc/QCk-u4kTYFs/s20/xuite.png" style="align:left; padding:0 px; vertical-align: -3px"/> Xuite留言
</span>
<span class="stab-out" style="font-size: 20px;" title="使用 G+ 留言系統">
<img src="http://4.bp.blogspot.com/-Dgk2M0JulZY/Ue0Dyqxsx1I/AAAAAAAAHYQ/nl_x4f7IYw8/s20/gplus.png" style="align:left; padding:0 px; vertical-align: -3px"/> G+留言</span>
<span class="stab-out" style="font-size: 20px;" title="使用 FB 留言框">
<img src="http://4.bp.blogspot.com/-lT2dZxmONZA/Ukpwn2GXYOI/AAAAAAAAH1M/ybhf9b_PAzQ/s20/FACEBOOK.png" style="align:left; padding:0 px; vertical-align: -3px"/> FB留言</span>
</div>
</div>


1. 以上的參數,請參考綠色的備註的提示來修改,可讓 FB 留言板發揮更好的效能。


2. 其中 xuiteFB.admins 這一項,請進入這個網址:


輸入 Facebook 帳號的網址後,按下「Lookup Numeric ID」即可取得管理者 ID。


3. 而藍色的 js 檔字串 "https://googledrive.com/host/0BykclfTTti-0ZnpXa185Z1VkVDg/xuite-comm-tab-140523-min.js",由於前陣子發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者參考以上文章連結,自行將 js 檔分流



二、安裝 CSS


請到後台 → 面板樣式(佈景+CSS) → 面板樣式(佈景+CSS) → 在 CSS 碼最後一行的後面,複製貼上以下程式碼:

/* 分頁 start*/
.stab-menu {
margin: 0px;
height: 25px;
border-bottom: 1px dotted #ccc;
}

.stab-in {
color: #333;
font: bold 14px arial;
vertical-align: 5px;
border: 2px solid #8abeb7;
border-radius: 5px;
margin-right: 5px;
padding: 4px;
cursor: pointer;
background-color: transparent;
}

.stab-out {
color: #777;
font: bold 14px arial;
vertical-align: 5px;
border: 1px solid #8abeb7;
border-radius: 5px;
margin-right: 5px;
padding: 2px;
cursor: pointer;
background-color: #dde3dc;
}
.stab-out:hover {
background-color: #fffff5;
}
/* 分頁 end*/

/* 按鈕 */
.buttonAll{
cursor: pointer;
display:inline-block;
text-decoration:none;
font-weight:bold;
color:#fff;
color:rgba(255,255,255,1);
padding: 1px 5px;
border-style:solid;
border-width:1px;
border-radius:4px;
box-shadow:0 1px 1px rgba(255,255,255,0.5) inset;
}
.buttonAll:hover{
box-shadow:0 1px 1px rgba(255,255,255,0.5) inset,0 0 2px rgba(0,0,0,0.2);
opacity:0.9;
}
.buttonAll:active{
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.4) inset;
opacity:1;
color:rgba(255,255,255,0.5);
}
.buttonGrey{
cursor: pointer;
border-radius: 4px;
background:#f2f2f2;
background:rgba(0,0,0,0.05);
border-color:#eee;
border-color:rgba(0,0,0,0.1);
color:#999;
color:rgba(0,0,0,0.5);
}


最後按下「確定送出」→「確定儲存」即可。

想要先測試一下效果,請前往下面這個連結:




三、常見 FAQ


若操作上有任何問題,會持續在此補充。

4 則留言:

  1. 太感謝了~
    我先研究一下再開始動手:)

    回覆刪除
    回覆
    1. 好的,任何意見都歡迎回報 ^^

      刪除
  2. 我完成囉.........果然我還是需要假日
    版面看起來乾淨多了!
    大感謝^^

    回覆刪除