Tuesday, 11 February 2014
Friday, 7 February 2014
How to Post on Facebook Wall Using ASP.NET & JavaScript from your Web-App
As this is my first post on this blog. Please correct me if I'm wrong some where else. Either Technically or non-technically.
Okay then, coming to the concept of posting on Facebook from your Web-Application. It's really interesting & feels happy. I wish to explain in steps, so that its easy to understand and follow the steps.
Step 1: Initially, we need to create an App in the Facebook developers. Followed by the link
And Select "Create a New App" to create App in Facebook. As show below.
Step 2: Then, an pop up will be displayed where we need to enter the name of the App, Namespace(which is optional) & choose the category.
And click "Create App" button as show below.
And click "Create App" button as show below.
Step 3: Enter the Security Check as follows and then click Submit button.
That's it! Your App named "Sample App" is created & dashboard is as show below.
Step 4: In the above image, you can see the App ID, App Secret. As these two are very important(please don't share App ID & App Secret)
Next, click on "Settings" as shown in the above image.
Step 5: As of now, we are using the localhost. So Enter "localhost" in the App Domains and Click on "Add platform".
Step 6: Then after, select the "App on Facebook", as we are creating the App to interact with our Web-Application.
Step 7: Next, you can find the "Canvas URL" and "Secure Canvas URL". Here we need to enter the post back URL, the URL of your local host.
Now, you have created Facebook App & settings has been done.
****************************Let's Start with the coding part************************
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script language="javascript" type="text/javascript">
function LoginToFacebook() {
window.fbAsyncInit = function () {
FB.init({
appId: "Your AppID",
channelUrl: "Your Postback URL",
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
var accesstoken = "";
FB.login(function (response) {
accesstoken = response.authResponse.accessToken;
if (response.authResponse) {
FB.api('/me', function (response) {
postfacebook(accesstoken); //function to post a message on facebook wall
});
} else {
alert("User cancelled login or did not fully authorize.");
}
}, { scope: ['publish_stream', 'offline_access', 'manage_pages', 'user_photos', 'photo_upload', 'user_likes', 'read_stream'] });
} //function close brace
</script>
<body>
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: "Your AppID",
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
frictionlessRequests: true
});
};
(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="+ document.getElementById('facebookappid').value ;;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your AppID";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
<script type="text/javascript">
function postfacebook(accesstoken) {
var wallpost;
wallpost = {
message: "Hi. This is My First Post to Facebook. Thank You!"
};
FB.api('/me/feed', 'post', wallpost , function (response) {
if (!response || response.error) {
alert('Facebook Error occured');
}
});
}
</script>
*****************************That's it. Thank you!************************************
You can call the LoginToFacebook javascript function from code behind. (eg: Default.aspx.cs).
Please let me know if you have any queries regarding the concept explained.
However, I have attached the sample code regarding the FaceBook Post.
Sample Code link is as follows
https://drive.google.com/file/d/0Bz0h2cGhiTEYMk55Q2YzaUJWVFE/edit?usp=sharing
Next, time "Let's try something different." with different posts.
-Indrajeet
That's it! Your App named "Sample App" is created & dashboard is as show below.
Step 4: In the above image, you can see the App ID, App Secret. As these two are very important(please don't share App ID & App Secret)
Next, click on "Settings" as shown in the above image.
Step 5: As of now, we are using the localhost. So Enter "localhost" in the App Domains and Click on "Add platform".
Step 7: Next, you can find the "Canvas URL" and "Secure Canvas URL". Here we need to enter the post back URL, the URL of your local host.
Now, you have created Facebook App & settings has been done.
****************************Let's Start with the coding part************************
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script language="javascript" type="text/javascript">
function LoginToFacebook() {
window.fbAsyncInit = function () {
FB.init({
appId: "Your AppID",
channelUrl: "Your Postback URL",
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
var accesstoken = "";
FB.login(function (response) {
accesstoken = response.authResponse.accessToken;
if (response.authResponse) {
FB.api('/me', function (response) {
postfacebook(accesstoken); //function to post a message on facebook wall
});
} else {
alert("User cancelled login or did not fully authorize.");
}
}, { scope: ['publish_stream', 'offline_access', 'manage_pages', 'user_photos', 'photo_upload', 'user_likes', 'read_stream'] });
} //function close brace
</script>
<body>
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: "Your AppID",
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
frictionlessRequests: true
});
};
(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="+ document.getElementById('facebookappid').value ;;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your AppID";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
<script type="text/javascript">
function postfacebook(accesstoken) {
var wallpost;
wallpost = {
message: "Hi. This is My First Post to Facebook. Thank You!"
};
FB.api('/me/feed', 'post', wallpost , function (response) {
if (!response || response.error) {
alert('Facebook Error occured');
}
});
}
</script>
*****************************That's it. Thank you!************************************
You can call the LoginToFacebook javascript function from code behind. (eg: Default.aspx.cs).
Please let me know if you have any queries regarding the concept explained.
However, I have attached the sample code regarding the FaceBook Post.
Sample Code link is as follows
https://drive.google.com/file/d/0Bz0h2cGhiTEYMk55Q2YzaUJWVFE/edit?usp=sharing
Next, time "Let's try something different." with different posts.
-Indrajeet
Subscribe to:
Comments (Atom)