Skip to content

Instantly share code, notes, and snippets.

@badnorseman
Last active September 12, 2020 14:17
Show Gist options
  • Save badnorseman/119483dfd01b4d88055d51678a84a048 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment