Embedding Facebook posts into Dash app

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.

  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 

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__':

I would appreciate any help or tips anyone might have.


Okay, I figured out the issue. I found a way to use IFrame for Facebook and Instagram.

Facebook where Post ID is the Facebook PostId:

html.Iframe(src = 'https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKansasCityChiefs%2Fposts%2F' + Post ID +'&show_text=false&width=350px',
                style = {'width':"100%", 'height':"100%", "border":'none', 'overflow-x':"scroll"} ),

Instagram where URL is the post’s URL:

html.Iframe(src = str(URL + '/embed') , height = '500', style = {'width':"100%", 'height':"100%", "border":'none', 'overflow-x':"scroll"} ),

I am now struggling with Twitter. It seems I can’t just pop it into an IFrame like Facebook and Instagram. The embed code from Twitter has another tag as part of the code. I’m not sure exactly how this should be used.

Here is the embed code from Twitter:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Chiefs team up with Made Mobb for postseason merchandise <a href="https://t.co/KR7AYnW4vO">https://t.co/KR7AYnW4vO</a></p>&mdash; FOX4 News (@fox4kc) <a href="https://twitter.com/fox4kc/status/1480659548767928322?ref_src=twsrc%5Etfw">January 10, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

EDIT: Solution for Twitter is as follows, URL should be replaced with your tweet URL:

from dash_extenxtions import DeferScript  #the only way I can get the script to correctly import and style 

html.Blockquote(className="twitter-tweet", children = [html.P( lang = "en", dir="ltr", children = tw1l), html.A(href = URL )], style = {'height':'300px'}),
DeferScript(src = 'https://platform.twitter.com/widgets.js'),