fbrell
>_
☰
Examples
Docs
⚙
Log in with Facebook
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
Editor
Output
Log
Sharing · 2 - FB.ui Dialogs
▶ Run
<h1>Sharing using FB.ui() Dialogs</h1> <p>Below are some simple examples of how to use UI dialogs in a web page.</p> <h3>Sharing Links</h3> <div id="shareBtn" class="btn btn-success clearfix">Share Dialog</div> <p>The Share Dialog enables you to share links to a person's profile without them having to use Facebook Login. <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Read our Share Dialog guide</a> to learn more about how it works.</p> <script> document.getElementById('shareBtn').onclick = function() { FB.ui({ display: 'popup', method: 'share', href: 'https://developers.facebook.com/docs/', }, function(response){}); } </script> <h3>Publishing Open Graph Stories</h3> <p>The Share Dialog can also be used to publish Open Graph stories without using Facebook Login or the Graph API. <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Read our Share Dialog guide</a> to learn more about how it works.</p> <div id="ogBtn" class="btn btn-success clearfix">Simple OG Dialog</div> <script> document.getElementById('ogBtn').onclick = function() { FB.ui({ display: 'popup', method: 'share_open_graph', action_type: 'og.likes', action_properties: JSON.stringify({ object:'https://developers.facebook.com/docs/', }) }, function(response){}); } </script> <h3>Sending App Requests</h3> <p><a href="https://developers.facebook.com/docs/games/requests/">Requests</a> can be sent by any Facebook Apps that are categorised as Games and have a Canvas, iOS, or Android implementation. The JavaScript SDK enables web Canvas games to send requests. <a href="https://developers.facebook.com/docs/games/requests/">Read our guide to Requests</a> to learn more and see more complex examples that you could use.</p> <div id="requestsBtn" class="btn btn-success clearfix">Basic Request Dialog</div> <script> document.getElementById('requestsBtn').onclick = function() { FB.ui({method: 'apprequests', message: 'This is a test message for the requests dialog.' }, function(data) { Log.info('App Requests Response', data); }); } </script>
// 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
Custom Login Button