{"id":178,"date":"2011-03-08T15:57:15","date_gmt":"2011-03-08T20:57:15","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=178"},"modified":"2011-03-10T00:32:59","modified_gmt":"2011-03-10T05:32:59","slug":"adding-facebook-connect-functionality-to-your-application","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2011\/03\/08\/adding-facebook-connect-functionality-to-your-application\/","title":{"rendered":"Adding Facebook Connect functionality to your application"},"content":{"rendered":"<p>In this tutorial we are going to use <a href=\"http:\/\/developers.facebook.com\/docs\/reference\/javascript\/\" target=\"_blank\">Facebook Javascript SDK<\/a>.<\/p>\n<p>Here is how you can add Facebook Connect functionality to your PHPRunner application.<\/p>\n<h3>1. Register your website to get an app id.<\/h3>\n<p><a href=\"http:\/\/developers.facebook.com\/setup\/\" target=\"_blank\">http:\/\/developers.facebook.com\/setup\/<\/a><\/p>\n<p>Later you can see your application settings at <a href=\"http:\/\/www.facebook.com\/developers\/apps.php\">http:\/\/www.facebook.com\/developers\/apps.php<\/a><\/p>\n<h3>2. Add &#8216;Login with Facebook&#8217; button to your application<\/h3>\n<p>The natural place to add this button is a login page.<\/p>\n<p>Open login page in Visual Editor. Make sure &#8216;Show borders&#8217; option is turned on. Insert a new table row below &#8216;Remember password&#8217;. Merge two table cells that belong to this row. Make this cell centered.<\/p>\n<p>Put cursor into this table cell and switch to HTML mode. Paste the following code there:<\/p>\n<pre lang=\"html4strict\"><FB:LOGIN-BUTTON>Login with\r\n Facebook<\/FB:LOGIN-BUTTON><\/P>\r\n <DIV id=fb-root><\/DIV>\r\n <SCRIPT>\r\n window.fbAsyncInit = function() {\r\n FB.init({appId: '181638395212821', status: false, cookie: true,\r\n xfbml: true});\r\n\r\nFB.Event.subscribe('auth.login', function(response) {\r\nwindow.location.reload();\r\n});\r\n\r\n };\r\n (function() {\r\n var e = document.createElement('script');\r\n e.type = 'text\/javascript';\r\n e.src = document.location.protocol +\r\n '\/\/connect.facebook.net\/en_US\/all.js';\r\n e.async = true;\r\n document.getElementById('fb-root').appendChild(e);\r\n }());\r\n\r\n<\/SCRIPT><\/pre>\n<h3>3. Add code to AfterAppInit event<\/h3>\n<p>Now its time to add server-side code that logs you in and out.<\/p>\n<pre lang=\"php\">define('FACEBOOK_APP_ID', 'YOUR_APP_ID_HERE');\r\ndefine('FACEBOOK_SECRET', 'YOUR_SECRET_HERE');\r\n\r\nfunction get_facebook_cookie($app_id, $app_secret) {\r\n $args = array();\r\n parse_str(trim($_COOKIE['fbs_' . $app_id], '\\\\\"'), $args);\r\n ksort($args);\r\n $payload = '';\r\n foreach ($args as $key =&gt; $value) {\r\n if ($key != 'sig') {\r\n $payload .= $key . '=' . $value;\r\n }\r\n }\r\n if (md5($payload . $app_secret) != $args['sig']) {\r\n return null;\r\n }\r\n return $args;\r\n}\r\n\r\n$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);\r\n\r\nif ($cookie &amp;&amp; getFileNameFromURL()==\"login.php\")\r\n{\r\n\r\n \/\/ save access token in session\r\n $_SESSION[\"facebook_access_token\"]=$cookie['access_token'];\r\n\r\n if($_GET[\"a\"]==\"logout\")\r\n {\r\n setcookie('fbs_'.FACEBOOK_APP_ID, '', time()-100, '\/', '');\r\n }\r\n else\r\n {\r\n $user = json_decode(file_get_contents(\r\n 'https:\/\/graph.facebook.com\/me?access_token=' .\r\n $cookie['access_token']));\r\n\r\n if ($user)\r\n {\r\n $_SESSION[\"UserID\"]=$user-&gt;name;\r\n $_SESSION[\"AccessLevel\"] = ACCESS_LEVEL_USER;\r\n $_SESSION[\"GroupID\"] = \"\";\r\n\r\n header(\"Location: menu.php\");\r\n exit();\r\n }\r\n }\r\n}<\/pre>\n<p>This code checks if Facebook cookie exists. If cookie is found we extract Facebook access token from the cookie and query Facebook server for user settings like name. If we got to this point successfully we populate PHPRunner session variables to enable access to PHPRunner application and redirect user to the menu page. We also save Facebook access token in session variable for future use.<\/p>\n<p>In case of log out we reset Facebook cookie marking it as expired. <\/p>\n<p>If you have a Facebook account you can see how Facebook Connect works in <a href=\"http:\/\/demo.asprunner.net\/volinrok_yahoo_com\/FacebookConnect\/login.php\" target=\"_blank\">sample PHPRunner application<\/a>.<\/p>\n<h3>4. Further enhancements<\/h3>\n<p>We have add a possibility for our users to connect using Facebook account. Now it&#8217;s time to do something fancy. <\/p>\n<p>Lets see how we can pull some additional info about current user from Facebook. <\/p>\n<p>The following code snippet connects to Facebook and retrieves all available user properties. <\/p>\n<pre lang=\"php\">$user = json_decode(file_get_contents(\r\n\t\t\t'https:\/\/graph.facebook.com\/me?access_token=' .\r\n\t\t\t$cookie['access_token']));<\/pre>\n<p><a href=\"http:\/\/developers.facebook.com\/docs\/reference\/api\/user\/\">More info<\/a> about Facebook user object.<\/p>\n<p>As an optional part you can explore user object properties right in the browser. If you want you can skip this part and jump directly to <strong>Display Facebook profile picture<\/strong> section.<\/p>\n<p>Glad you are game to learn a bit more about Facebook API. The good thing is that you can open <em>https:\/\/graph.facebook.com\/me?access_token=YOUR_ACCESS_TOKEN<\/em> URL in browser and see all available user properties there. You will need to find your access token in order to do that. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_user_object.png\" alt=\"\" title=\"facebook_user_object\" width=\"802\" height=\"480\" class=\"alignnone size-full wp-image-190\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_user_object.png 802w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_user_object-300x179.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_user_object-150x89.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_user_object-400x239.png 400w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/p>\n<p>If you already implemented Facebook connect in your application and were able to connect successfully access token is stored in the cookie fbs_YOUR_APP_ID. If you have Firefox with Firebug and Firecookie extensions installed you can quickly find what&#8217;s your access token is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_cookie.png\" alt=\"\" title=\"facebook_cookie\" width=\"838\" height=\"293\" class=\"alignnone size-full wp-image-188\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_cookie.png 838w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_cookie-300x104.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_cookie-150x52.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_cookie-400x139.png 400w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/p>\n<p>Another method of finding access tokens described in <a href=\"http:\/\/benbiddington.wordpress.com\/2010\/04\/23\/facebook-graph-api-getting-access-tokens\/\">this article<\/a>. <\/p>\n<h4>Display Facebook profile picture<\/h4>\n<p>As <a href=\"http:\/\/developers.facebook.com\/docs\/reference\/api\/user\/\">manual<\/a> suggests, to display profile picture you can use the following URL:<\/p>\n<pre lang=\"html4strict\"><img decoding=\"async\" src=\"https:\/\/graph.facebook.com\/me\/picture?access_token=YOUR_ACCESS_TOKEN\"><\/pre>\n<p>We proceed to the menu page in Visual Editor and insert PHP code snippet next to the yellow &#8216;username&#8217; box. In this snippet we are going to use Facebook access token we have saved in session variable.<\/p>\n<pre lang=\"php\">if ($_SESSION[\"facebook_access_token\"])\r\necho '<img decoding=\"async\" src=\"https:\/\/graph.facebook.com\/me\/picture?access_token='.\r\n$_SESSION[\"facebook_access_token\"].'\">';<\/pre>\n<p>If everything is implemented properly you going to see your profile picture next to your name. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_picture_profile.png\" alt=\"\" title=\"facebook_picture_profile\" width=\"384\" height=\"191\" class=\"alignnone size-full wp-image-189\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_picture_profile.png 384w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_picture_profile-300x149.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_picture_profile-150x74.png 150w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/p>\n<p>Yes, I&#8217;m one of those Facebook users who don&#8217;t have a profile picture. If you do, you going to see it, I promise.<\/p>\n<h4>Getting user email address<\/h4>\n<p>Getting access to additional properties requires explicit user permissions. Lets say we want to find what user email address is. <\/p>\n<p><strong>Step 1<\/strong><\/p>\n<p>Modify Login with Facebook button code:<\/p>\n<pre lang=\"html4strict\"><FB:LOGIN-BUTTON perms=\"email\">Login with Facebook<\/FB:LOGIN-BUTTON><\/pre>\n<p><strong>perms=&#8221;email&#8221;<\/strong> tells Facebook our application needs access to use email address. In this case user will be presented with the following popup window:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_email_perms.png\" alt=\"\" title=\"facebook_email_perms\" width=\"643\" height=\"413\" class=\"alignnone size-full wp-image-187\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_email_perms.png 643w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_email_perms-300x192.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_email_perms-150x96.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/03\/facebook_email_perms-400x256.png 400w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/p>\n<p><strong>Step 2<\/strong><\/p>\n<p>If permission granted you can access user email as <strong>$user->email<\/strong> (AfterAppInit code). For example you can display email address as a logged user name:<\/p>\n<pre lang=\"php\">$_SESSION[\"UserID\"]=$user->email;<\/pre>\n<p><a href=\"http:\/\/developers.facebook.com\/docs\/authentication\/permissions\/\">More info<\/a> about Facebook permissions. <\/p>\n<p>This is it.<br \/>\n&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/p>\n<p>Make sure you join <a href=\"http:\/\/www.facebook.com\/pages\/PHPRunner\/101291953274682\" target=\"_blank\">PHPRunner Facebook page<\/a>.<\/p>\n<p>More info on <a href=\"http:\/\/developers.facebook.com\/docs\/authentication\/\">Facebook authentication<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial we are going to use Facebook Javascript SDK. Here is how you can add Facebook Connect functionality to your PHPRunner application. 1. Register your website to get an app id. http:\/\/developers.facebook.com\/setup\/ Later you can see your application settings at http:\/\/www.facebook.com\/developers\/apps.php 2. Add &#8216;Login with Facebook&#8217; button to your application The natural place to add this button is a login page. Open login page in Visual Editor. Make sure &#8216;Show borders&#8217; option is turned on. Insert a new table row below &#8216;Remember password&#8217;&#8230;.<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2011\/03\/08\/adding-facebook-connect-functionality-to-your-application\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Adding Facebook Connect functionality to your application&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[11],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-php-category","category-tutorials","tag-facebook"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":10,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}