2014年2月12日 星期三

blogspot部落格安裝G+1及FB讚按鈕和對齊

教你如何在blogger的blogsopt部落格上,安裝G+1按鈕跟FB讚按鈕【圖文視頻解說】

Google +1按鈕及facebook like讚按鈕,在版面配置的顯示分享按鈕,就可以用出來,不過全黏一起,不好點擊,也沒辦法單獨選擇,想要的按鈕來使用。



這時我們可以找Google +1按鈕的代碼,及facebook like讚按鈕的代碼,在各別安裝,此處分成2個部分,會比較好處理。

Ⅰ、取得G+1按鈕,及FB讚按鈕的代碼

Ⅱ、將代碼插入至,需要顯示的地方

Google +1 按鈕的代碼 https://developers.google.com/+/web/+1button/?hl=zh-TW

使用基本網頁方案,由於blogspot部落格在head標頭已經有link rel='canonical'參數,我們只要加入size參數,因為要配合fb like按鈕,所以用medium。

<script type='text/javascript' src='https://apis.google.com/js/platform.js'>
{lang: 'zh-TW'}
</script>
<div class='g-plusone' data-size='medium'></div>

facebook like讚按鈕的代碼 https://developers.facebook.com/docs/plugins/like-button?locale=zh_TW





<body>下方插入代碼,請參考 → blogspot部落格安裝並管理facebook留言板

2015年10月1日補充,到body下方插入代碼的步驟,和FB留言板,是一模一樣,所以用上述連結帶過,而那些步驟是必要的,至於到body下方插入...等代碼,只需要插入一次,既可共用。

代碼修改說明,上圖中的固定網址改成expr:data-href='data:post.url',才能對應每一頁,expr:為blogspot的替換語法,完成後,如下:

<div class='fb-like' expr:data-href='data:post.url' data-layout='button_count' data-action='like' data-show-faces='false' data-share='false'></div>

Google +1按鈕的代碼,及facebook like讚按鈕的代碼,進行整合:

2015年9月29日,更新下述代碼,去掉讚前面2個空白。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding-top:25px;'>
<script type='text/javascript' src='https://apis.google.com/js/platform.js'>
{lang: 'zh-TW'}
</script>
<div class='g-plusone' data-size='medium'></div>
<div class='fb-like' expr:data-href='data:post.url' data-layout='button_count' data-action='like' data-show-faces='false' data-share='false'></div>
</div>
</b:if>

上述代碼解說:

雙引號改單引號。

外面加一層item判斷,只在看文章時,才顯示。

div之style內的padding-top,是與上方的間隔,可自行調整。

blogspot的文章頭部,顯示G+1及FB讚按鈕:

Ⅰ、將blogger的html編輯器內的全數代碼,copy至notepad++文書編輯軟體,後存成html格式,這樣才有顏色及虛線,方便查看,不小心改錯,也可返回上一步。

Ⅱ、搜索post-header-line-1,有2處,在第2處的post-header-line-1的下方插入,上面那些代碼。



Ⅲ、按鈕對齊部份,在a:link {的上方插入,下面代碼:

.fb-like span { vertical-align:baseline!important; }



因為fb-like span的基準線,被用到下方,要設回去。

Ⅳ、修改好之後,將notepad++裡面的代碼,覆蓋掉blogger之html編輯器裡面的代碼,後儲存範本,就ok了。



Ⅴ、效果如下:



2015年10月17日補充,本站於更換風格時,撤掉了自裝的按鈕部份,改使用blogsopt內建的按鈕,算是重裝麻煩吧,有時間的人,是可以研究一下。

同分類文章 → http://zfly9.blogspot.tw/search/label/15_Blog相關修改



對上述圖文教學,還不太明白的話,請至下方連結,查看youtube視頻解說。

此篇教學之youtube視頻解說:https://www.youtu.be/_uzEjyyBLME


謝謝大家,抽空觀看,files備份檔名:otherguides 006

2 則留言:

  1. 您好,
    請問一下,如果要在網誌首頁就看到G+跟fb讚的話,語法要如何改呢?
    另外就是fb的讚設定好後,按下去會出現"確認"的字樣,這樣無法成功按讚的情形, 該如何解決?
    爬文找不太到解答@@麻煩了

    回覆刪除
    回覆
    1. .

      請問一下,如果要在網誌首頁就看到G+跟fb讚的話,語法要如何改呢?

      G+會自己對應,FB要改一下對應網址,插入要顯示的地方class=fb-like expr:data-href=data:post.url

      的expr:data-href,那個expr:是blogspot替換代碼,不用加,用成data-href=你的網站網址,這樣讚網址,就不會便動,既可放在首頁。

      上述是去掉左右單引號,請自行加上

      另外就是fb的讚設定好後,按下去會出現"確認"的字樣,這樣無法成功按讚的情形, 該如何解決?

      滑鼠右鍵,檢視網頁源始碼,查看一下代碼,class=fb-like中data-href後面的網址,是不是沒對應到

      如還不行,試這把FB留言板,fb:app_id、fb:admins那些用用,反正到body下方插入代碼為止,都是一樣的。

      .

      刪除