17 October 2011

在Blogger每篇文章的前後都放上FB讚按鈕(2014/6月更新)

我參考了網友的這篇文章,也成功地在每篇文章前(標題後)加上 Like ,

但我也想在文章末尾加上 Like ,怎麼辦?其實很簡單。


進入【設計】編輯【HTML】,打勾【展開小裝置範本/Expand Widget Templates】,

搜尋之後會找到兩個 <data:post.body/>

想在每篇文章前面加上 Like,就把語法放在第一個 <data:post.body/> 前面

想在每篇文章結尾出現 Like,就在第二個 <data:post.body/> 後面加上一樣的語法就可以了。



P.S. 雖然不是很懂 html,

但是我發現要讓 Like 在文末且又不會出現在首頁的「文章分界處(Jump Break)」的話,

語法要放在第二個 <data:post.body/> 後。


2011/10/20 不如意更新

重新套用版型之後,不知道為何照著上述的方法,

想要在文章結尾放 Like 又不會出現在「閱讀更多/Read more」之前居然失敗了,

文章結尾不再出現 Like。



我試過無數次我想得到的方法,也 google 過其他人的方法,可是都不管用。

唯一不變的只有標題後文章前的 Like 是沒問題的。

但我還是很想在文章結尾放 Like,所以我不管了,

就把語法放在第一個 <data:post.body/> 後面,有點缺陷也是沒辦法的事。

哎,人生嘛。



如果版面是深色的,要把下面語法中的「light」改成「dark」,

不然可能會看不到這排「Be the first of your friends./成為你朋友中第一個說這讚的人。」
<iframe allowtransparency="true" expr:src="&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=500&amp;action=like&amp;colorscheme=light&quot;" frameborder="0" scrolling="no" style="border: none; height: 35px; overflow: hidden; width: 450px;"></iframe><div style='clear: both;'/>

(單引號或雙引號都沒關係,儲存之後動會轉換成一致的。至少我的是這樣。)


順便說一下另外一種把 Like 放在文章標題後的方法,我命名為「標題緊跟法」,

因為那個 Like 真的跟標題貼很緊......,有興趣的人可以試試看。


一樣從設計 >> 修改 HTML >> 展開小裝置範本,搜尋 <div class='post-header-line-1'/> ,

按下 Enter 從下一行開始貼上上述語法,預覽,沒問題就儲存退出。

每次修改 HTML 之前先備份一下比較保險。


結論:我個人是覺得放在 <data:post.body/> 後面的方法比較好看。


2011/12月更新

結果我還是受不了 Like 那一排出現在「Read more」前面,所以我還是修改了 HTML。

搜尋 <div class='post-footer'>,會找到兩個,我把語法放在第一個後面

另外我發現那排 Like 原來一直沒有完整顯示,所以試著調整高度,結果成功了。

把語法裡的 height: 35px 改成 70px 即可。


2011/12月再度更新

語法放的位置跟前面講的一樣,放在第一個 <data:post.body/> 前面

多了「+1」之後變成:

<!-- 將此標記放在您想要顯示 +1 按鈕的位置 -->
<g:plusone/>

<!-- 將此顯示呼叫 (render call) 放在適當位置 -->
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Facebook Like+Send button code -->
<script src='http://connect.facebook.net/en_GB/all.js#xfbml=1' type='text/javascript'/>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button code End -->
<!--clear for facebook like button -->

<div style='clear: both;'/>



(淺綠底色為「+1」,淺藍底色為「Like & Send」,再加上淺紅底色語法)


※「Like & Send」按鈕語法取自【海芋小站】,感謝。
※「Google+1」按鈕取自 Google 網站(語法可能會更新)


2014/6月久違的更新

換了新背景之後,不小心把原有的外掛刪掉了,一切重來。要把 Facebook 讚分享鈕加回來,卻發現放在第一個 <data:post.body/> 前面無效!

我要的是在每篇文章標題下、文章前置入按鈕,因此要搜尋第二個 <div class='post-header'>
 <div class='post-header-line-1'/> 下貼上語法(完整語法如上述 2011/12月提到)。

文章後我只想置入 FB 讚按鈕則是搜尋第一個 <div class='post-outer'>,在 <b:include data='post' name='post'/> 下貼上以下語法(只是修改一點地方):

<!-- Facebook Like+Send button code -->
<script src='http://connect.facebook.net/en_GB/all.js#xfbml=1' type='text/javascript'/>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='standard' send='false' show_faces='false' width='450'/>
<!-- Facebook Like+Send button code End -->

終於讓我試驗成功。

※ 語法位置參考【張文華教授的網路行銷研究室】,感謝。

No comments:

Post a Comment

謝謝鼓勵和指教 :)