2017-02-04 5 views
1

私たちはアプリケーションのための動的リンクを生成するためにbranchを使用しています。これらのリンクは、さまざまなソーシャルメディアプラットフォームで使用されています。ブランチ設定オプションを使用すると、固定グラフデータの固定セットにデータを設定できます。動画の場合はog:videoに設定しますが、og:video:typeを設定する方法はありません。このため、HTML5ビデオを使用している場合、Facebookのデフォルトのビデオタイプがapplication/x-shockwave-flashであるため、動画の埋め込みは機能しません。branch.ioの余分なHTMLメタデータタグはリンクを生成しました

リンクを設定中に余分なデータを渡そうとしましたが、Facebookによって廃棄されたHTMLメタタグには変換されません。

答えて

1

ブランチリンクをスクレイプすると、ブランチは次の値を返します。 1番目:リンクに定義されているパラメータ。 2番目:リンクに対して定義されていないが、アプリケーションレベルで定義されているパラメータ([リンク設定]ページの[ソーシャルメディアディスプレイのカスタマイズ])。 、最後に、デフォルトURL($ fallback_url)ページで指定されたWebサイトに存在するすべてのメタタグ。

したがって、Branchがog:video:typeを定義するための明示的なパラメータを提供しない場合でも、$ fallback_urlとして使用するWebページにmetaタグを追加することでこれを達成できます。ここで

は一例です:

私は(私はリンクのための任意のOGのパラメータを設定していなかったので、「」示されていることに注意してください)以下のパラメータを設定している以下のリンク「https://ogt1.app.link/fallbackurltags」で始まります。

{ 
"$desktop_deepview": "", 
"$desktop_url": "", 
"$fallback_url": "https://dwestgate.github.io/ExampleFallBackURL/", 
"$marketing_title": "OG Tag Testing - fallback URL tags", 
"$og_description": "", 
"$og_image_url": "", 
"$og_title": "", 
"$one_time_use": "", 
"~creation_source": 1, 
"~feature": "marketing", 
"~id": "357178398369800081", 
"~marketing": true 
} 

「OG::ビデオ:タイプ=アプリケーション/ X-衝撃波 - フラッシュが」分岐ダッシュボード上またはリンクパラメータとしてどこにもseetされていなかった私は、$ fallback_urlを設定していることに注意してください。

私は、$ fallback_url:https://dwestgate.github.io/ExampleFallBackURL/として作成して割り当てた簡単なWebサイトにメタタグを追加しました。ここでは、そのWebページには、次のとおりです。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="title" content="Tag set by Fallback URL" /> 
    <meta name="description" content="Tag set by Fallback URL" /> 
    <meta property="og:title" content="Tag set by Fallback URL" /> 
    <meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" /> 
    <meta property="og:video:type" content="application/x-shockwave-flash" /> 
    <meta property="og:video:width" content="160" /> 
    <meta property="og:video:height" content="90" /> 
    <title>Fallback URL with meta tags</title> 
</head> 
<body> 
    <h1>All the action is in the meta tags - View Source</h1> 
</body> 
</html> 

私は今、Facebookの共有デバッガ(ここでは:https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Ffallbackurltags)を参照すると - 出来上がり:OG:ビデオ:そのウェブページからのタイプのタグを掻き取ってきました。 [すべての生のタグを表示]ボタンをクリックすると、返された生のタグが表示されます。

$ og_urlに値が指定されていれば、この値で提供されているウェブサイトのタグのみが表示されます。リンクhttps://ogt1.app.link/linktagsは、例えば、次のパラメータがあります。このような状況で

{ 
"$marketing_title": "OG Tag Testing - per-link tags", 
"$og_description": "OG Tags set at the link level", 
"$og_image_height": "200", 
"$og_image_url": "https://cdn.branch.io/branch-assets/1486394827408-og_image.png", 
"$og_image_width": "200", 
"$og_title": "Per-Link tags", 
"$og_url": "https://dwestgate.github.io/ExampleFallBackURL/", 
"$og_video": "https://www.youtube.com/v/CsGYh8AacgY", 
"$og_video_height": "180", 
"$og_video_width": "320", 
"$one_time_use": "", 
"~creation_source": 1, 
"~feature": "marketing", 
"~id": "357170874539266599", 
"~marketing": true 
} 

再びFacebookの共有デバッガをチェックして見られるように、リンクパラメータは(ここでは:https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Flinktags)、$のog_urlのパラメータで上書きされます:

<meta charset="utf-8" /> 
<meta name="title" content="Tag set by Fallback URL" /> 
<meta name="description" content="Tag set by Fallback URL" /> 
<meta property="og:title" content="Tag set by Fallback URL" /> 
<meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" /> 
<meta property="og:video:type" content="application/x-shockwave-flash" /> 
<meta property="og:video:width" content="160" /> 
<meta property="og:video:height" content="90" /> 

これは、必要なカスタムOGタグを作成するのに十分な明快さを提供したいと考えています。

+0

Tried、Branchさんは$ fallback urlからこのメタタグを選択しませんでした。私はブランチがドキュメントで指定されている以外の$ fallback_urlから他のメタタグを選択するのを疑う。 –

+0

私はいくつかの例で上記の応答を更新しました。 – dwestgate

+0

$ fallback_urlとデフォルトの$ desktop_urlと$ android_urlを持つことは可能ですか? –

関連する問題