References (to facilitate future use, we will summarize some small steps)
For information about all Facebook permissions and other APIs, visit the following address: https://developers.facebook.com/docs/.
Now a project is the development of facebook web app, the development of web app needs to register as a facebook developer, this is very simple, enter the https://developers.facebook.com/
The registration process is not detailed. It is very simple. Note the following:
1. The website url and domain items in the website project do not need to start with http: //, while the canvas URL of the app on facebook requires http. In addition, this section is the address of the iframe embedded when the app is actually opened from facebook.
2. If the local machine is tested, you can directly use localhost as the address. Remember to change it back when it comes online. You can also use the host file to specify a domain name. It is no problem to add a port to access the domain name, that is, you cannot use an IP address to raise traffic.
After registration, let's start development. Instead of using the C # sdk, we directly use the javascript api provided by facebook:
1. Create a static page and introduce scripts
Http://connect.facebook.net/en_US/all.js
In addition, jquery should be referenced to facilitate script writing;
2. In addition, you need a div at the top of the page:
<Div id = "fb-root">
If not, an error is reported in the script. It can be stored anywhere, and it is not displayed. But it should be placed before the script of the fb initial statement.
3. Write a segment script. Here we have a logon button:
FB. init ({appId: '{here is appid}', status: true, cookie: true, xfbml: true });
$ ("# FBLogin"). click (function (){
FB. login (function (response ){
If (response. session ){
// Login successful
Window. location = 'about. aspx'
} Else {
//
}
},{ Perms: "publish_stream "});
});
First, the fb object is initialized. appid is required, which is automatically generated when it is created. The second one registers a login button click event and then calls the FB encapsulated login method directly after clicking it. The first parameter is the callback function, and the second parameter is a json object, it indicates that the access permission of the app is publish_stream, which is almost the minimum permission.
FB. api ({path}, 'get', {}, function (response ){
If (! Response | response. error ){
Alert ('error occured ');
}
Else {
...
}
})Path is the path of the corresponding access content. For example, if you access personal data, enter me to access the information of a video. You can directly enter the video id. It's easy. The callback function contains all returned json objects, which is easy to write. Half of the project is used. In addition to login and exit, these two types of APIs are also used, which is simple.
Below is a demo written by myself.
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script src = "https://connect.facebook.net/en_US/all.js"> </script>
<Script type = "text/javascript" src = "js/jquery-1.6.1.min.js"> </script>
</Head>
<Body>
Alt = "facebook sign up" onclick = "facebook_signup ()"/> & nbsp; log in with FaceBook register!
<Div id = "fb-root">
</Div>
<Script type = "text/javascript">
Window. fbAsyncInit = function (){
FB. init ({appId: '000000', status: true, cookie: true, xfbml: true });
};
(Function (){
Var e = document. createElement ('script ');
E. type = 'text/javascript ';
E. src = 'HTTP: // connect.facebook.net/zh_tw/all.js ';
E. async = true;
Document. getElementById ('fb-root'). appendChild (e );
}());
Function facebook_signup (){
FB. login (function (response ){
If (response. session ){
FB. api ("me", function (response ){
$. Ajax ({
Type: "POST ",
Url: "Action. ashx? Time = "+ Math. random (),
Data: "id =" + response ["id"] + "& first_name =" + response ["first_name"] + "& last_name =" + response ["last_name"] + "",
Success: function (msg ){
If (msg = "Hello "){
Alert (msg );
} Else {
Alert (msg );
}
}
});
});
} Else {
Alert ("failed ");
}
});
}
</Script>
</Body>
</Html>Source blog info: http://www.cnblogs.com/zsz417/archive/2011/08/19/2146001.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
