主要記錄了在iOS端進(jìn)行Facebook分享時(shí)遇到的一個(gè)問(wèn)題.
設(shè)置Facebook分享的預(yù)覽效果.
在iOS端將圖片或鏈接分享至Facebook, 使用social框架即可非常方便地做到:
import social
func actionFacebookShare(sender: UIButton) {
var controller: SLComposeViewController = SLComposeViewController(forServiceType: SLServiceTypeFacebook)
controller.setInitialText("分享的內(nèi)容")
controller.addURL(url) // 分享的網(wǎng)頁(yè)
// controller.addImage(imageToShare) // 分享的圖片
self.presentViewController(controller, animated: true, completion: nil)
}
然而, 在SLComposeViewController中, 卻遇到了不能顯示分享網(wǎng)頁(yè)中的預(yù)覽圖片的情況.
一番搜索之后, 發(fā)現(xiàn)Facebook分享中的預(yù)覽效果是通過(guò)在網(wǎng)頁(yè)中設(shè)置一些特殊的meta數(shù)據(jù)來(lái)實(shí)現(xiàn)的.
參考如下鏈接:
facebook-sharing-best-practices
How does Facebook Sharer select Images and other metadata when sharing my URL?
其大意是:
Facebook has a set of open-graph meta tags that it looks at to decide which image to show.
The keys one for the Facebook image are:
and it should be present inside the <head></head> tag at the top of your page.
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
即, 我們需要在網(wǎng)頁(yè)中設(shè)置og:image作為預(yù)覽圖片, 另外, 還有og:title和og:description等其他所需的預(yù)覽信息.
Facebook還貼心地提供了一系列的工具用于檢測(cè)類似的情況.
其中, Sharing Debugger專用于在FB上分享網(wǎng)頁(yè)時(shí)的調(diào)試.
我們只需要輸入分享鏈接, 即可查看分享的預(yù)覽效果. 如下圖:
可以看到關(guān)鍵的幾個(gè)meta數(shù)據(jù)為og:title, og-description, og:image.
完整的meta數(shù)據(jù)如下:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
<meta property="og:title" content="AirBrush: The Secret to a Perfect Selfie" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Use Airbrush for a free, easy-to-use photo editor that lets you enhance your natural beauty without harsh filters." />
<meta property="og:image" content="http://xiuxiu.mobile.meitudata.com/tuiguang/airbrush/download/img/bg_en.jpg" />
<meta property="og:image:secure_url" content="http://xiuxiu.mobile.meitudata.com/tuiguang/airbrush/download/img/bg_en.jpg" />
<meta property="og:url" content="http://xiuxiu.mobile.meitudata.com/tuiguang/airbrush/download/en/" />
以上, 都是前端開(kāi)發(fā)的同學(xué)需要在網(wǎng)頁(yè)中添加的meta數(shù)據(jù).
如果實(shí)在沒(méi)辦法添加呢, Facebook也在自己的分享SDK中添加了對(duì)應(yīng)的解決方案:
FBLinkShareParams *params = [[FBLinkShareParams alloc] init];
params.link = [NSURL URLWithString:link];
params.name = title;
params.caption = title;
params.linkDescription = linkDescription;
params.picture = [NSURL URLWithString:pictureLink];
通過(guò)FBLinkShareParams可以添加分享網(wǎng)頁(yè)的預(yù)覽效果所需的meta數(shù)據(jù).
那么, 看了這些后, 你肯定在想, 到底這個(gè)og是神馬意思? 貌似之前接觸的meta數(shù)據(jù)中沒(méi)有這樣的寫(xiě)法呢?
這就需要引入Open Graph Protocol了.
Open Graph Protocol
開(kāi)放內(nèi)容協(xié)議的主頁(yè): The Open Graph protocol.
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
即這種協(xié)議可以讓網(wǎng)頁(yè)成為一個(gè)"富媒體對(duì)象"。用了Meta Property=og標(biāo)簽，就是你同意了網(wǎng)頁(yè)內(nèi)容可以被其他社會(huì)化網(wǎng)站引用等，目前這種協(xié)議被SNS網(wǎng)站如Facebook、renren采用。
最基本的og標(biāo)簽有以下:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
此外, 還有一些標(biāo)簽如下:
og:audio - A URL to an audio file to accompany this object.
og:description - A one to two sentence description of your object.
og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate - An array of other locales this page is available in.
og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
og:video - A URL to a video file that complements this object.
以及
og:image:url - Identical to og:image.
og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
og:image:type - A MIME type for this image.
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
Open Graph Protocol是Facebook主導(dǎo)的, 當(dāng)然, 其他的一些公司可能有各自的一些格式, 如
<!-- for Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- for Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
因此, 再涉及到相關(guān)的使用場(chǎng)景時(shí), 可去其各自的官網(wǎng)找尋.
其他問(wèn)題
CDN
最后, 正確設(shè)置好了所有必須的Open Graph meta數(shù)據(jù)后, 還出現(xiàn)過(guò)Facebook分享預(yù)覽效果不正確的情況, 詭異的是有的地區(qū)可以, 而有的地區(qū)卻不行.
排查了之后, 發(fā)現(xiàn)是CDN相關(guān)的配置引起的, 可能需要做些網(wǎng)頁(yè)部署相關(guān)的步驟.
可供參考的資料
facebook-sharing-best-practices
18 Meta Tags Every Webpage Should Have in 2013
