How to generate previews of plotly dash app when the link to dash app is shared?

Dash Python
3

Hi @GlendaTavares

If you are trying to share a link when you are running an app locally, I don’t think that’s possible, but I’ll let @adamschroeder answer that question.

Assuming you have an app deployed and want to have a nicely formatted card with an image title and description when you share a link to your app on social media, you can do that with meta tags.

Find more information on social media meta tags at Mozilla.org You may also find this Essential Meta Tags for Social Media article helpful.

Note - if you make a multi-page app with the pages plugin in dash-labs, it will automatically create these meta tags for you and update them for each page of your multi-page app . :tada:

But here is how to do it with a single page app: See the code for this app in github

from dash import Dash, dcc, html, dash_table, Input, Output, State, callback_context
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import pandas as pd

app_description = """
How does asset allocation affect portfolio performance?   Select the percentage of stocks, bonds and cash
 in a portfolio and see annual returns over any time period from 1928 to 2021.
"""
app_title = "Asset Allocation Visualizer"
app_image = "https://www.wealthdashboard.app/assets/app.png"

metas = [
    {"name": "viewport", "content": "width=device-width, initial-scale=1"},
    {"property": "twitter:card", "content": "summary_large_image"},
    {"property": "twitter:url", "content": "https://www.wealthdashboard.app/"},
    {"property": "twitter:title", "content": app_title},
    {"property": "twitter:description", "content": app_description},
    {"property": "twitter:image", "content": app_image},
    {"property": "og:title", "content": app_title},
    {"property": "og:type", "content": "website"},
    {"property": "og:description", "content": app_description},
    {"property": "og:image", "content": app_image},
]

app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.FONT_AWESOME],
    meta_tags=metas,
    title=app_title,
)

... see the rest of the app in the github link above
3 Likes