Home arrow PHP arrow Page 2 - Implement Facebook Javascript SDK with PHP
PHP

Implement Facebook Javascript SDK with PHP


In this programming tutorial you will learn how to implement the Facebook Javascript SDK in an HTTPS environment with a little bit of help from PHP.

Author Info:
By: Codex-M
Rating: 5 stars5 stars5 stars5 stars5 stars / 27
July 11, 2011
TABLE OF CONTENTS:
  1. · Implement Facebook Javascript SDK with PHP
  2. · Getting Facebook Like Button to Work in HTTPS
  3. · Making Facebook Comments and Like Box Work in HTTPS Mode

print this article
SEARCH DEVARTICLES

Implement Facebook Javascript SDK with PHP - Getting Facebook Like Button to Work in HTTPS
(Page 2 of 3 )

Getting Facebook “Like” Button to Work Perfectly in HTTPS

One of the most commonly used Facebook social plugins is the Like button. Unfortunately, it won't work perfectly in an HTTPS environment without the use of the JavaScript SDK. Below are the complete steps to get your "Like" button to work in HTTPS:

1.) Go to this page: https://developers.facebook.com/docs/reference/plugins/like/
2.) Configure your own Facebook like button code.
3.) Get the XFBML version of the Like button. The code will look like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=154654512748578&amp;xfbml=1"></script><fb:like href="https://www.yoursecuredomain.com/" send="true" width="450" show_faces="true" font="verdana"></fb:like>

4.) Remove this part in the Facebook Like button code:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=154654512748578&amp;xfbml=1"></script>

5.) This is the final Facebook like button that you will be using in your PHP Script:

<fb:like href="https://www.yoursecuredomain.com/" send="true" width="450" show_faces="true" font="verdana"></fb:like>

6.) Embed or paste the Facebook like button within the <body> tag in the PHP - JavaScript SDK example provided earlier. See the final code below:

<?php
define('FACEBOOK_APP_ID', 'REPLACE WITH YOUR OWN APP_ID');
define('FACEBOOK_SECRET', 'REPLACE WITH YOUR OWN APP_SECRET');
function get_facebook_cookie($app_id, $application_secret) {
$args = array();
parse_str(trim($_COOKIE['fbs_' . $app_id], '\"'), $args);
ksort($args);
$payload = '';
foreach ($args as $key => $value) {
if ($key != 'sig') {
$payload .= $key . '=' . $value;
}
}
if (md5($payload . $application_secret) != $args['sig']) {
return null;
}
return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
<body>

<!-- Now put your Facebook Like button here using the XFBML version-->

Click the Facebook "Like" button to recommended this page!<br /><br />
<fb:like href="https://www.yoursecuredomain.com/" send="true" width="450" show_faces="true" font="verdana"></fb:like>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
</body>
</html>

7.) To test the implementation with SSL, try saving the script above (of course putting your own App_ID and secret) then upload it to your server. Supposing you named it as testsdk.php, then you can open it in the browser as follows:

https://www.yoursecuredomain.com/testsdk.php

You will notice that you won't be receiving any SSL warnings for the use of Facebook "Like" button unlike when you use use the iFrame method.

Integrate Facebook JavaScript SDK in CMS - Wordpress Example

Now that you have learned the basic concepts and PHP script to implement Facebook JavaScript SDK in secure pages, let's provide a working example how you will be able to integrate it site wide using a CMS PHP-powered template.

One of the most common CMS' is Wordpress, so let's try implementing the above concepts. If you are using another CMS, the same implementation concepts apply.

1.) Login to your Wordpress admin panel.
2.) Go to Appearance – Editor – and click header.php template. Do not forget to backup your header.php source code first before doing any changes.
3.) Before <!DOCTYPE html , paste this PHP code:

<?php
define('FACEBOOK_APP_ID', 'REPLACE WITH YOUR APP_ID');
define('FACEBOOK_SECRET', 'REPLACE WITH APP SECRET');
function get_facebook_cookie($app_id, $application_secret) {
$args = array();
parse_str(trim($_COOKIE['fbs_' . $app_id], '\"'), $args);
ksort($args);
$payload = '';
foreach ($args as $key => $value) {
if ($key != 'sig') {
$payload .= $key . '=' . $value;
}
}
if (md5($payload . $application_secret) != $args['sig']) {
return null;
}
return $args;
}
$cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
?>

4.) Add the XML namespace to <HTML> tag in your header.php:

xmlns:fb="https://www.facebook.com/2008/fbml"

For example if this is your HTML tag in header.php:

<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

You can add the XML namespace as follows:

<html xmlns="https://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

5.) Save changes to header.php
6.) Go to the footer.php of your Wordpress template. Make sure to backup the original source code of footer.php before doing any changes. Paste the SDK loader just before </body> tag:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>

IMPORTANT: Since your website is using HTTPS mode, you should be using the HTTPS version of the Facebook JavaScript SDK library and that is:

https://connect.facebook.net/en_US/all.js

7.) You can then implement your Facebook social plugins that will be using JavaScript SDK. Supposing you will be implementing both Facebook Like buttons and the new Google Plus button. You can implement the code below in your single.php, page.php or any affected Wordpress templates where you should like the button to appear:

<table border="0">
<tbody><tr>
<td><fb:like href="<?php the_permalink(); ?>" send="true" width="375" show_faces="false" colorscheme="dark" font="verdana"></fb:like></td>
<td><g:plusone href="<?php the_permalink(); ?>"></g:plusone></td>
</tr>
</tbody></table>

8.) Try saving the changes and you will find out that the HTTPS (secure pages) won't break using any of the Facebook social plug-ins.


blog comments powered by Disqus
PHP ARTICLES

- Removing Singletons in PHP
- Singletons in PHP
- Implement Facebook Javascript SDK with PHP
- Making Usage Statistics in PHP
- Installing PHP under Windows: Further Config...
- File Version Management in PHP
- Statistical View of Data in a Clustered Bar ...
- Creating a Multi-File Upload Script in PHP
- Executing Microsoft SQL Server Stored Proced...
- Code 10x More Efficiently Using Data Access ...
- A Few Tips for Speeding Up PHP Code
- The Modular Web Page
- Quick E-Commerce with PHP and PayPal
- Regression Testing With JMeter
- Building an Iterator with PHP

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials