UNIRRY

WEBデザインとホロスコープと宇宙のブログ

facebookに写真とかを投稿させる仕組みを実装してみた

fbimg

facebookのjavascriptSDKを使って写真とかをOAUTHしながら投稿させるのをつくってみました。

html

まずはSDKを読み込みます。body直下とかで。

<script>
  // fb SDKのロード
  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>

ボタンとかをhtml上に作っときます。

<html>
<body>

<div id="login">PUT IMAGE</div>
<div id="status"></div>

</body>
</html>

js

「window.fbAsyncInit」で指定した処理がjsのSDK直後によびだされるんだって。

「fileUpload」をtrueにするのはアップロード使うよって意味です。

「FB.getLoginStatus」でログインステータスを確認します。それによって処理を出し分けれる。

「FB.login」でfacebookにログインできます。その時、scopeでパーミッションを与えます。この場合、投稿とかするので、「publish_actions」を渡します。これによって、「あなたに変わって投稿してもいいかな?」ってダイアログがユーザーに出ます。そこで「OK」してもらえないと投稿できません。

「FB.api(“/me/photos”,”POST”~~~」でアルバムに写真の投稿ができます。

Graph API Explorerで調べたら、「FB.api(‘/me/permissions’, ‘DELETE’)」で、アプリへの承認を削除できるのがわかった。投稿したものはそのまま残るので、変なダイアログが出たり出なかったりしなくて見やすくなります。

window.fbAsyncInit = function() {

    // FB初期化
    FB.init({
      appId      : '___あなたのアプリID___',
      status     : true,
      xfbml      : true,
      cookie     : true,
      oauth      : true,
      fileUpload : true
    });

    // 変数定義
    var login = $('#login');

    // ステータス確認
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        // ログインしてるしアプリ連携してる時
        addPicture();
      } else if (response.status === 'not_authorized') {
        // ログインしてるけどアプリ連携はしてない時
        loginPicture()
      } else {
        // ログインしてない時
        loginPicture();
      }
    });

    // ログイン
    function loginPicture() {
        login.click(function(){
                FB.login(function(response) {
                   if (response.authResponse) {
                     fbEntryPhoto();
                   } else {    
                     alert ('ログインのレスポンスがないみたい。もうちょっとしてからもう一度試してね!');
                   }
                 }, {scope:'publish_actions'});
        });
    }

    // 投稿ボタン
    function addPicture() {
        login.click(function(){
                fbEntryPhoto();
        });
    }

    // ピクチャー投稿
  function fbEntryPhoto() {
                   FB.api("/me/photos","POST",{
                                 "url": "http://unirrycom.sakura.ne.jp/wordpress/wp-content/uploads/2014/09/scroll01.jpg",
                                 "message": 'unirry.comから投稿してみました。'
                              },function (response) {
                                   if (response && !response.error) {
                                       $('#status').html('画像の投稿ができました!<br>またやってね!');
                                   } else {
                                       $('#status').html('画像の投稿に失敗しました。<br>もう少したってからやってみてね!');
                                   }
                              }
                   );

                   FB.api('/me/permissions', 'DELETE');
    }


};

サンプル

サンプル1(アプリのパーミッションを削除しない版)
サンプル2(アプリのパーミッションを削除する版)こっちのがいいと思う。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3