[Blogger] 如何在文章側邊加入浮動式的社群網站分享按鈕


前幾天介紹了如何在Blogger網誌中加入浮動式的Facebook粉絲框,今天繼續介紹另一個也很常見的浮動式社群按鈕,要達到這種效果Google一下就非常的多了,而我同樣也選出一個比較方便套用的語法給大家參考,這語法的原始出處是來自於「BloggerSentral」,別被這語法給嚇到,其實要套用時一點也不複雜,只要依照本文的說明進行即可,呈現的效果可參考下圖或至我的Demo網站實際觀看

推薦閱讀:[Blogger] 在網頁側邊加入浮動式Facebook粉絲團外掛Widget,三分鐘搞定

套用語法的步驟

套用的步驟很簡單:請至Blogger後台→選擇「版面配置」→「新增小工具」→建立「HTML/JavaScript」並把下面的語法貼入後儲存即可,就這麼簡單啦

<!-- floating share bar Start bloggersentral.com--> <style type="text/css"> #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;} </style> <div id='pageshare' title="Get this from BloggerSentral.com"> <div class='sbutton' id='like' style='margin-left:8px;'> <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'));</script> <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div> </div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> </div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End -->

客製化調整

上面的語法當然不可能適用每一個人,所以按鈕出現的位置可能會有一點出入,因此我們再來要稍微的做一些調整,以符合自己網站的版面需求:

  1. 調整語法bottom」後面的數值:當這個數字越大時,那麼浮動按鈕就會越往上
  2. 調整語法margin-left後面的數值:這是用來調整浮動按鈕的左右位值,如果負值越大,那麼就會越靠左,負值越小則越靠右,所以我們只要把這個數字調整一下,就可以貼齊我們的發文區或想要放置的地方了
  3. 每一個分享按鈕都是用以下語法包起來的,可以自行調整排序或者把不要的按鈕拿掉,例如在台灣Stumbleupon、Digg目前已經不流行,各位就可以考慮去掉

<div class='sbutton'>
BUTTON CODE (按鈕語法)
</div>


  • Jerry

    想請教一下:

    本文章的【套用語法】 之 語法,是否都「看不見」???

    (不知道 是我電腦的關係 看不到? 還是? 套用語法 已經不見了?? )

    煩請指點迷津

    感恩

    • 不好意思,這是我搬家後的後遺症,已經修正囉!謝謝告之!

      • Jerry

        你好強,看你的部落格,偷學到了很多,

        煩請 有空 多寫文章、好讓我 可以不斷的偷學。(呵呵)

        感恩

        • 我不強喔,你過獎了,這些都不是我的原創呀,我頂多是整理分享而已呀,強的是原作者 XD

      • Jerry

        呵呵。3Q

  • Joanne Chen

    請教一下~

    (我是語法白癡)

    我按照了步驟套用語法,有成功顯示,可是卻無法像你的部落格一樣,只出現在點進去的文章側邊,Facebook的讚鈕按了之後是like部落格本身,無法單獨按文章(這樣解釋不知道清不清楚,)不知道是否是我哪邊有出錯 .. ?

    還有我現在看不到套用的語法了 Orz(使用chrome)

    • 這個會自動偵測你所在的位置,如果你在首頁按讚,那就是首頁,若你進入文章後按讚,就會是針對單篇文章來處理。因為本文的範例是直接加在Javascript的小工具,所以會首頁、單篇都顯示,若你要單篇顯示,那麼可能要參考加一下此篇文章裡面的作法:http://goo.gl/NeN7NM
      至於看不到語法,可能是我剛剛在修改文章的原因,目前我看應該是正常的

      • Joanne Chen

        大感謝!現在頁面顯示出來是可以自動偵測的, 但是實際操作去fb的活動記錄看卻沒有顯示有這個動作 …. (可是按你的這一頁就有 QQ 不知道哪裡出了問題)

        • 方便給我網誌的網址嗎?我這個網站現在是在Wordpress,實際Demo的話,可以看:http://jinnsdemo.blogspot.tw/

          • Joanne Chen

            我是用blogspot, 網址是
            http://hazureru.blogspot.tw

            我有去demo喔, 你的demo站也是可以的

            太感謝你~~

          • 我猜測是你的樣版有問題喔,你可以先換個樣版試試

          • Joanne Chen

            (落淚)謝謝你!我成功了~~~~(跪拜)

          • Guest

            發現一個小問題, 我設定完成,確定運作正常,之後再到範本裡面做別的設定,就會又無法使用 .. 又要重新套用範本設定一遍。

  • Sarah Hsu

    您好,請問裝上去的浮動「讚」,可以和原本文章中裝的「讚」合併計算嗎? 之前累積了一些點擊但不知道要怎麼讓它顯示在浮動的按鈕上。
    另外,按讚之後有顯示是否要轉貼到FB,按確定之後卻沒有反應,請問您知道該怎麼修改這個問題嗎?謝謝~

    • 1.跟著網址走的,應該會合併才對喔
      2. 檢查一下你的版型是否有問題

      • Sarah Hsu

        謝謝您 但我現在沒辦法換別的版型,所以轉貼的部分就沒辦法修改了嗎?
        「讚」的問題,我後來發現有的文章有合併有的卻沒有,不知道您有沒有遇過這樣的狀況?
        另外想請問您,如何在解析度較低的時候,能出現橫向捲軸讓浮動按鈕能出現呢? 現在雖然會自動出現橫向捲軸,但無法拉到最左邊 顯示出這些浮動按鈕。 謝謝您

        • 1. 建議你先用Blogger內建的樣版測試看看,是不是這個浮動式語法有問題,這樣就可以確保是不是版型所造成,通常合併會跟著網址跑,不同的語法是有可能會造成讚數不同的
          2.捲軸部分建議你到「https://plus.google.com/u/0/communities/103807083735607134704」的社群中詢問,裡面有很多熱門的網友會協助喔

  • Naomi Liu

    謝謝分享 成功ㄌ 研究好久ㄏ