I’m creating a site that will show social media posts and the metrics associated with them. I want to include post previews as well. I’ve looked into link hover previews and posts embeds. Post embeds seem the easiest as there isn’t a lot of JavaScript needed.
I’ve referenced the official Facebook docs on how to manually embed a post. I got it to work once, after trying for 4 hours, but it hasn’t worked since. Part of the issue is probably translating their html to Dash html.
Facebook docs:Here
Here is the raw HTML I am basing my Dash HTML off of. I put this code into a notepad file and saved as an HTML and it runs as epected.
<html>
<body>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="fb-post"
data-href="https://www.facebook.com/KansasCityChiefs/posts/10159703326188373"
data-width="500"></div>
</body>
</html>
Here is a minimum working(broken) example in Dash. The page is blank, but the HTML shows there is code.
import dash
import dash_design_kit as ddk
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px
from datetime import datetime
#from app import app
from textwrap import dedent
import openpyxl
import os
import dash_enterprise_auth
import time
from datetime import datetime, timedelta
import re
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np
app = dash.Dash(__name__)
server = app.server # expose server variable for Procfile
app.layout = ddk.App([
html.Div(id = "fb-root", children = []),
html.Script(src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"),
html.Div(className = "fb-post", **{'data-href':"https://www.facebook.com/KansasCityChiefs/posts/10159703326188373", 'data-width':'500'})
])
if __name__ == '__main__':
app.run_server(debug=True)
I would appreciate any help or tips anyone might have.
Thanks!
2 posts - 1 participant
