プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

TOP> 記事一覧> Facebookへ動的なフィード投稿をする方法【2018年版】

2018/03/21

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

タグ: 技術 サイト改修

このエントリーをはてなブックマークに追加

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

原因としては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での書き換えが一般的になるかと思われます。

スポンサーリンク

もうあとはそれだけ

先の記事で紹介したopenFacebookメソッドにて、上記URLを読み出すだけとなります。
openFacebookメソッド内のFB.uiにて使えるパラメータはlink:'○○/share.html'だけとなるので、それ以外のパラメータは適宜削除して問題ないです。

かなり強引な気もしますが、2018/03/21現在これで問題なく動作します。
通信環境にも左右されますが、リダイレクト処理が遅れてshare.html表示されることもほぼ無いです。(jsは実行しないのかもしれません)

なお当サイトでは各ゲームのスコア記録、登録アカウントのID、時刻のみ取得し、FBアカウントなど個人を特定できる情報は送信いたしません。
詳しくはプライバシーポリシーをお読みください。

今日の結び

ある意味強引かつ簡易的な方法を紹介しましたが、動的に結果を投稿させる仕組みをFB側に組み込むのは面倒だしすぐ仕様が変わったりするので、
動的に結果を書き換える仕組みの実装は必要ですが、今回の方法であれば自前で用意しやすいかと思います。

とはいえうちのサイトではあまりFBの需要は無いんですよね(笑)
但しシェア先は多ければ多い程良いはずなので、あまり負担が重くならない程度には対応しようかと思います。


感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲーム・ブログ記事の感想なども励みとなりますのでよろしくお願いいたします!

新作ゲーム公開中です!

ピザはみんなで

ピザはみんなで

みんなで仲良くピザを食べるために精密に切り分けてあげよう!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

メニカラモザイク

New! 2019/05/24 更新

将棋ライフゲーム

New! 2019/05/17 更新

夜景と炒飯

2019/04/14 更新

ID Typing_

2019/04/07 更新

新着公開ゲーム

将棋ライフゲーム

New! 2019/05/17 公開

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開