JavascriptでFacebookに投稿する

ゲームの記録をFacebookに投稿する事ができるようになりました！
色々と厄介だったので、似たような事をやりたい人のために実装方法を残しておきます。

2017/7/19以降この方法だけでは動的に変えられなくなりました。
以下の記事にて本記事の実装を前提とした対応方法を解説しております。

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

2018/03/21 公開

出来ること

こんな感じでフィード投稿できます。厳密にはページのタイトルを上書きするような仕様となります。
シェアや集客狙いならユーザーの入力欄はコメント欄扱いとしても良いのかなとは思います。

※情報は2017/04/05時点での物となります。FacebookのAPIはすぐ仕様が変わるのでご了承のほどよろしくお願いいたします。

実装手順

※文中の【】内は各々の情報に適宜書き替えて下さい。

1.Facebookアプリの作成

ココで作成出来ます。
作成自体は必要情報を入力していくだけなので説明は省きます(メールアドレスなど)

Facebookアプリ上で動作しなくてもアプリIDが必要なので必須です
なお、Facebookアプリ自体を公開しないと投稿機能は管理者などしか確認できません。
→厳密には別タブで開いたタブがFB側のエラーページに飛びます。

2.Htmlファイル側にmeta情報を設定

投稿時の各種情報をページ側に設定します。
head内に以下のコードを追加します。

<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:url" content="【ページのURL(絶対パス)】" />
<meta property="og:image" content="【ページのサムネイル画像(絶対パス)】" />

<meta property="fb:app_id" content="【紐付けるアプリID】" />

title内にあるサイト名については、前述の通り上書きされます。
何らかの理由で上書きしない場合はページのタイトルを入れておくのが望ましいです。

3.Facebookのjavascript sdkを実装する

表示するhtmlファイルのbodyタグの開始直後にsdkを読み込むコードを挿入します。
以下のコードをそのままで良いかとは思います。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '【紐付けるアプリID】',
      status     : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

上記コード17行目は「ja_JP」に修正済みですが、
Facebook開発者向けページでのコードはen_USとなっています。

日本語でシェアする場合はja_JPで良いと思います。
一応ココに使える言語の一覧が乗ってます

4.フィード投稿用のメソッドを用意する

やっとjavascriptを触ります。
以下のメソッドをhtmlなりjsなりに記載します

当サイトではよく使うメソッドをまとめたjsを読み込んでるので、
そこに記載してる感じになります。

function openFacebook(text,shareurl) {
	FB.init({
          appId      : '【紐付けるアプリID】',
          status     : true,
          xfbml      : true,
          version    : 'v2.8'
        });
	
	//Feed Dialogによる投稿
	FB.ui({
	  method: 'feed',
	  link: '' + shareurl,
	  title: '' + text,
	}, function(res){
	  //返答をログに出力
	  console.log(res);
	});
}

なお、title:をdescription:にすれば上書き先を概要欄の方に変更可能です。
→概要欄は文字が灰色なので主張がイマイチに思えますが、、、

5.フィード投稿したいタイミングでメソッドを呼び出す

以下のように引数を指定して呼び出せばOKです。

	openFacebook("【タイトル部に表示するテキスト】","【ページのURL】");

上記「うなかぞえ」のフィード投稿の場合は最終的なスコアをscoreとして、 以下のようなコードで呼び出しています。

	openFacebook("うな重を"+score+"人前かぞえたよ！｜うなかぞえ","https://santmove.com/games/play.php?gid=8");

こんな感じでゲームや診断など、動的に内容が変わるフィード投稿が出来るようになります！

2017/7/19以降この方法だけでは動的に変えられなくなりました。
以下の記事にて本記事の実装を前提とした対応方法を解説しております。

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

2018/03/21 公開

参考

クイックスタート: JavaScript用Facebook SDK

Feed Dialog

ついでにいいね！ボタンも設置しました

各ページにFacebookの「いいね！」ボタンを用意しました。
「TOPページ」「ゲーム一覧ページ」「記事ページ毎」にいいねボタンが用意されてます！

いいね！ボタンはココからあっさり作れます。
が、Twitterなどのボタンと並べると縦にズレることがあります。

spanタグにvertical-align:bottomが設定されているからのようです。
以下のサイト様が非常にわかりやすく解説してくださっております。(修正方法も書いてあります)

参考

【CSS】Facebookの「いいねボタン」の位置がズレる時の対処法

サイト改修以外の近況

リップルコインの値動きが最近半端じゃないのでビクビクしながらXRP/YENのチャートを見てます。
このニュースが出てからのようですね。

0.6円くらいだったのが一時8円になって、今は3～5円前後をうろちょろのようです。
億万長者になった人が本当にいるのではないかと思いますが、あまりにも怖すぎるので、
素人のsantmove.は余剰資金で現物取引を楽しむのが一番かと思ってます(笑)

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

ではまた！

santmove.

矢印Fever

ノリノリでフリックしてフロアを沸かそう！手持ちの音楽を聴きながらのプレイがオススメ！

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

Rotate Number Panels

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

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

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

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

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

楽天市場

amazon

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

Tweet

次の記事

タグ検索が出来るようになりました

2017/04/06 公開

前の記事

当サイトのプライバシーポリシー・利用規約

2017/04/17 公開

この記事のコメント

次の記事

タグ検索が出来るようになりました

2017/04/06 公開

前の記事

当サイトのプライバシーポリシー・利用規約

2017/04/17 公開