2014年4月17日 星期四

Blogger安裝Plurk噗浪Share分享按鈕(2)

Plurk噗浪Share分享按鈕的安裝,可分為CSS代碼與HTML代碼兩部份,HTML代碼部份,作法不難,直接從範本上著手,插入準備好的代碼即可,同時Mix把標題修改成網誌標題 - 文章標題排列的排列方式。



至於如何完成CSS代碼,可以參考:Blogger安裝Plurk噗浪Share分享按鈕,這篇文章。

由於Plurk噗浪Share分享按鈕有區分PC版與手機版,Mix使用的是PC版代碼,準備好的代碼如下:

PC版代碼
<a class='goog-inline-block share-button sb-plurk' expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot;  + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot; - &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a>

手機版代碼
<a class='goog-inline-block share-button sb-plurk' expr:href='&quot;http://www.plurk.com/m?qualifier=shares&amp;content=&quot;  + data:post.url + &quot; &quot; + &quot;(&quot; + data:blog.title + &quot; - &quot; + data:post.title + &quot;)&quot;' target='_blank' title='分享至 Plurk'>&#12288;</a>

至於要放在文章頂端或尾端,看個人喜好來決定,Mix是放在文章的尾端,與原本的分享按鈕放在一起,接下來Mix要來找到這部分位置的代碼。


  1. 範本。
  2. 編輯HTML。





Ctrl+F,搜尋這段代碼。

<b:includable id='shareButtons' var='post'>



發現這段代碼。




在<data:top.shareToPinterestMsg/></span></a></b:if>之後,插入代碼,然後儲存範本。



代碼加入之後的結果。




原先data:post.title,只會顯示文章標題Mix把它改成data:blog.title - data:post.title,是為了希望顯示網誌標題 - 文章標題,這樣的排列順序。

Mix接著就來測試看看,P按鈕的功能效果如何。

  1. 文章尾端有很多小按鈕,其中有個P按鈕,按下P按鈕。
  2. 接著彈出Plurk噗浪網頁,再按下Plurk按鈕,就是真正地發佈訊息。







最後,訊息成功地分享到Plurk噗浪了,同時也實現了網誌標題 - 文章標題排列的功能。




沒有留言:

張貼留言