How to embed a LinkedIn profile badge? (And, using attributes from external script)

Dash Python
1

LinkedIn provides a script so that you can embed your profile as a badge on a website. I’m trying to do this with Dash Python, but not sure how to implement step 2 below.

Step 1, for context: First, you have to put the following script in your app:

<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>

Based on these docs I placed this in the app object like so:

app = Dash(
    __name__,
    external_scripts=[{'src': 'https://platform.linkedin.com/badges/js/profile.js'}],
)

Step 2: The LinkedIn instructions then say to put this in your code:

<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="light" data-type="VERTICAL" data-vanity="your_linkedin_username" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/your_linkedin_username?trk=profile-badge">Your Name</a></div>

Question: How do I construct this div with html.Div()? I tried using snake case and camel case for attributes like data-locale, data-size, etc. but that doesn’t seem to work. Is there a more correct way to implement this?

Thanks!

2

Hey,
Did you find any solution?

1 Like
3

Hello @shiva,

You can modify the index_string to add it to the template design:

image


from dash import Dash, html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets,
           external_scripts=[{'src': 'https://platform.linkedin.com/badges/js/profile.js'}])

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        <div>My Custom header</div>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
        <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="light" data-type="VERTICAL" data-vanity="your_user_name" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/your_profile?trk=profile-badge">Bryan Schroeder</a></div>
    </body>
</html>
'''

app.layout = html.Div('Simple Dash App')

if __name__ == '__main__':
    app.run_server(debug=True)

Obviously, you’ll need to adjust some stuff with the headers and stuff. :slight_smile:

1 Like
4

Thanks for responding, I’ll try it. Be updating you soon.

1 Like
5

Hey @jinnyzor, its working, but it is interfering with the previous layout.

6

Yeah, you’d have to adjust the index to match what it was previously. I dont know exactly how this would work as I havent tried it.

The other option is to add a script that adds both the div placeholder and the script to load it. This is fine I guess if you need to do it that way.

7

Well, I am a beginner so I don’ t know much. Anyway, I’ll try tweaking it. Thanks for your help.

8

This this index string instead:

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
        <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="light" data-type="VERTICAL" data-vanity="your_user_name" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://www.linkedin.com/in/your_profile?trk=profile-badge">your name</a></div>
    </body>
</html>
'''

I think it should be at least a close match.

9

@jinnyzor

I tried this one but it works while using it alone, when adding it with other components in the children property, it doesn’t show up.

1 Like
10

Its same as the previous one.

11

What exactly is different?

Can you post some of your code?

12
  1. The header size changed.
  2. The plot options on the right side repositioned and overlapped the legend.
    z
13

The callback button also shrunk in size.

14

Ah, try adding some css to the div for the linked in page, probably position absolute and see if that helps.

1 Like
15

@jinnyzor code was long, hence I removed the callbacks, and I am unable to reply due to the reply limit. Sorry for the trouble.

1 Like
16

Strange…

You are running Dash 2.7.1? I am testing it and I dont seem to be having any adverse effects…

Can you give me an MRE of what your code is?

1 Like
17

@shiva,

Thanks for the example, with no data for the figures, this is what I see:

image
image1886×947 22.4 KB

With my profile happily underneath. I did remove position = “absolute” from the div, because “position: absolute” is needed in the style of it. However, removing it entirely didnt make any difference.

Also, my modebars are still the same without any issues displaying in a different fashion.

1 Like