add facebook page

package.json

@@ -61,6 +61,7 @@
 		"react-helmet": "^6.1.0",
 		"react-html-parser": "^2.0.2",
 		"react-lazyload": "^3.2.0",
+		"react-load-script": "^0.0.6",
 		"react-responsive-carousel": "^3.2.18"
 	},
 	"presets": [

src/Content/FacebookPage/index.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect, Fragment } from 'react';
+import Script from 'react-load-script';
+
+const FacebookPage = props => {
+	const [scriptLoaded, setScriptLoaded] = useState(false);
+
+	const { pageURL } = props.item.dataParsed;
+
+	console.log(pageURL);
+
+	useEffect(() => {
+		if (window.FB) {
+			window.FB.XFBML.parse();
+		}
+	}, []);
+
+	return (
+		<>
+			<Script
+				url={'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v12.0'}
+				onCreate={() => setScriptLoaded(false)}
+				onError={() => setScriptLoaded(true)}
+				onLoad={() => setScriptLoaded(true)}
+			/>
+			<div
+				className={'fb-page'}
+				data-href={pageURL}
+				data-tabs={'timeline'}
+				data-width={'500'}
+				data-height={'500'}
+				data-small-header={'false'}
+				data-adapt-container-width={'true'}
+				data-hide-cover={'false'}
+				data-show-facepile={'true'}
+			>
+				<blockquote cite={pageURL} className={'fb-xfbml-parse-ignore'}>
+					<a href={pageURL}>Facebook</a>
+				</blockquote>
+			</div>
+		</>
+	);
+};
+
+export default FacebookPage;

src/Content/Innercontent.js

@@ -5,6 +5,7 @@ import { YoutubeVideo } from './YoutubeVideo/YoutubeVideo';
 import { Tab } from './Tab';
 import { LikeShareGeneric } from './LikeAndShare/LikeShare/LikeShareGeneric';
 import { Instagram } from './Instagram';
+import FacebookPage from './FacebookPage';
 import { icons } from './icons/icons.js';
 import { randomString } from '../Helper/Data';
 import { Dropdown } from './Dropdown';
@@ -201,7 +202,9 @@ const Innercontent = (props) => {
 		return <LikeShareGeneric item={item} formatMessage={formatMessage} />;
 	} else if (item.type === 'instagram') {
 		return <Instagram item={item} formatMessage={formatMessage} />;
-	} else if (item.type === 'custom_html') {
+	} else if (item.type === 'facebook_page') {
+		return <FacebookPage item={item} formatMessage={formatMessage} />;
+	}  else if (item.type === 'custom_html') {
 		if (data.htmlContent)
 			return HtmlParser(data.htmlContent, {
 				transform: HTMLTransform,

yarn.lock

@@ -9609,6 +9609,11 @@ react-lazyload@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-3.2.0.tgz#497bd06a6dbd7015e3376e1137a67dc47d2dd021"
   integrity sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==
 
+react-load-script@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-load-script/-/react-load-script-0.0.6.tgz#db6851236aaa25bb622677a2eb51dad4f8d2c258"
+  integrity sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==
+
 react-responsive-carousel@^3.2.18:
   version "3.2.21"
   resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz#a464a93c33f9fc29e3bbd1944ce885a0a343a996"