最近在弄一个项目,需要使用Facebook进行登陆并且获取用户Facebook相关的数据。网上查找有关Facebook应用设置教程,中文资料中,要么介绍的是N版之前的API,要么是App端的教程。Facebook文档很多介绍的也不是很齐全,自己仔细摸索一番,踩坑经验~

废话不多说,要使用Facebook必须先FQ,对于一个学渣来说,FQ什么的最喜欢了~

创建facebook账号

要上facebook申请应用,首先要创建facebook账号;
上Facebook创建账号没什么好说的,唯一需要注意一点的是,最好填写真实的信息,不然Facebook账号丢失的话,找起来很麻烦~

申请Facebook应用

进入Facebook应用申请入口: Facebook应用申请

创建应用入口

点击创建新应用即可~

填写应用名

就是Facebook应用的名称,当然,你可以随便取,who case !

选择应用类别

按照你的实际需求进行选择,选择完毕后点击创建。

填写应用地址

这一步需要注意的是,请加上http:// 或者https:// 协议前缀~
如果你的应用是https的,请不要使用http 否则Facebook定位不到你的应用网址

创建应用完成

应用创建完成后,会有一些基础的文档提供给你使用~ 不过建议进行进一步设置后再进行开发。

Facebook应用设置

进入app

点击 My apps > app 进入你的app界面

上图所示的是你的应用的基本一些基本信息

基本设置

点击左侧settings按钮进入设置界面~
设置你的联系邮箱,如果不设置联系邮箱,你的应用只可以供你自己的Facebook账号使用!

让你的Facebook应用成为公共应用

上图设置的邮箱这里就派上了用场了

点击Yes,让你的应用成为公共应用

别紧张,点击确认就OK了~

高级设置

settings > advanced

Client OAuth login is enabled but you haven't listed any valid OAuth redirect URIs. Click here for more information.

一进来就会发现这个警告,意思是说,客户端OAuth登陆未添加监听跳转地址。
也就是说,必须要监听授权监听,比如说,用户一开始登陆了你的应用,然后在facebook中取消了你的应用授权,这个时候这个地址就派上用场了。

设置这个地址,必须要注意两点:

  • 这个地址必须在你的应用网址域名下
  • 这个地址必须是真实存在的,是可以访问的

比如说你的应用地址是 http://www.a.com
你这里就可以填写http://www.a.com/cb.html

还需要定义跳转地址

这里填写的也是 http://www.a.com/cb.html

检测应用是否设置成功

这里不讲怎么进行授权、登陆之类的API,因为这些API,Facebook官网API还算是比较清晰的~
当我们写好程序后,需要把程序代码提交到服务器上,就是我们在基本设置中填写的 Wetsite-URl

调用登陆API出现这个登陆界面就表示设置成功了
如果是首次登陆的话还会弹出授权界面,用户同意授权后,可以获取用户的相关信息

至此基本的设置已经都完成了,使用Facebook应用攻击美帝吧!

其他问题

手机端不能登陆

当我在PC端测试通过后,同样的代码在手机网页中却会提示错误。

网上找到的资料说是要设置mobile-site-url。

settings > base
2.4版本的Facebook改成了App Domains,之前的版本叫mobile-site-url,并且进行设置也不在同一处。

App Domains设置需要注意两点

  • 必须是website url 下的一个子域名
  • 这个域名是真实存在的
  • http 或者 https协议前缀必须加上

比如说website url 是www.a.com, App.Domains 可设置为 sub.a.com
比如说website url 是sub.a.com, App.Domains 可设置为 son.sub.a.com

前面的设置都很简单,基本上都是一次过,唯独手机端登陆,Facebook居然没有写明,坑死我了~

设置应用图片

Facebook应用的默认图片

进入 App Details 进行设置

修改图片即可

本地调试

每次都将应用程序上传至服务器调试比较麻烦,如果想在进行本地调试,进入Test Apps进行设置。

获取其他权限

Facebook默认设置了3种权限,最高权限为email,就是除了获取用户名与用户头像外,还可以获取用户的Email。
如果还需要获取其他权限,比如说好友列表权限!
添加完成后需要按照Facebook要求的格式提交申请~

创建其他类型应用

如果我们的Facebook 关联了Android或者IOS应用,在Settings > base 中添加设置即可

其他

此教程适用于Facebook2.4应用版本~
这篇文章是我在进行设置的时候所写,部分地方理解不是很全面~
Facebook应用还有很多的功能,比如说数据分析,如果需要,细细摸索吧~

相关资料

https://developers.facebook.com/
https://developers.facebook.com/docs/javascript
http://fbdevwiki.com/wiki/FB.ui
http://stackoverflow.com/questions/12547088/how-do-i-customize-facebooks-sharer-php
http://stackoverflow.com/questions/16463030/how-to-add-facebook-share-button-on-my-website


文章来自 Petrus.Law,转载请注明出处

Facebook 网页应用图文设置教程的更多相关文章

  1. 零基础图文傻瓜教程接入Facebook的sdk

    零基础图文傻瓜教程接入Facebook的sdk 本人视频教程系类   iOS中CALayer的使用 0. 先解决你的 VPN FQ上外网问题,亲,解决这一步才能进行后续操作^_^. 1. 点击右侧链接 ...

  2. Sublime Text 3 全程详细图文原创教程

    Sublime Text 3 全程详细图文原创教程(持续更新中...) 一. 前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知.最初也是不知道从何 ...

  3. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  4. mysql安装图解 mysql图文安装教程(详细说明)

    MySQL5.0版本的安装图解教程是给新手学习的,当前mysql5.0.96是最新的稳定版本. mysql 下载地址 http://www.jb51.net/softs/2193.html 下面的是M ...

  5. CentOS 6.0 图文安装教程

    CentOS 6.0下载地址:wget http://ftp.riken.jp/Linux/centos/6.0/isos/i386/CentOS-6.0-i386-bin-DVD.iso 下边就是安 ...

  6. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  7. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  8. 网页图表Highcharts实践教程之标签组与载入动画

    网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...

  9. 网页图表Highcharts实践教程标之添加题副标题版权信息

    网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信 ...

随机推荐

  1. 阿里云server该数据光盘安装操作

    猛击这里:阿里云server该数据光盘安装操作

  2. Windows 8 应用开发 - 挂起与恢复

    原文:Windows 8 应用开发 - 挂起与恢复      Windows 8 应用通常涉及到两种数据类型:应用数据与会话数据.在上一篇提到的本地数据存储就是应用层面的数据,包括应用参数设置.用户重 ...

  3. Spring Boot 基础

    Spring Boot 基础 Spring Boot 项目(参考1) 提供了一个类似ASP.NET MVC的默认模板一样的标准样板,直接集成了一系列的组件并使用了默认的配置.使用Spring Boot ...

  4. leetcode——Evaluate Reverse Polish Notation 求算式值(AC)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  5. HDU 4311 Meeting point-1 && HDU 4312 Meeting point-2

    这俩个题  题意::给出N(<1e5)个点求找到一个点作为聚会的地方,使每个点到达这里的距离最小.4311是 曼哈顿距离 4312是 切比雪夫距离: 曼哈顿距离 :大家都知道 对于二维坐标系a( ...

  6. RSA算法加密解密

    该工具类中用到了BASE64,需要借助第三方类库:javabase64-1.3.1. jar 注意:RSA加密明文最大长度117字节,解密要求密文最大长度为128字节,所以在加密和解密的过程中需要分块 ...

  7. Java线程学习笔记(两) 线程异常处理

    线程捕获异常: 情况下,我们在main()方法里是捕捉不到线程的异常的,比例如以下面代码: public class ExceptionThread implements Runnable{ @Ove ...

  8. [LeetCode203]Remove Linked List Elements

    题目: Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 ...

  9. .NET读写Excel工具Spire.Xls使用(1)入门介绍

    原文:[原创].NET读写Excel工具Spire.Xls使用(1)入门介绍 在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式 ...

  10. Android - 支持不同的设备 - 支持不同的屏幕

    Android整体上按照两大类来分类设备屏幕:尺寸和分辨率.app在设备上运行应该考虑大小和分辨率.同样的,你应该包含不同的资源来让app适应不同的屏幕大小和分辨率. 整体上有四种尺寸:小的,正常的, ...