Adding social media share buttons (using Flask-Share) to Dash? Can it be done? Yes it can :)

Dash Python
5

Just for closure, FYI to anyone who may wish to add social media share icons to their dash site. I’ve found a pretty straight forward way using a different javascript library. This is now working beautifully for dynamically updated page titles and URL paths.

I ended up using https://shareon.js.org/
Opensource and super light weight.

Screenshot from 2021-07-06 14-02-01

How to do it…

Step 1 - update the Dash index.html template
This allows you to import the javascript and insert the <a> components in for the icons. You can do this in your main dash python file. More info here and scroll down to ’ Customizing Dash’s HTML Index Template’

Working example here:

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>        
        {%favicon%}
        {%css%}        
        
        <link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js" type="text/javascript"></script>
        
    </head>
    <body>        
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}           
        </footer>  
                
        <div style="overflow:hidden;width:40%;margin:auto;padding-top:10px">
            <H3 style="float:left;padding-top:5px"> Share on: </H3>
            <div class="shareon" style="overflow:hidden;width:600px;margin:auto;text-align:left">  
                <a class="twitter"></a>    
                <a class="facebook"></a>
                <!-- FB App ID is required for the Messenger button to function -->
                <!--  <a class="messenger" data-fb-app-id="0123456789012345"></a> -->
                <a class="linkedin"></a>
                <a class="reddit"></a>
                <a class="mastodon" data-text="Check this out!"></a>                
                <a class="odnoklassniki"></a>
                <a class="pinterest"></a>
                <a class="pocket"></a>
                <a class="vkontakte"></a>
                <a class="viber" data-text="Check this out!"></a>                
                <a class="telegram "data-text="Check this out!"></a>
                <a class="whatsapp" data-text="Check this out!"></a>            
            </div>
        </div>
        
        </body>
</html>
'''

Step 2 - Add a clientside javascript callback to refresh the icons
If you just want the icons to contain static text and URL paths, then you can hardcode these into the components themselves in the HTML in step 1, using the attributes ‘data-title’ and ‘data-url’ as documented on https://shareon.js.org/

But, if you want to do something a bit more sophisticated and share dynamic content like updated page title and URL path, you will need a clientside callback and pass in the data.

  app.clientside_callback(                        
        """
        function(label) {          
            document.title = 'New page title : ' + label;
            shareon();            
        }
        """,
        Output('js-social-share-dummy', 'children'),        
        Input('js-social-share-refresh', 'children'),        
        prevent_initial_call=True
    )

In this case, I trigger the callback when I updated my dcc.Location. I also pass in the new page title (label). When the shareon() function is called, it refreshes all the icons with the new title and current URL path set by dcc.Location.

So confirming you don’t need flask-share at all and you can do everything you need with javascsript.

Cheers
Dan

1 Like