How to add linkedin share feature to plotly dash app?

Dash Python
1

Hi,

Below is the script to add the Linkedin Share button in HTML5 to a website, that allows sharing of the link to the website, along with og components embedded in the share URL generated.

        <div style="display: flex; align-items: right">     
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
        <script type="IN/Share" data-url="https://isb-hpi.herokuapp.com/"></script>
        </div>

How can I include this feature within a dash app at the top of the plotly graph along with the other buttons to enable visitors of my app to share the graph on Linkedin if they find it insightful?

It is fine if the button does not fit inside the graph object, and sticks somewhere outside the graph object. I just want this button on my dash app. But if we can include this button within the graph object that would be great too.

Please share some ideas!

2

Add the JS script as an external script and insert the IN/Share element anywhere in the app where you would like the share button to appear. Here is an MWE,

import dash
import dash_html_components as html

app = dash.Dash(external_scripts=["https://platform.linkedin.com/in.js"])
app.layout = html.Div([html.Script(**{"data-url": "https://platform.linkedin.com/in.js"}, type="IN/Share")])

if __name__ == '__main__':
    app.run_server()
3 Likes
3

Hi @Emil, your example works great. However, the share button is not appearing when I include the same div element in the app layout of this example: dcc.Tabs | Dash for Python Documentation | Plotly.

Also, I am trying to have one share button under each tab of the app in the shared dash example. Is it possible? How do I translate the HTML to dash python code to achieve this?

I’m not quite sure how to implement this in dash.

4

Hey Emil, thank you very much for this answer, I was trying to find exactly this solution and after giving up, I found this post hehehe Worked perfectly to my problem;

Do you know how could I use this script to a custom button?
Maybe I could use it as {display=none} inside a button

5

Could you elaborate on the usecase? Why must it be a button element?

6

Hey @Emil…

I need to do is to share a specific link and also text+images when the user clicks on the Linkedin icon:
image

I think that it’s related to the “og:tags” as shown on this topic:

image
image756Ă—750 137 KB

But I’m not sure about how to implement this solution dynamically in Dash.

Any help you can provide is very welcome!

Regards,
Leonardo

7

Hey Emil… I just created a new topic asking about this but better explained…

Any contribution is very welcome

8

Hey,
Did you find any solution?