1.
1. Go to Facebook developer section and login your
Facebook`s developer account. By clicking on login button and enter your user
name & password.
2.
2. After login redirect to developer dashboard
section, from there you can create your own app by selecting dropdown “My Apps”
and by clicking on “Add a New App”. It
will be redirect to next step where you can able to create your own app.
3.
3. After clicking on “Add a New App” from developer
dashboard. Open a popup called “Create a New App ID”. Here you can able to
enter your App name and contact email id. App Name is a display name so enter a
friendly Display App Name. Click on “Create App ID” button.
4.
4. After creating App ID you will direct to App
Dashboard where you can able to set up your App and change app settings. You
can get here App ID & App Secret and also update other information. By clicking on “+ Add Platform” button to add
your platform where you will implement your App ID.
5.
5. On this screen you can select your platform
where you will implement your App ID eg. Website, iOS etc. As per now you can
select “Website” and save all app changes by clicking on “Save Changes” .
6.
6. After adding the platform, under website
platform section enter site url eg. Localhost or www.yoursite.com etc. and click on “Save
changes” button.
7.
7. Now, you can click on quick start button from
website platform section. Follow all steps mention in below screen and
JavaScript SDK code and enter your site url > click on Next button to
complete the process. Click on “Share”
box end of the screen and it will redirect to new window.
8.
8. Here you can able to select your App and get
code by enter require information. Set
up your facebook share button as per your requirement and also able to
customize. Click on “Get Code” button.
In next screen you can able see code.
9.
9. Finally, you got the code of your JavaScript SDK
and share button. Here you can able to
changes / select your App ID & language. Copy the code and this code paste
wherever you want to display this plugin/button.
110.
You can able to customize JavaScript SDK code
provides by facebook. You will able to add custom message eg. Title, image etc.
Code:
<div id="Facebook_Container" style="text-align:center;">
</div>
<script type="text/javascript">
$(document).ready(function () {
createHtml();
});
//create
html //
function createHtml() {
var title = "Join Our
Application & Enjoy With Friends.";
var summary = "Join Our
Application by clicking on this post and you get connected with friends. ";
var url = "https://www.mydomain.com/Account/Register/@Id";
var image = 'https://www.mtgtrade.com/Content/Images/Logos/AuctionWorxLogo1.png';
var appid = '<%=ConfigurationManager.AppSettings["FacebookConsumerKey"].ToString()
%>';
//login
pop height, width
var w = 600;
var h = 400;
var left = Number((screen.width / 2) - (w / 2));
var top = Number((screen.height / 2) - (h / 2));
//****//
//facebook
login window and pass paramemters like title, summary, url, image
var fb = '<a
rel="nofollow" class="btn-facebook" title=\"Share this post on
Facebook\" onclick="FbApp_Login(\'' +
title + '\',\'' +
summary + '\',\'' +
url + '\',\'' +
image + '\');"><i class="fa
fa-facebook-square"></i>Share On Facebook</a>';
var socialMediaButtons = fb;
//bind
social variables into div
jQuery("#DetailDiv").append('<div><table
width="100%"><tr><td
valign="top"><div>' +
socialMediaButtons + '</div></td></tr></table>
</div>');
//****//
}
//
Facebook login
function FbApp_Login(title, summary, url, image) {
FB.login(function (response) {
if (response.authResponse) {
statusChangeCallback(response,
title, summary, url, image);
}
}, { scope: 'email,user_photos,publish_actions' });
}
window.fbAsyncInit = function () {
FB.init({
appId: '***************',//--App ID
cookie: true, //
enable cookies to allow the server to access
xfbml: true, // parse
social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// This
is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response, title, summary, url,
image) {
if (response.status === 'connected') {
//
Logged into your app and Facebook.
FB.ui(
{
method: 'feed',
name: title,
link: url,
picture: image,
caption: title,
description: summary,
// source: url,
redirect_uri: url,
}
)
}
}
// Load
the SDK asynchronously
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
11. UI Interface
