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

TOP> 記事一覧> JavascriptでFacebookに投稿する

2017/04/05

JavascriptでFacebookに投稿する

タグ: 更新情報 技術 サイト改修

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

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

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


出来ること

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

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


実装手順

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

1.Facebookアプリの作成

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

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


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

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

メタ情報(html)


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

参考

クイックスタート: 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

矢印Fever

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


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

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

Rotate Number Panels

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

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

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

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

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

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

楽天市場

amazon

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

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

この記事のコメント

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


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

ログインしていません!

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

サイト運営者

運営:サントムーブ

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

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

夜景と炒飯

2019/10/15 更新

リーマン登山

2019/09/02 更新

うなかぞえ

2019/07/17 更新

新着公開ゲーム

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開