# How to add linkedin share feature to plotly dash app?

**URL:** <https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332>\
**Category:** Dash Python\
**Created:** [April 25, 2021, 11:50am UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332 "2021-04-25T11:50:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![skwolvie](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@skwolvie](https://community.plotly.com/u/skwolvie)\
**Post date:** [April 25, 2021, 11:50am UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/1 "2021-04-25T11:50:58Z")

</div>

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.

```auto
        <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!

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [April 26, 2021, 11:24am UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/2 "2021-04-26T11:24:09Z")

</div>

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,

```auto
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()

```

---

<div class="post-metadata">

**Author:** ![skwolvie](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@skwolvie](https://community.plotly.com/u/skwolvie)\
**Post date:** [April 26, 2021, 5:22pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/3 "2021-04-26T17:22:18Z")

</div>

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](https://dash.plotly.com/dash-core-components/tabs).

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.

---

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [September 15, 2021, 2:10pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/4 "2021-09-15T14:10:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [September 15, 2021, 2:35pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/5 "2021-09-15T14:35:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [September 15, 2021, 2:54pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/6 "2021-09-15T14:54:00Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/b/9b4e8bc9a23d564d5ec5baabbb727b2857f7162d.png)

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

> <https://stackoverflow.com/questions/33426752/linkedin-share-post-url>

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/c/5c0a5de31a3f5c8ae2f3d5a60740fb5ac64885ce.png)

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

Any help you can provide is very welcome!

Regards,  
Leonardo

---

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [October 2, 2021, 3:16pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/7 "2021-10-02T15:16:57Z")

</div>

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

> [@How to add og tags metadata to a plotly app?](https://community.plotly.com/t/how-to-add-og-tags-metadata-to-a-plotly-app/57192):
>
> Hey guys, I would like to customize my title, image, and description in the preview of the web app when sharing this on Facebook, LinkedIn, and so on… I have added the og:tags as you can see in the image below: [image] The OGP declaration in the index\_string: [image] But it’s not being recognized when I try to share the link on LinkedIn: I would like to know how could I make it be recognized and shown when I share my app? Any help will be very welcome!!! Leonardo

Any contribution is very welcome

---

<div class="post-metadata">

**Author:** ![shiva](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@shiva](https://community.plotly.com/u/shiva)\
**Post date:** [December 22, 2022, 5:20pm UTC](https://community.plotly.com/t/how-to-add-linkedin-share-feature-to-plotly-dash-app/52332/8 "2022-12-22T17:20:04Z")

</div>

Hey,  
Did you find any solution?
