Skip to content

Instantly share code, notes, and snippets.

@badnorseman
Last active September 12, 2020 14:17
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save badnorseman/119483dfd01b4d88055d51678a84a048 to your computer and use it in GitHub Desktop.
Embed Facebook SDK into React app
"use strict";
import { connect } from "react-redux";
import { oauth } from "../../actions/auth_actions";
import "./facebook.css";
const Facebook = ({ dispatch }) => (
<button
className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect facebook"
onClick={ev => {
ev.preventDefault();
loginFacebook(dispatch);
}}
>
Facebook
</button>
);
const loginFacebook = (dispatch) => {
FB.getLoginStatus(response => {
if (response.status === "connected") {
dispatch(oauth("facebook"));
} else {
FB.login(response => {
if (response.authSuccess) {
dispatch(oauth("facebook"));
}
}, { scope: "email,public_profile", info_fields: "email,name" });
}
});
};
export default connect()(Facebook)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<script defer src="https://storage.googleapis.com/code.getmdl.io/1.1.1/material.min.js"></script>
<script defer src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
window.twttr = (function(d, s, id) {
var js, fjs=d.getElementsByTagName(s)[0], t=window.twttr || {};
if (d.getElementById(id)) {return t;}
js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e=[];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: "your-api-key",
cookie: true,
status: true,
xfbml: true,
version: "v2.5"
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
</body>
</html>
@Kwon11
Copy link

Kwon11 commented Jun 14, 2017

Thanks!

@wzup
Copy link

wzup commented May 22, 2019

Not good.
You divide your code between html and js.
You need to initialize FB in React components, not in html page!

@prettydev
Copy link

prettydev commented Sep 12, 2020

You need to initialize FB in React components, not in html page!

how to do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment