OGPに対応して設置するのが、少し、ややこしくて、とっつきにくいという方が多いようなので、OGPに対応した「いいねボタン」の設置の流れについて書きたいと思います。
流れさえ、把握出来れば、設置方法自体はそれほど複雑ではありません。
1.いいねボタンのコードを取得
以下のリンクから、いいねボタンのコードを取得し、設置します。
Like Button - Facebook開発者
2.OGP…
今回はFacebookのPHP SDKを使って、ユーザー情報を取得します。
/examples/ /tests/ /src/ changelog.mb readme.mb
この中で必要なのは、「src」フォルダです。 FacebookアプリのキャンバスURLで設定しているサーバ階層に、srcフォルダとこれから作成するindex.phpをアップします。
サンプルソース
上記ソースに、あなたのIDを入力したら、index.phpとして、srcフォルダと同じ場所(facebookキャンバスURLの箇所)にアップロードします。 以下のような構成になります。
アップロード後のサーバ上のファイル構成
http://your_canvas_url.com/src/ http://your_canvas_url.com/index.php
アップロードが完了したら、以下のURLにアクセスして動作を確認してみてください。
正常に動作していると、[id]、[name]、[first_name]、、[last_name]、[link]、[username]、[hometown] 、なんかが配列に展開されていると状態になります。 アプリを公開しているサーバのcURLやSSLの設定によっては、cURL関係のエラーが出ることがあります。
PHP SDKを取得・設置
まず、githubからFacebookのPHP SDKをダウンロードします。 Facebook PHP SDK ダウンロードしたファイルを解凍すると以下のようなファイル構成になっていると思います。/examples/ /tests/ /src/ changelog.mb readme.mb
この中で必要なのは、「src」フォルダです。 FacebookアプリのキャンバスURLで設定しているサーバ階層に、srcフォルダとこれから作成するindex.phpをアップします。
ログインしているユーザー情報を表示させるPHPプログラム
以下のソースをindex.phpとして設置します。 PHP内のコメントで「***を記入」となっている2ヶ所を独自のIDに変更してください。<?php require_once("src/facebook.php"); $config = array(); //以下を編集してアプリIDを記入 $config['appId'] = 'YOUR_APP_ID'; //以下を編集してアプリ秘訣を記入 $config['secret'] = 'YOUR_APP_SECRET'; $config['fileUpload'] = false; // optional $facebook = new Facebook($config); $uid = $facebook->getUser(); if($uid){ try { // Proceed knowing you have a logged in user who's authenticated. $user_profile = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); $user = null; } }else{ $loginUrl = $facebook->getLoginUrl(); echo("<br>login url=".$loginUrl); }; // Get User ID $user = $facebook->getUser(); // We may or may not have this data based on whether the user is logged in. // // If we have a $user id here, it means we know the user is logged into // Facebook, but we don't know if the access token is valid. An access // token is invalid if the user logged out of Facebook. if ($user) { try { // Proceed knowing you have a logged in user who's authenticated. $user_profile = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); $user = null; } } // Login or logout url will be needed depending on current user state. if ($user) { $logoutUrl = $facebook->getLogoutUrl(); } else { $loginUrl = $facebook->getLoginUrl(); } // This call will always work since we are fetching public data. $naitik = $facebook->api('/naitik'); ?> <!DOCTYPE HTML> <html xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>php-sdk</title> <style> body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; } h1 a { text-decoration: none; color: #3b5998; } h1 a:hover { text-decoration: underline; } </style> </head> <body> <h1>php-sdk</h1> <?php if ($user): ?> <a href="<?php echo $logoutUrl; ?>">Logout</a> <?php else: ?> <div> Login using OAuth 2.0 handled by the PHP SDK: <a href="<?php echo $loginUrl; ?>">Login with Facebook</a> </div> <?php endif ?> <h3>PHP Session</h3> <pre><?php print_r($_SESSION); ?></pre> <?php if ($user): ?> <h3>You</h3> <img src="https://graph.facebook.com/<?php echo $user; ?>/picture"> <h3>Your User Object (/me)</h3> <pre><?php print_r($user_profile); ?></pre> <?php else: ?> <strong><em>You are not Connected.</em></strong> <?php endif ?> <h3>Public profile of Naitik</h3> <img src="https://graph.facebook.com/naitik/picture"> <?php echo $naitik['name']; ?> </body> </html>
サンプルソース
上記ソースに、あなたのIDを入力したら、index.phpとして、srcフォルダと同じ場所(facebookキャンバスURLの箇所)にアップロードします。 以下のような構成になります。
アップロード後のサーバ上のファイル構成
http://your_canvas_url.com/src/ http://your_canvas_url.com/index.php
アップロードが完了したら、以下のURLにアクセスして動作を確認してみてください。
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_URL https://www.facebook.com/dialog/oauth?client_id=123456789&redirect_uri=https://your_canvas_url.com/というか、そんなややこしいことしなくても、facebook開発者のアプリ情報に載ってるカンバスURL(https://apps.facebook.com/〜)にアクセスしたらいいような・・・。
正常に動作していると、[id]、[name]、[first_name]、、[last_name]、[link]、[username]、[hometown] 、なんかが配列に展開されていると状態になります。 アプリを公開しているサーバのcURLやSSLの設定によっては、cURL関係のエラーが出ることがあります。
この投稿へのコメント
コメントはまだありません。