2013年4月24日

【Blogger|筆記】單篇文章的側邊擺放浮動推文 / 分享按鈕(Float Buttons)

⇩分享本文⇩
不少部落格都有加裝這種浮動式分享按鈕(Float Buttons),像「可隨著視窗移動的社群分享按鈕」的作法是從直接從範本中修改,但其實有另一種方式可用-新增「HTML/JavaScript 小工具」。

由於中文搜尋結果~教學文章好像不多(關鍵字問題?),所以筆者就獻醜了...。使用情況就像下圖(直接看文章左側也一樣啦)。


步驟如下

《1》依照自己的需求取得按鈕的程式碼,以本文為例僅提供 Facebook 和 Google+ 兩種。
  • 〈Facebook〉請到「Facebook developers」選取樣式並取得程式碼。如下圖所示,於左側框架選擇自己想要的樣式,樣式結果會顯示在框架的右上角,確認後按下「Get Code」。


《2》將前述取得的程式碼整合後,至 Blogger 後台的版面配置新增「HTML/JavaScript 小工具」,貼入如下面的程式碼~最後儲存即大功告成。(PS.由於概念來自 BloggerSentra,所以就不拿掉人家附註的東西了,很 care 的人請自己想辦法)


<!-- 浮動按鈕 Start-->
<style type="text/css">
#pushbutton {position:fixed; bottom:15%; margin-left:-100px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pushbutton .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pushbutton' 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="60" data-show-faces="false"></div>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'zh-TW'}</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>
<!-- 浮動按鈕 End-->


《補充說明》
1.「pushbutton」可自行更名,不要跟原有的衝突即可。其他部分也可更名,但未免麻煩就直接套用了吧!

2.「bottom:15%;」數字越大,顯示位置越高。

3.「margin-left:-100px;」負數越大,顯示位置越靠左。

4.「background-color:#fff;」是背景色,請自行變更。不需要背景色就拿掉。

5.按鈕的語法是用下述方式包起來,還需要新增其他按鈕的可依樣畫葫蘆繼續添加。
<div class='sbutton'>
.....我是被包起來的語法.......
</div>

6.「藍色字」部分就是從「Facebook developers」取得的。

7.「橘色字」部分則是從「Google developers」取得的。

8.「zh-TW」是按鈕語系部分,想要英文就變更成「en_US」...依此類推。

9.如果使用後按鈕沒法正常顯示,那就需要動到範本文件了。請到後台範本...

找到這一行
<body expr:class='"loading" + data:blog.mobileClass'> 或者這一行
<body>
將《2》整段程式碼,再次貼到「<body expr:class='"loading" + data:blog.mobileClass'>」或「<body>」的下面即可。

10.不知道是個人範本改到出事還是怎樣?測試結果一定得把「HTML/JavaScript 小工具」貼在下圖的位置,按鈕才能正常顯示。原因筆者不清楚~哈!


11.既然這是新增「HTML/JavaScript 小工具」的作法,就會使版面出現工具名稱,既不美觀也很奇怪。解決方式就是進入後台範本文件,找到剛剛新增的小工具~大概長相如下。將「<h2 class='title'><data:title/></h2>」這一行用附註語法「<!-- ... -->」包起來,這樣就不會見到看似突兀的空白小工具杵在頁面上了。

<b:widget id='HTML4' locked='false' title='浮動分享按鈕' type='HTML'>
..............
<!-- <h2 class='title'><data:title/></h2> -->

PS.其實「HTML/JavaScript 小工具」若沒有命名標題就不需要此項作法,但建議加上命名來增加範本文件與版面配置的辨識度。

12.本文的作法會讓按鈕出現在首頁、單篇、搜尋...各種頁面,但如果只想讓按鈕出現在單篇文章中呢?畢竟這種推文按鈕主要作用就是顯示該篇文章被「推」了幾次,讓它出現在首頁、搜尋頁面好像沒啥幫助,是吧?所以可以在《2》整段程式碼加上頁面判斷語法,如下述:

<b:if cond='data:blog.pageType == "item"'>
《2》整段程式碼,效果只會呈現在單篇文章中。
</b:if>

黃色文字部分可替換如下:
index」首頁、標籤、搜尋頁面
archive」歷史文章列表
item」單篇文章頁面
static_page」靜態頁面(網址含 "/p/" 的頁面)

PS.其實首頁有按鈕也沒什麼啦!可看成是「推」部落格本身囉!






1.「可隨著視窗移動的社群分享按鈕
2.「如何在文章側邊加入浮動式的社群網站分享按鈕
3.「Adding floating social media sharing buttons
4.「Blogger 頁面判斷式(PageType)的各種應用

14 則留言:

  1. 謝謝!!!!!!!!!!!!!!!!!!!!!!

    真的發了文耶~~~

    熱心助人的阿啦~~~~~

    ^^ 感謝

    回覆刪除
    回覆
    1. 呵~沒弄成文章不好說明,順便自己做個筆記,試試看吧!

      刪除
  2. 但... 你好像加上了一些code

    不能copy 阿

    回覆刪除
    回覆
    1. 你拉到底下的參考,到3.「...」的網址去copy,一樣的。多的按鈕部分你再回來對照這一篇。

      刪除
    2. 行啦行啦~~~

      很好啊

      阿啦! 我給你十萬個讚!

      刪除
  3. 提醒你一下,在我的的螢幕(1280*800)內,側邊浮動欄會被切掉唷^^

    回覆刪除
    回覆
    1. 因為某些因素我把版面調整的比較寬,所以文末又加了按鈕供訪客使用,謝謝提醒喔!
      倒是我把兩個範本文件(正常與不正常)對照了一整晚,也看不出哪裡出問題導致SyntaxHighlighter無法正常運作...,呵~宣告放棄 XD

      刪除
  4. 寫得很仔細,看要不要發來社群啊~ ^^

    回覆刪除
    回覆
    1. 我這麼肉腳...發到社群不好意思 >"<

      PS1.我放棄SyntaxHighlighter的複製功能了,把迷你組件全勾選回復預設~結果也一樣,
      繼續使用偷吃步的方式好了 XD

      PS2.倒是對照了一整晚好像意外修好了串聯摺疊回覆的老問題,現在回覆不用一直掃餅乾,呵~意外收獲,希望不是錯覺。

      刪除
    2. SyntaxHighlighter的複製功能?

      就是甚麼的功能?

      刪除
    3. 那阿啦你有用嗎?

      刪除
    4. 1.沒 0.0 ,用不了,原因請看 #3 - #4。
      2.主要是查找上述原因,還有串聯回復的舊問題。

      btw~我這幾天才發現 slideshare 變成只有註冊者才能下載(以往的「搜尋」功能也沒了),所以把舊的 PDF 轉到 Google 的雲端空間了,它上傳 PDF 檔案能內嵌,共用後能選擇是否提供下載,給你參考。

      刪除

【回覆須知】
✔ 請注意網路禮儀,禁止口出惡言、廣告張貼。
✔ 可用語法請參考這篇
✔ 與本文無關的留言請利用右側的「留言板」,反之請盡量留言在相關主題。
✔ OpenID留言,填入自己的網站、部落格網址即可。
✔ 圖片消失、檔案連結錯誤 / 更新,歡迎留言告知。
✔ 其他問題、想法,也歡迎留言說說....☺。