2009/08/16

在blogger 加入PLURK, Twitter, Facebook, funP, 黑米的推文按鈕




最近 facebook, plurktwitter 在台灣很紅, 尤其在這次莫拉克風災中,更扮演一個提供資訊交流的重要角色.既然已開始很多人使用,在部落格裡直接加入推文按鈕,更有利分享.這裡主要是分享如何在blogger平台,加入 facebook, plurktwitter, 及書籤網站funP, 黑米的方法.


依照放置位置分成兩種.

1.放在文章段落左右側的做法:在 <div class='post-header-line-1'/> <div class='post-body'> 之後,加入步驟3的程式碼.



2. 放在文章下方的做法:在 <p><data:post.body/></p> 之後,加入步驟3的程式碼.


3. 各推文按鈕的程式碼

<!-- 推文到PLURK -->
<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至plurk'><img src='http://sites.google.com/site/siteimgs/blog/plurk_share.png'/></a>


<!-- 推文到 facebook -->
 <script type='text/javascript'>
function fbs_click()
{u=&#39;<data:post.url/>&#39;;t=&#39;<data:post.title/>&#39;;window.open(&#39;http://www.facebook.com/sharer.php?u=&#39;+encodeURIComponent(u)+&#39;&amp;t=&#39;+encodeURIComponent(t),&#39;sharer&#39;,&#39;toolbar=0,status=0,width=626,height=436&#39;);return false;}
</script>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' onclick='return fbs_click()' target='_blank'> <img src='http://sites.google.com/site/siteimgs/blog/facebook_share.png' title='推到facebook'/></a>

<!--推文到 Twitter -->
<a expr:href='&quot;http://twitter.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推到Twitter'><img src='http://sites.google.com/site/siteimgs/blog/twitter_share.png'/></a>

<!--推文到黑米-->
<a expr:href='&quot;http://www.hemidemi.com/user_bookmark/new?title=&quot;
+ data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot; &quot;' target='_blank' title='推到黑米'><img src='http://sites.google.com/site/siteimgs/blog/hemidemi_share.png'/></a>

<!--推文到funP-->
<a expr:href='&quot;http://funp.com/pages/submit/index.php?title=&quot;
+ data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot; &quot;' target='_blank' title='funP'><img src='http://sites.google.com/site/siteimgs/blog/funp_share.png'/></a>


4. 按鈕圖片如有興趣使用,歡迎下載(點一下圖片,另存新檔).

下載
下載
下載
下載
下載
下載
下載

5. 按下推文按鈕, 會將分享文章的網址及標題自動帶入.

5.1 Facebook 推文後的畫面


5.2 twitter 推文後的畫面


5.3 PLURK 推文後的畫面




相關文章 :

10 comments:

tzuche 提到...

拿來用了,Skyvee謝謝!

tzuche

Skyvee 提到...

tzuche,別客氣. :)

Luke 提到...

一直想要这个功能,感谢Skyvee提供方法,不过我是大陆用户,估计还要添加上我们那常用的社会化网络书签服务,不知道能不能成功。。。:)

Skyvee 提到...

Luke,語法其實都很相似,只是不同的書籤網站,可能用的參數會有點不同.:)

joygene 提到...
作者已經移除這則留言。
joygene 提到...

我已完成推文按鈕了,超級好用,一次搞定!
請見http://joygene-life.blogspot.com/2010/08/13.html
如果想貪心一點,也想學Skyvee有個美美的推文按鈕邊框,不知該如何處理?謝謝!

Hengyi 提到...

Skyvee你好
不知道為什麼我套用這個格式之後
這個推文列它會跑在我文章的''閱讀更多''之前
請問有可以修改的方法可以教我 謝謝

skyvee 提到...

Hengyi,
請問你是加在 <div class='post-body entry-content' /> 之後嗎? 不然就試著加在div class='post-footer'之前.

Susu 提到...

請問一下要如何像本站一樣有浮動的分享按鈕

Skyvee Tsai 提到...

Hi, Susu,

可參考此篇文章, :) http://www.simplebloggertutorials.com/2010/07/how-to-add-floating-share-buttons.html

張貼留言

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