fbrell
>_
☰
Examples
Docs
☼
⚙
Status:
waiting
Disconnect
▼
Facebook Login
1 - Basic Login
2 - Checking and Tracking Login Status
3 - Requesting Additional Permissions
4 - Putting it all together
5 - Requesting Business Asset Access Tokens
▼
Graph API
1 - Reading
2 - Reading Edges
3 - Page Admin
▼
Sharing
1 - Social Plugins
2 - FB.ui Dialogs
▼
examples
exampl
▼
viewexamples
exampl
Facebook Login · 4 - Putting it all together
▶ Run
<h1>Putting it all together</h1> <p>This example shows you a fairly complete login system implemented using the JavaScript SDK, with the end result being a simple API call that prints your name. You can see how the response from the auth.statusChange event can be used to determine whether someone is logged in or not.</p> <h2>The Login Example</h2> <div class="fb-login-button" id="loginBtn" data-max-rows="1" data-size="medium"></div> <div id="accountInfo" style="padding-top: 20px">You haven't logged in yet.</div> <script> FB.Event.subscribe('auth.statusChange', function(response) { Log.info('Status Change Event', response); if (response.status === 'connected') { showAccountInfo(); } else { document.getElementById('loginBtn').style.display = 'block'; } }); FB.getLoginStatus(function(response) { Log.info('Login Status', response); if (response.status === 'connected') { showAccountInfo(); } else { document.getElementById('loginBtn').style.display = 'block'; } }); function showAccountInfo() { FB.api('/me?fields=name,picture', function(response) { Log.info('API response', response); document.getElementById('accountInfo').innerHTML = ('<img src="' + response.picture.data.url + '"> ' + response.name); }); document.getElementById('loginBtn').style.display = 'none'; } </script> <h3>Related Guides</h3> <p>Read <a href="https://developers.facebook.com/docs/facebook-login/login-flow-for-web/">our guide to using the JavaScript SDK for Facebook Login</a> to learn more about this process.</p>
// Output will appear here. Press Cmd+Enter to run.
Log
🗑
📋
Loading SDK...
GitHub
Settings
✕
App ID
Server
Version
Locale
en_US
af_ZA
ak_GH
am_ET
ar_AR
as_IN
ay_BO
az_AZ
be_BY
bg_BG
bm_ML
bn_IN
bp_IN
br_FR
bs_BA
bv_DE
ca_ES
cb_IQ
ck_US
co_FR
cs_CZ
cx_PH
cy_GB
da_DK
de_DE
eh_IN
el_GR
em_ZM
en_GB
en_IN
en_OP
en_PI
en_UD
en_XA
eo_EO
es_CL
es_CO
es_ES
es_LA
es_MX
es_VE
et_EE
eu_ES
fa_IR
fb_AA
fb_AC
fb_AR
fb_HA
fb_HX
fb_LL
fb_LS
fb_LT
fb_RL
fb_ZH
fbt_AC
ff_NG
fi_FI
fn_IT
fo_FO
fr_CA
fr_FR
fv_NG
fy_NL
ga_IE
gl_ES
gn_PY
gu_IN
gx_GR
ha_NG
he_IL
hi_FB
hi_IN
hr_HR
ht_HT
hu_HU
hy_AM
id_ID
ig_NG
ik_US
is_IS
it_IT
iu_CA
ja_JP
ja_KS
jv_ID
ka_GE
kk_KZ
km_KH
kn_IN
ko_KR
ks_IN
ku_TR
ky_KG
la_VA
lg_UG
li_NL
ln_CD
lo_LA
lr_IT
lt_LT
lv_LV
mg_MG
mi_NZ
mk_MK
ml_IN
mn_MN
mos_BF
mr_IN
ms_MY
mt_MT
my_MM
nb_NO
nd_ZW
ne_NP
nh_MX
nl_BE
nl_NL
nn_NO
nr_ZA
ns_ZA
ny_MW
om_ET
or_IN
pa_IN
pcm_NG
pl_PL
ps_AF
pt_BR
pt_PT
qb_DE
qc_GT
qe_US
qk_DZ
qr_GR
qs_DE
qt_US
qu_PE
qv_IT
qz_MM
rm_CH
rn_BI
ro_RO
ru_RU
rw_RW
sa_IN
sc_IT
se_NO
si_LK
sk_SK
sl_SI
sn_ZW
so_SO
sq_AL
sr_RS
ss_SZ
st_ZA
su_ID
sv_SE
sw_KE
sy_SY
sz_PL
ta_IN
te_IN
tg_TJ
th_TH
ti_ET
tk_TM
tl_PH
tl_ST
tn_BW
tq_AR
tpi_PG
tr_TR
ts_ZA
tt_RU
tz_MA
uk_UA
ur_PK
uz_UZ
ve_ZA
vi_VN
wo_SN
xh_ZA
yi_DE
yo_NG
zh_CN
zh_HK
zh_TW
zu_ZA
zz_TR
Log Level
debug
info
warn
error
View Mode
Website
Canvas
Page Tab
Auto Init SDK
Auto Status Ping
Frictionless Requests