指定 Facebook 「讚」（like）與 Google Plus +1 分享 Blogger 部落格文章的顯示圖片

我們之前介紹過如何在 Google 的 Blogger 部落格中加入 Facebook 的「讚」與 Google Plus +1 的按鈕，透過這樣的方式可以讓網友們很容易的分享自己喜愛的文章，Facebook 的分享方式就像這樣：

Facebook 按「讚」

而 Google Plus 的介面也很像：

Google+ 分享

在分享網站或文章到 Facebook 或 Google Plus 時，會有一張縮圖，而有時候自動顯示的縮圖會抓錯，抓到的圖片並不是我們想要的，這裡我們介紹如何修正這個問題。

Step 1
首先到 Blogger 部落格的管理界面，選擇「範本」，然後點選右上角的「備份/還原」。

Blogger 部落格的「範本」管理介面

Step 2
點選「下載完整範本」。

備份與還原 Blogger 範本

Step 3
下載下來的檔案是一個 XML 檔，這個檔案就是整個部落格的範本檔，因為等一下我們要修改這個範本檔，為了怕不小心搞砸，在修改前請一定要先備份一個原始的範本檔，以免弄壞了改不回來。

如果有備份範本檔，即使等一下修改時，不小心把部落格搞砸了，把這個備份的範本檔案上傳回去，也可以復原。

做好備份之後，用自己習慣的文字編輯軟體開啟這個下載下來 XML 範本檔，開始修改。

Step 4
在這個 XML 檔案的前幾行，應該會看到 html 這個標籤：
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
在這個 html 標簽的最後面加入兩個參數：
itemscope='itemscope' itemtype='http://schema.org/Blog'
修改完成後應該會像這樣：
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' itemscope='itemscope' itemtype='http://schema.org/Blog'>
這個是給 Google Plus +1 按鈕分享時需要用的，如果是只要修正 Facebook 的圖片，可以省略這一步。

Step 5
尋找「<head>」這個標籤，在裡面加入 meta 資訊：
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
  <meta itemprop='image' expr:content='data:blog.postImageThumbnailUrl'/>
<b:else/>
  <meta content='Image URL' property='og:image'/>
  <meta itemprop='image' content='Image URL'/>
</b:if>
其中 Image URL 就自己換成要顯示的圖片網址，其餘的部分就直接複製貼上。這段程式會讓單篇文章的頁面顯示文章中的第一張圖片，而部落格的首頁則是顯示這裡 Image URL 所指定的圖片。

修改完成後，應該會像這樣：
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <!-- Begin: Add by Seal -->
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta itemprop='image' expr:content='data:blog.postImageThumbnailUrl'/>
  <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslnzqjSxWDA9qTmp1M1YxCmsBlo8BxMpv3ZWlYhdNjHIFbEnfQ4PKC4TlcXeeQkjBUTSwN8bZORRRMGkHN6FcbDgZGxMbMDRSZKDCwQ1o7zL2KZ52nmy-VB-b1EfGWriPuLMOGKVW3IZm/s600/sealmemory.png' property='og:image'/>
    <meta itemprop='image' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslnzqjSxWDA9qTmp1M1YxCmsBlo8BxMpv3ZWlYhdNjHIFbEnfQ4PKC4TlcXeeQkjBUTSwN8bZORRRMGkHN6FcbDgZGxMbMDRSZKDCwQ1o7zL2KZ52nmy-VB-b1EfGWriPuLMOGKVW3IZm/s600/sealmemory.png'/>
  </b:if>
  <!-- End: Add by Seal -->
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
Begin: Add by Seal 與 End: Add by Seal 之間的部分就是新增的部分。

Step 6
最後再把修改好的 XML 範本檔上傳回去，就完成了。

人有失手，馬有亂蹄，如果不幸上傳之後有錯誤，或是整個部落格版面亂掉，那可能就是在修改範本程式碼的過程中有出錯，這時候就把之前備份的範本檔再上傳回去就可以復原了，如果沒有備份又改不回來的話，就要重新選擇預設範本，一切重來，所以備份是很重要的。
➤ 本站已經搬家了，欲查看最新的文章，請至 G. T. Wang 新網站。
LABEL: , , , , ,

5 則留言:

  1. 匿名2022年4月1日 凌晨4:31

    Merkur Slots Machines - SEGATIC PLAY - Singapore
    Merkur Slot Machines. 5 https://septcasino.com/review/merit-casino/ star https://septcasino.com/review/merit-casino/ rating. 출장안마 The Merkur Casino game was https://febcasino.com/review/merit-casino/ the first to feature septcasino video slots in the entire casino,

    回覆刪除
  2. CLICKME2022年6月16日 上午8:50

    I'm ready to have my breakfast again, reading your blog.

    토토사이트
    토토
    온라인카지노
    카지노

    回覆刪除
  3. william2023年5月17日 下午2:34

    Thanks for sharing wonderful blog your coding style is very nice keep do it.
    accidente de volquete

    回覆刪除
  4. joshjo272023年9月19日 晚上10:16

    Image quality: Make sure the images you choose are high-quality, capture the user’s attention and showcase the features of your content.
    Consistency: The selected image should be consistent with the topic and content of the article, which can increase the likelihood of users clicking.
    Social media adaptability: Ensure that the selected images display correctly on different social media platforms without being cropped or distorted.
    Test and analyze: Continuously test different images and analyze their performance to find the ones that work best for increasing article shares and likes. how to get a reckless driving ticket dismissed in virginia

    回覆刪除
  5. Robin2023年10月27日 下午5:32

    Your style is so unique compared to many other people. Thank you for publishing. dui que significa Virginia

    回覆刪除

訂閱： 張貼留言 (Atom)