微信分享鏈接到朋友和朋友圈的縮略圖

微信分享鏈接到朋友和朋友圈的縮略圖

現時我們有很多方法將鏈接分享到微信的朋友和朋友圈，在現今的社交平台上，有著大量的分享資訊。如想讓接收者在大量的資訊上吸引到他們的目光，分享的鏈接上除了文字標題要吸引之外，加入有趣的縮略圖更能有效吸引到人的眼球，從而提高鏈接的點擊率。這次主要是介紹微信分享鏈接功能，有如下幾種方法。

瀏覽器分享

在瀏覽器開啓鏈接後，點擊分享功能，選擇「微信 WeChat」。

方法一：

分享標題 – 微信默認抓取網頁標題，也就是title標籤中的內容作為分享標題。

<title>我是页面标题</title>

分享縮略圖 – 微信默認抓取網頁中尺吋大於300 x 300像素的第一張圖片作為分享縮略圖。如該圖片不需要顯示，可以使用css隱藏，但不可以直接對img標籤設置「display: none」。可以在父層div設置「display: none」；或者對img標籤設置「position: absolute; visibility: hidden;」。

<div style="display: none">
  <img src="/thumbnail.png" width="300" height="300">
</div>

方法二：

在網頁的head部份加入The Open Graph protocol。og:title作為分享標題、og:image作為分享縮略圖

<meta property="og:type" content="website" />
<meta property="og:title" content="網頁標題" />
<meta property="og:description" content="網頁描述" />
<meta property="og:image" content="http://www.example.com/thumbnail.jpg" />
<meta property="og:url" content="http://www.example.com" />

微信內分享

wx.onMenuShareTimeline({ // 分享到朋友圈
    title: '', // 分享標題
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前網頁的公眾號JS安全域名一致
    imgUrl: '', // 分享縮略圖
    success: function () { 
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前網頁的公眾號JS安全域名一致
    imgUrl: '', // 分享縮略圖
    type: '', // 分享類型，music、video或link，默認為link
    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
    success: function () { 
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});