PIXNET Logo登入

421244103

跳到主文

歡迎光臨c8cc168在痞客邦的小天地 Blogger HTML 技巧 **智障肥強**

部落格全站分類:不設分類

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 8月 24 週六 201322:35
  • Blogger 嵌入 Facebook Comments 超級簡易版

Blogger 嵌入 Facebook Comments 超級簡易版
<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));



document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');</script>



後台管理版
1.首先要去 Facebook 開發人員網頁建立一個新的應用程式(可按我前往)

2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID,方法如下:


Facebook查看個人首頁,如果網址是以下這種,那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱

代表你的個人首頁已經命名過了,那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱

進去後會看到「"id":"數字"」,那串數字就是你的帳號ID。

3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾,開始艱辛的修改程式碼的步驟(變動前最好先將整份範本備份一下)。

(可按下Ctrl+F)搜尋 "<head>" (是""裡的字串不包括""),在這行下方新增一行貼上這兩行:(記得帳號ID和應用程式ID要置換成你剛剛取得的)

<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>

4. 搜尋 "<body" (是""裡的字串不包括""),在這行下方新增一行貼上以下的程式碼:
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '你的應用程式 ID',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        FB.Event.subscribe('xfbml.render', function(response) {
        });
        FB.Event.subscribe('auth.sessionChange', function(response) {
            // 當 Facebook session 改變時通知
        });
        FB.Event.subscribe('edge.create', function(response) {
            // 當有人按讚時通知
        });
        FB.Event.subscribe('comments.create', function(response) {
            // 當有新留言時通知
        });

    };
(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/all.js#appId=你的應用程式ID&amp;xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼,通常建議都放每篇文章結束後的下方,所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括""),找到這個位置,在下面新增一行貼上這行:

<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>





而我們辛辛苦苦這麼多做這麼多步驟,無非就是為了可以管理呀(不然就用超級簡易版就好了)!按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了,或者你也可以去專屬的後台網站去管理,網址是:https://developers.facebook.com/tools/comments。




如上圖藍色部分,如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的,如果這塊有奇奇怪怪的錯誤資訊,代表你有哪個地方沒設對,可以去 Debugger網站抓一下 bug,網址是:https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區,代表你有哪個環節有問題,請自行照上面的錯誤提示去修改囉!修改完再測一次,紅色區塊消除的話,代表設定成功囉!



(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(16)

  • 個人分類:Blogger-留言嵌入
▲top
  • 8月 24 週六 201300:03
  • 隱藏 修改 本 bogger CSS

在 Blogger 後台 → 新增小工具 →  HTML/JavaScript
加入下方 CSS
<style type='text/css'>
body {             /*全版背景圖案*/
background-image:url("https://lh3.googleusercontent.com/-eNDfdkO5YEA/U6tz9ceyZqI/AAAAAAAABXM/lmWdVlZ3HkM/w100-h71-no/1030178739_t.jpg");
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(6)

  • 個人分類:Blogger-隱藏修改 CSS
▲top
  • 8月 24 週六 201300:00
  • 標籤(分類)變成下拉式選單

將Blogger標籤(分類)變成下拉式選單
本網誌頂部有下拉拉式選單 例子。 
此時再『開啟小裝置翻本』中勾選,之後搜尋以下片段:
<ul>
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(75)

  • 個人分類:Blogger-下拉式選單
▲top
  • 8月 23 週五 201323:59
  • document


document.body.appendChild(oTag)//body-主體子對象
document.body //指定文檔主體的開始和結束等價於body>/body>
document.body.bgColor //設置或獲取對象後面的背景顏色
document.body.link //未點擊過的鏈接顏色
document.body.alink //激活鏈接(焦點在此鏈接上)的顏色
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類:documen-1
▲top
  • 8月 23 週五 201323:57
  • 取消 捲軸


overflow:控制當內容超過顯示區域時捲軸的顯示
overflow-x:x捲軸的顯示
overflow-y:y捲軸的顯示
捲軸顯示有四種狀態
visible(預設):內容完全顯示不嵌入顯示區域
auto:內容嵌入顯示區域,並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域,水平捲軸會出現但視情況顯示可捲動或不可捲動
hidden:內容嵌入顯示區域,捲軸不會出現 取消 捲軸
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(4)

  • 個人分類:scroll
▲top
  • 8月 23 週五 201323:54
  • document

(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類:document-1
▲top
«1...78

ck

文章分類

  • youtube (4)
  • 網頁地圖 (1)
  • table (1)
  • scroll (1)
  • padding (1)
  • ASCII (1)
  • Blogger-下拉式選單 (1)
  • documen-1 (1)
  • Blogger-隱藏修改 CSS (1)
  • Blogger-留言嵌入 (1)
  • setTimeout (1)
  • event.keyCode (1)
  • input file (1)
  • checkbox (1)
  • a href (1)
  • 水平分線 hr (1)
  • 管理員-MP3 (1)
  • HTML-GO TO (1)
  • getMouseXY (1)
  • GO TOP (1)
  • document-属性对照 (1)
  • Blogger-版面寬度 (1)
  • document-1 (2)
  • 焦点選擇 (1)
  • substring() (1)
  • getSeconds (1)
  • hover (1)
  • Blogger-樹狀標籤 (1)
  • documen-焦点選擇 (1)
  • 管理員-講道 (1)
  • document-網頁螢幕 寬高 (1)
  • small (1)
  • class (1)
  • DIV (1)
  • border (1)
  • margin-top (1)
  • float (1)
  • 可收合面板 (2)
  • visibility (1)
  • HTML-導入檔案 link css js (1)
  • Color Code (1)
  • Mouse (1)
  • input (1)
  • 框架及背景 (2)
  • 管理員-YouTube (1)
  • 管理員-CSS (1)
  • 管理員-聽歌 (1)
  • 管理員-推 (1)
  • Blogger-下拉式選單相簿 (1)
  • random() (1)
  • 文字 (1)
  • marquee (1)
  • 彈出視窗 (1)
  • 管理員-金句 (1)
  • img (1)
  • title (2)
  • audio (1)
  • 輸入及選擇 (4)
  • select option (3)
  • &lt;!--&gt; (1)
  • a download (1)
  • abbr title (1)
  • ul li (1)
  • 未分類文章 (1)

最新文章

  • list-style-type:none;
  • YouTube 自動改變螢幕大細
  • YouTube 播放清單
  • abbr title
  • a download
  • select option 下拉式選單

熱門文章

  • (563)三層橫的下拉選單按鈕

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: