Friday, May 16, 2014

How to add facebook share button to your website



Assumption


  • I assume that you already had created Facebook App and you have AppId for the particular domain.


How to add a Facebook share button to your website page

Let’s have a look how to add share button to your web page, so that people can share your web content on Facebook.

Step - 1:  Get a Facebook AppId for your domain.

First of all to add share button to your website you must have Facebook AppId for the domain on which you would like to place a button. This is basically to ensure security perspective.

If you don’t know how to set up Facebook App please have a look at my blog on same.

Step – 2: Add the Facebook JavaScript SDK to you web page.

Facebook is providing code to initialize JavaScript SDK. You need to add this code within <body>…</body> tag of your .php/.html/.asp page.

I suggest using Asynchronous JavaScript code. Facebook provide two methods as follow
Synchronous: Loads in order it appears in your code

Asynchronous: It simultaneously loads JavaScript SDK along with your page code. So if by some reason suppose SDK is not able to load still other element of your page will continue to load.

Please note Asynchronous code to add into your web page

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

NOTE: Make sure you replace ‘YOUR APP ID’ with your actual App ID for your website. You can always find it on the Facebook Application Page. (When logged in to Facebook, you’ll see all applications you’ve created under your personal profile.)

Step – 3: Add code to load JQuery Library (Here we will use 1.6.1 as base version)

Just add following code to your web page. We will use JQuery from google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Step – 4: Displaying share dialog box

Now we are ready to define share dialog box using JQuery and Facebook fb.ui function. Insert the following code in your page

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: ‘http://www.groupstudy.in/img/logo3.jpeg’,
caption: 'Top 3 reasons why you should care about your finance',
description: What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…',
message: ''
});
});
});
</script>


This code tells jQuery to attach a Share dialog to the DIV in your code with the ID of “share_button”. You can insert multiple share buttons on a page by repeating this code, making sure you use a unique ID for each (eg #share_button1, #share_button2).




You can always customize dialog box by changing values of these parameters.
Name: Text appear on the first line of the share dialog box, just below the personalized message box. When this posted on your timeline this text become hyperlink to your post with link provided in “Link” parameter.

Link: This is the actual URL you would like to share on your Facebook timeline. Make Sure this URL should contain same domain as Facebook App made of.

Now if you try to share URL any other domain/website than following error message will be appear.




Picture: Here you have to specify URL of the picture which should appear beside the post on your timeline. 

Caption: This text displays under the Name/Link. Maximum displayed characters: 100;

Description: This text displays under the Caption. Maximum displayed characters: 270, followed by a “See more” link to show the rest;

Message: This field allowed you to pre-populate the personalized message box at the top of the Share dialog. However, Facebook would prefer that you don’t pre-populate the message field as they want the user to enter a personalized message and, as Alison Gianotto at Snipe.Net pointed out, the “message” field has been deprecated and is now ignored. So just leave it blank.


Step – 5: Add Linking text or share button image which will trigger above code.


You can launch the Share dialog using either linked text or an image. We will add share button and trigger the event.

 


Just insert the link/image in your index file and add the ID “share_button.”

<img src = "share_button.png" id = "share_button">When a user clicks on that button, it will pop up the Share dialog box.

Once the user fills in their message and clicks the Publish button, the post will appear on their Wall and may appear in their friends’ News Feeds (depending on their settings).

Step – 6: Add style sheet to change cursor type when it is on share button.

Add following code just before the image tag

<style type=”text/css”> img#share_button {cursor: pointer;} </style>


Thursday, May 15, 2014

How to create facebook app for website integration



How to create Facebook application to get app id for your website

In this article, I’ll show you how to set up a Facebook application for your website domain so you can integrate Facebook features on your website, such as the Share Button, which require that your domain have an App ID. Facebook defines “App ID” or “appId” as “a unique identifier for your site that ensures that we have the right level of security in place between the user and your website.”


When integrating the Facebook Social Plugins (Like Button, Send Button, Comments, etc.) into your website pages you don’t need an App ID, but for other features an App ID required, such as the Share Button.

It’s pretty easy to set up a Facebook application for your domain, providing you with an App ID you can use for Facebook integration features on all pages of your domain or subdomains of your domain.

Here’s how…


Step – 1: You need to become a Facebook Developer



I assume that you are new to Facebook app development and you have not ever created Facebook app in your life till yet but you already using Facebook as user(if not register yourself first for Facebook) . First login to the Facebook by http://www.facebook.com. 





Once you logged in, register yourself first as Facebook developer by using following link http://developers.facebook.com . If you are already register Facebook developer skip this step.







Facebook with ask your phone number and other relevant information. This is just to verification process. Facebook will send you verification code on your mobile which you suppose to enter as confirmation code.




That’s it. This all your have to do yourself register as Facebook developer.

Step – 2: Create new app

Go to App Tab, Click on Create a new App




Facebook as your application Display Name, now wherever your application is displayed this name will be appear. And Namespace is unique space with in which any area of your application development become unique.


Once you enter this details Facebook will ask you Security Check code to Enter (Captcha). On successful creation user reached dashboard as landing page as seen below. Here please note AppId for future reference




Step – 3: Setting up your App for web development


Go to Settings Tab and Click on Add Platform




Now here Select Website





Add URL of your website on which you would like to integrate with Facebook such as “http://www.example.com/” . Save Changes.App is ready to be used now.






As a developer most important thing for you is your AppId will be used for the Facebook App to work


That's all you have to ...