A client that I have been working for had an interesting request for me a couple weeks ago. He wanted to create a campaign for his Facebook page where an individual would get rewarded with a free music download for liking the page. This was already accomplished from the Facebook page, but I was curious if such a thing could be done directly from a web site, since Facebook’s button is generated through Javascript code. What I really wanted to do was create a page redirect to this free music download page once the Like button was clicked. Here are the steps I’ve done to make this work:
-
- Create an new application and get an app id by going here. Get started and follow the steps after clicking “Create New App”.
-
- Generate the Facebook button code by going here. After you’ve entered in the page you are putting the like button on, click on the “Get Code” button.
-
- When the box pops up, I selected “XFBML”. Also make sure to select the application you created in step one next to “This script uses the app ID of your app:”. Follow the steps that Facebook provides. You will need to add “xmlns:fb=”http://ogp.me/ns/fb#” to your <html> tag.
- After the first body tag, place the code that Facebook suggests. This is what I placed:
<body>
<div id="fb-root"></div>
<script>
(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/en_US/all.js#xfbml=1&appId=Application ID that was created in the first step";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
- Don’t forget to add the Like button where you want it on the page. This code can be placed anywhere you want to appear on the page:
<fb:like href="The address of the page the button sits on" send="true" width="450" show_faces="true"></fb:like>
- Now that all the Facebook code has been added to the page, you’ll need to add a little bit of code for the redirect. Looking at the script that was placed right before the body tag add these lines as shown in bold:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'Application ID that was created in the first step', status: true, cookie: true,xfbml: true});
FB.Event.subscribe("edge.create", function(targetUrl) {
window.location.href = "The address of the page you want to redirect to.";
});
FB.Event.subscribe("edge.remove", function(targetUrl) {
console.log('edge.remove');
});
};
(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/en_US/all.js#xfbml=1&appId=Application ID that was created in the first step";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Be First to Comment