Page 2 - Implement Facebook Javascript SDK with PHP http://www.devarticles.com/c/a/PHP/Implement-Facebook-Javascript...
Loading SEO Topics...
Home PHP Page 2 - Implement Facebook Javascript SDK with PHP
PHP Watch our Tech Videos
RSS
Dev Articles Forums
Implement Facebook Javascript SDK with PHP
Articles
In this programming tutorial you will learn how to Forums
implement the Facebook Javascript SDK in an HTTPS All Feeds
environment with a little bit of help from PHP.
Write For Us
Weekly Newsletter
Author Info:
Your E-mail
By: Codex-M
Poor Best
Rating: / 27 Developer Updates
July 11, 2011
Free Website Content
TABLE OF CONTENTS: Contact Us
Site Map
Privacy Policy
1. · Implement Facebook Javascript SDK with
PHP Support
2. · Getting Facebook Like Button to Work in
HTTPS
SEARCH DEVARTICLES
3. · Making Facebook Comments and Like Box
Work in HTTPS Mode
print this article
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&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&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;
}
1 -> 5 02.01.2015 19:08
Page 2 - Implement Facebook Javascript SDK with PHP http://www.devarticles.com/c/a/PHP/Implement-Facebook-Javascript...
}
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(); ?>>
2 -> 5 02.01.2015 19:08
Page 2 - Implement Facebook Javascript SDK with PHP http://www.devarticles.com/c/a/PHP/Implement-Facebook-Javascript...
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.
Next: Making Facebook Comments and Like Box Work in HTTPS Mode >>
3 -> 5 02.01.2015 19:08
Page 2 - Implement Facebook Javascript SDK with PHP http://www.devarticles.com/c/a/PHP/Implement-Facebook-Javascript...
Stack Web2Carz.com
VIDEO: Adrian Peterson's Amazing Audi Wants Your Suspension to Do
Double Swiss Ball Push-Up Double Duty
PBH Network Talk Shop
101 Hot Selfies That Will Make You Too Lazy to Do Your Hair? What's Your
Thankful For Mirrors Go-To Quick Fix?
Ruby-on-Rails Faces Second Security Flaw in a Mozilla Popcorn Maker 1.0 Makes Videos More
Week Interactive
Ruby 2.0 Prepped for February 2013 Release Does HTML5 Need a Main Element?
1 Comment
Guest •
Social Plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social
features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the
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
Find More PHP Tutorials
Developer Shed Affiliates
MajesticSEO Reviews SEEKDOTNET Reviews AutoDesk Reviews LogMeIn Reviews Adobe Reviews
© 2003-2015 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics All Web Development Tutorials
DHTML ADO.NET
HTML Apache
JavaScript ASP
4 -> 5 02.01.2015 19:08
Page 2 - Implement Facebook Javascript SDK with PHP http://www.devarticles.com/c/a/PHP/Implement-Facebook-Javascript...
Ruby-on-Rails C++
Style Sheets ColdFusion
Web Authoring COM/COM+
Flash
XML Delphi-Kylix
C# Design Usability
Development Cycles
ASP.NET Embedded Tools
Java Graphic Design
MySQL IIS
Oracle Interviews
Photoshop
PHP VB.Net
Reviews Visual Basic
SQL Web Services
SQL Server Web Standards
5 -> 5 02.01.2015 19:08
