Facebookへ動的なフィード投稿をする方法【2018年版】

タグ：技術サイト改修

2017/04/05の記事にて紹介した方法にて、タイトル・説明分をすげ替えたフィード投稿をjs上で行う方法を紹介しましたが、
残念ながら現在以下の方法だけでは正常に書き換えが行われないようです。

JavascriptでFacebookに投稿する

2017/04/05 公開

原因としては2017/7/17以降、利用していたパラメータがほぼ全て利用不可となったことでした。
但し、JavascriptからFacebookへフィード投稿する部分の仕組みはそのまま利用するので、上記記事を実装済みの前提にて解説します。

URLを指定してFeed Dialogを呼び出す仕組みさえあれば利用可能なので、適宜読み替えていただければ幸いです。

技術解説

出来ること

上記画像のように、画像・タイトル・説明文をゲーム・診断などの内容に合わせて動的に差し替えたFacebookカードを伴うリンクを投稿させる。

診断系のサイトであれば友人の結果が遷移直後に表示されても良い気もしますが、ゲームのスコアだとそうも行かないので何とか考えました。

ざっくりやること

メタ情報を動的に設定したページを用意する
上記のページの末尾に、javascriptを用いてwindows.onload後にリダイレクトする処理を入れる

かなり強引ですが、要するに「書き換えたFacebookカードをTLに表示できて、TLからタップしたときに指定URLに遷移」出来ればいいんでしょ？な考え方です。
各サイトにてスコアの記録方式等は違うと思うので動的に出し分ける部分の解説は省略しますが、FB側のSDKを利用するよりは自前で用意しやすいかと思います。

用意するテンプレート

以下のような物をshare.html(php)のような名前にて用意しておきます。


<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name = "format-detection" content = "telephone=no">

<meta property="og:site_name" content="【サイト名】" />
<meta property="og:title" content="【差し替えたいタイトル】" />
<meta property="og:description" content="【差し替えたい説明文】" />
<meta property="og:type" content="article" />
<meta property="og:image" content="【表示したいアイコン画像の絶対パス】" />

<meta property="fb:app_id" content="【FBアプリのapp_id】" />

<meta name="robots" content="noindex">

<title>【ゲームのタイトル】</title>
<body>
<!-- ogで取得されなかった時用-->
<img src="【表示したいアイコン画像の絶対パス】">


<script>
//window.onload = function(){
	var url = "【本来遷移させたいURL先(絶対パス)】";//本来遷移させたいURL先を指定
	location.href=url;
//};
</script>
</body>

上記コード内【】で囲われている部分は適宜動的に出し分けるようにしておいてください。

方法としてはCookieかセッションからの読み込み、DBへの一時データ保存などが考えられます。
windows.onloadが発火する前に書き換えられればOKなので、phpでの書き換えが一般的になるかと思われます。