Hey all
I’m trying to add the Flask-Share social media icons to my Dash app based on this article. Aware this question in general came up in a post last year but no one responded.
The goal is to get something lovely like this in Dash:
Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask-Share Demo</title>
{{ share.load() }}
</head>
<body>
<h1>Hello, Flask-Share!</h1>
<p>Maecenas tincidunt lacus at velit. Phasellus in felis. Praesent
id massa id nisl venenatis lacinia. Integer ac neque. Morbi ut odio.
Nullam varius. Sed vel enim sit amet nunc viverra dapibus. Nullam
varius. In hac habitasse platea dictumst.</p>
{{ share.create(title='Share with: ') }}
</body>
</html>
I’m aware it can be done in Flask (as above), so the fallback would be to build a proper Flask app with the share icons templated in, and then embed the Dash app.
Is it possible to get this javascript running directly in Dash? I know the html.Script component doesn’t really work. I was hoping to do it cheekily somehow by customising Dash’s HTML template. I’ve tried this but it doesn’t seem to be able to substitute the objects.
Progress so far
Import flask-share and bind it to the underlying flask app
from flask_share import Share
share = Share(app.server)
Attempt to render directly in Dash layout doesn’t work as the script is not executed
with app.server.app_context():
component = html.Div([
html.Div(share.load()),
html.Div(share.create(title='Share with: '))
])
Whilst this runs, it produces the unexecuted JS and outputs this to browser:
<link rel="stylesheet" href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css" type="text/css"> <script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js"></script>
<div class="social-share " data-sites="weibo, wechat, douban, facebook, twitter, google, linkedin, qq, qzone" data-mobile-sites="weibo, douban, qq, qzone" align="left">Share with: </div>
Obviously I want to somehow get this script to execute in Dash, but I’m not sure how. Then I thought I could get smart and embed it in the Dash HTML template, as per the Flask example, like so:
from flask_share import Share
app = dash.Dash(__name__)
share = Share(app.server)
app.index_string = '''
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
{{ share.load() }}
</head>
<body>
<div>My Custom header</div>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
<div>My Custom footer</div>
{{ share.create(title='Share with: ') }}
</body>
</html>
'''
But this just outputs the text string and does not substitute the share object and execute the script. I don’t really know what I’m doing with javascript and web so this is very hard for me. I tried a few variations of substitution like {blah} {{blah}} {%blah%}
Am I going down the path to madness and should I give up and just build a proper underlying Flask app, or is there a way I could get flask-share somehow running in Dash itself??
Cheers
