facebook、twitter、facebook 登入、whatsapp 分享、微信分享
所謂爬蟲,是一種按照一定的規則,自動地抓取網際網路資訊的程式或者腳本。
對于國外第三方的分享元素圖譜,是寫在 html 的 head 部分,分為以下幾個:
Tag
Description
備注
og:url
The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters. Likes and Shares for this URL will aggregate at this URL. For example, mobile domain URLs should point to the desktop version of the URL as the canonical URL to aggregate Likes and Shares across different versions of the page.
填寫要分享的 url
og:title
The title of your article without any branding such as your site name.
分享時展示的卡片的标題
og:description
A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.
分享時展示的卡片的次标題
og:image
The URL of the image that appears when someone shares the content to Facebook. See below for more info, and check out our best practices guide to learn how to specify a high quality preview image.
分享時展示的卡片的背景圖
fb:app_id
In order to use Facebook Insights you must add the app ID to your page. Insights lets you view analytics for traffic to your site from Facebook. Find the app ID in your App Dashboard.
facebook 分享官方英文文檔
分享原理:告訴 facebook 你想要分享的 url,facebook 爬蟲機器人會主動向這個 url 發起爬蟲操作,拿到對應的 html 解析,分别拿到相應的 html 元素圖譜。是以,内網,是無法拿到相應的 html 元素圖譜的,是以内網分享不會有圖
分享示例:
比如,分享的位址是https://www.luotuxiu.cn/,則設定App Domains 為 luotuxiu.cn
方式 1:超連結分享(注意 url 需要 encode)
方式 2:接入 facebook sdk(前提是先引入 facebook sdk js,并做初始化)
developers.facebook.com/tools/debug…
比如輸入我的部落格位址,可以看到以下截圖:

可以對着上面的表格一一可以看到,facebook 一一解析了 html 的元素
這個 debugger 工具很關鍵,其一,可以用來分析自己的網站是否爬蟲元資訊是否準确,二來,因為是爬蟲的原理,就可能出現,網站更新了但是分享的内容沒有及時更新的 bug,此時這個工具會有一個 scrape Again 的功能,可以手動觸發爬蟲
facebook 登入英文文檔位址
接入 facebook 登入需要引入 facebook sdk,共計需要 5 個步驟
Valid OAuth Redirect URIs:這個是回調位址,必填。也就是,你想要哪個網址使用 facebook 登入,就填哪個網址,一般來講,填寫通用位址接口,比如填寫:https://www.luotuxiu.cn/ 即可,後面檔案名可以不用填寫。
登入完後,傳回的 response 的示例:
一般拿着 accessToken 去做登入态也可以,有一個接口可以校驗登入态是否生效
同時也有一個 get 請求可以校驗 token 是否生效:
其中,input_token 是你要校驗的 token,access_token 是在 facebook 背景對應的這個 app 的 token。如果正确,傳回值如下:
分享原理和 facebook 是一樣的,通過爬蟲擷取分享資訊
官網文檔:https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent
無需帶上 appid 即可,注意,&url 對應的 value 值 需要 encode,hashtags 傳的是話題(類似微網誌的話題)
注意,在手機端會自動識别所有中繼資料,同 facebook 是通過爬蟲抓到資料,是以也需要和 facebook 一樣設定所有的 title,image 等資料
cards-dev.twitter.com/validator
注意,這裡和 facebook 一樣,可能有網站更新了但是分享的内容沒有及時更新的 bug,此時用這個工具重新 preview 一下即可,可以手動觸發爬蟲
分享原理是通過發送微信 jssdk api 擷取分享資訊
官方文檔
注意,這裡,簽名的生成,需要後端去調用微信的 api,然後前端需要通路後端一個接口來傳回每次的簽名