How to add linkedin Profile badge to react app

Question

import './App.css';
import Header from './components/header'

function App() {
  return (
    <div className="App">
      <Header />
      <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
      <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="USERNAME_HERE" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://ca.linkedin.com/in/USERNAME_HERE?trk=profile-badge">USERNAME_HERE</a></div>
    </div>
  );
}

export default App;

USERNAME_HERE is just a filler to fill with linkedin username. The issue is that my react app just shows the link with my name instead of the full badge. I did not make a badge-base css object or a LI-profile-badge css object. Im assuming I shouldnt or am I mistaken?

score 3 · Answer 1 · answered May 24 '21 at 22:20

3

The problem is with how you use the script. As far as I'm aware you cannot simply use a script tag in React. Rather you need to use a few different ways of integrating that script into your application.

The simplest way and without using any additional libraries or tools would be to use the useEffect hook.

Here is the code to make it work:

import React, { useEffect } from 'react';
import './style.css';

export default function App() {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://platform.linkedin.com/badges/js/profile.js';
    script.async = true;
    script.defer = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <div
        class="badge-base LI-profile-badge"
        data-locale="en_US"
        data-size="medium"
        data-theme="light"
        data-type="VERTICAL"
        data-vanity="YOUR_OWN_VANITY_HERE"
        data-version="v1"
      >
       <a
          class="badge-base__link LI-simple-link"
          href="https://au.linkedin.com/in/YOUR_PROFILE_HERE?trk=profile-badge"
        />
      </div>
    </div>
  );
}

Note that you do need to replace the "data-vanity" and the actual HREF with your own profile vanity and link. But you can get that from your LinkedIn profile where you copy across the actual badge code. The only thing that made your solution not work was likely how you tried to import that script so try with the useEffect tag and I believe it should work for you.

EDIT: Here is a working StackBlitz sample with my own profile.

answered May 24 '21 at 22:20

Johan Jarvi

297
6
13

Also see this [question & answer](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) for more options of adding script tags into your application and creating a custom "useScript" hook. – Johan Jarvi May 24 '21 at 22:25
Thank you for the help but I dont think it's working with the stackblitz sample. It also doesn't show the profile for me. – apinanyogaratnam May 25 '21 at 16:18
Do i need to make the css styling for the container like how linked in displays it? – apinanyogaratnam May 25 '21 at 16:18
I just tried the stackblitz again on my phone and removed the default added style.css and it has no effect. So it should not be necessary. The only thing I can imagine is that LinkedIn is somehow being blocked for your ISP or that there’s some form of network issue. Do you have any errors in the console? – Johan Jarvi May 25 '21 at 21:10
I followed [this guide](https://www.thebalancesmb.com/how-to-create-a-linkedin-badge-for-your-profile-1794575) for information on how to generate the badge. So make sure that you have the right source for the script and also the HTML. My profile is Australian so perhaps it is different for you. But in that case just replace the `script.src` with what you get from your linked in profile and change the HTML accordingly. – Johan Jarvi May 25 '21 at 21:13
@JohanJarvi did you run into an issue of the css styling being replaced when embedding the linkedin badge code. I tried out the code snippet on my react page with useEffect as you suggested, the badge shows up, but overwrites my styling, I also tried to put it in a whole different component, and then import it into my index,js and render it, but it still alters all my css. I tried also to alter your StackBllitz sample by just adding a body background color, it loads with the color, but then vanishes – user2371684 Jun 11 '21 at 06:37
Yeah I didn’t look into how to style it but it’s common with things that embeds classes like this to have it’s own styling. You probably want to read up on the order in which CSS is applied and it’s priorities. But I would say that if you inspect the elements on the page and find out what classes they have and what styles it applies and then overwrite those classes with your own styles it should work. – Johan Jarvi Jun 11 '21 at 21:24
If you do have issues I can take a look on Monday and update the answer with how to add custom CSS but it is a little beyond the scope of the question itself. – Johan Jarvi Jun 11 '21 at 21:25

How to add linkedin Profile badge to react app

1 Answers1