2012/07/19

【Blogger Tips】 在部落格加入 可隨著視窗移動的社群分享按鈕




想讓讀者分享文章到社群網站(如 Facebook )時, 可以在部落格裡加入分享按鈕. 按鈕的安裝, 通常會放在文章標題旁,另外還有一種樣式, 是將按鈕清單放在左側,讓按鈕可以隨著視窗上下移動, 仍固定在指定的位置, 無論文章有多長, 都能隨時按下按鈕分享文章.



相關網站 參考文章: Add Floating Share Buttons Like Mashable to Blogger

1.設計--> 選擇修改 HTML, 勾選展開小裝置範本, 在 ]]></b:skin>, 之前, 加入 按鈕的 CSS.
#sharebox {
float: left;
margin-left: -80px;
background: #992211;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}


2. ]]></b:skin> 之後, 加入 jQuery 的引用.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

3. 在 </head> 之前, 加入 java script 程式碼.
<script type='text/javascript'>
$(document).ready(function() { var $sidebar = $("#sharebox"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });
</script>


4. 在 <data:post.body/> 前,  加入 Facebook 及 google plus 的分享按鈕程式碼.
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
 <div class='wdt'>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
   <fb:like font="lucida grande" expr:href="data:post.canonicalUrl" send="true" layout="box_count" show_faces="false" width="55"></fb:like>
 </div>
 <div class='wdt'>
 <g:plusone size='tall' expr:href='data:post.canonicalUrl'></g:plusone><script src='https://apis.google.com/js/plusone.js' type="text/javascript"></script>
 </div>
</div>
</b:if>


除了 Facebook 與 Google + 之外, 如果想放其他社群網站的按鈕, 可以再另外以 <div class='wdt'>與 </div>  包覆相關程式碼.

儲存後, 進入文章內容就可以看到效果了.

相關文章 :

6 comments:

Chu 提到...

初次拜訪您的部落格,內容好豐富啊~使用google部落格有一小陣子了!但還是不懂要如何去設定呢!

Skyvee Tsai 提到...

Chu,

謝謝您的留言, 逛過您的部落格, 您的手繪作品很豐富, 內容也很有深度.
blogger 一開始只提供很陽春的功能, 但是有很大客製化的彈性, 可以改成自己想要的樣式, 然而, 最近blogger 也在調整方向, 愈來愈平民化,開始推出許多內建功能, 以前需要外掛程式加的功能, 如最新文章, 最近回應, 現在只要將元件設進來就可以使用.
不知道您是希望什麼設定? ^^

Chu 提到...

不好意思...想請問的是,例如我曾在您的部落格留言,那麼您有回答的留言,是不是得回到您的部落格來看呢?或者需要做什麼連結或設定的呢?這塊專業知識個人實在是不懂~

Skyvee Tsai 提到...

Chu,

是的, 需要自行回來看, 或是 下方有個以電子郵件訂閱, 按下去後, 有回應就會以 email 通知.
但是這個回應很可能不會是只針對您提問的問題, 如果有其他人也在這篇文章留言回應, 您同樣會收到email. 做法是, 你先訂閱, 一旦收到email回覆後, 再上來按 "取消訂閱", ^^

h&d幸福小屋 提到...

請問 以前在奇摩部落格有被「訂閱」的功能,但現在格友要在blogger訂我的網誌,卻不知從哪訂?請教教我,感恩

Skyvee TSAI 提到...

您好, 關於訂閱的功能, 可以參考 http://www.skyvee.net/2013/09/rss-atom.html 這篇文章, 希望能對您有所幫助. ^^

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.