add linkedin profile badge to wordpress

Add LinkedIn Profile Badge And Card To WordPress

Table of Contents

LinkedIn is an important social network to connect with many other businesses and work professionals worldwide. It is quite popular in English-speaking countries.

A lot of professionals have found their job opportunities through LinkedIn. Also, many HRs and companies are always posting job openings here.

If you have a good-looking profile here on LinkedIn and good recommendations, then landing a good job is easy. It is also a good thing to showcase your work through a website.

The best reliable CMS for a website is WordPress to write your blog and showcase your work. If you can also showcase your LinkedIn profile badge or card along with your work or posts, it creates a good impression for the recruiter.

Unfortunately, showing your LinkedIn badge on WordPress is not an easy process. The official way of doing it doesn't work every time.

In this post today, we have discussed both the official way and our way of creating LinkedIn profile badges. Our way of creating a always works.

What is a LinkedIn Badge or Profile Card?

A LinkedIn badge is an online badge for your LinkedIn profile. It shows your present job role in your company along with your education and profile picture.

image

This LinkedIn profile card looks very decent when used on websites. If you write posts like me on different websites and want your visitors to get connected with you on LinkedIn, then this profile card is very helpful.

LinkedIn badge once clicked will redirect your visitors to your LinkedIn profile. If any recruiter finds it suitable for their company, then he/she might get in touch with you.

There you have a new job opportunity. You might decide on this new opportunity later but more importantly, now you have a new way to showcase your skills. Post on your blog and get hired by placing a LinkedIn badge at the end of it.

Creating A LinkedIn Badge “The Official Way”

This version which we call “The Official Way” means the recommended way by LinkedIn itself. Here the code for getting the profile card is provided by LinkedIn itself.

Log in to your LinkedIn account and go to your profile.

LINKEDIN PROFILE CARD

Click on the View Profile button. You will be directed to your profile in its Edit mode.

LINKEDIN PROFILE VIEW

Now click on the Edit public profile & URL link on the right side.

A new tab will open up. Scroll down and you will see on the right side a section called the Public Profile badge.

LINKEDIN PROFILE

Click on Create a badge button. This will redirect the page where you can find all the instructions for creating a LinkedIn profile badge.

LINKEDIN PROFILE BADGE

On the Public profile badge builder page, you will find two steps to be followed to get your profile badge show on your website page. Copy the first code from this page.

LINKEDIN PROFILE BADGE BUILDER PAGE

This code has to be posted in either the footer of the page or theme you are using for your . We use in most of our WordPress designs.

Go to your Elementor designs and if you have designed the footer of your website with Elementor, then open the design using Elementor.

Search for the Custom HTML widget in the search on the left side.

CUSTOM HTML ELEMENTOR

Paste the content of the code copied from LinkedIn to the Content section of the Custom HTML widget. No need to put the Title or any other sections in this widget.

CUSTOM HTML ELEMENTOR COPY CODE

Now you can update your page and every page of your website will load this code. This is a bad practice but still recommended by LinkedIn.

Now you can go to any part of your website pages or posts where you want to showcase the LinkedIn member profile. Edit this page or design with Elementor.

Again use the Custom HTML widget from the Elementor widgets and drag it to any suitable place of your website to show the LinkedIn profile.

Go to the LinkedIn profile badge builder page and copy the code from Step 2.

LINKEDIN PROFILE BADGE CODE

Come back to your website where you are using Elementor to edit your page. Put this code in the Custom HTML widget you just placed in the above step.

LINKEDIN PROFILE BADGE CODE IN WORDPRESS

According to LinkedIn, once you update the above code on your page, it should start showing up your badge on that page. But in most of the cases, we found that it will just show your name and link to your LinkedIn profile.

LINKEDIN PROFILE BADGE IN WORDPRESS

In some cases, the above steps lead to showcasing a successful LinkedIn profile card on your WordPress website. But most of the cases we found that the LinkedIn profile badge is not working with the above code.

This is why we have got the second method for you. With this second method, you will be able to successfully create the LinkedIn badge without any errors.

Creating A LinkedIn Badge “The Unofficial Way”

A LinkedIn badge is a HTML/CSS design. The same code is provided by LinkedIn as we have seen above.

Now in this “Unofficial Way,” we are going to create the LinkedIn profile badge by using Elementor and its designing features. No HTML/CSS knowledge is required for this as we have tried to keep it as basic as possible. But if you can understand CSS and Elementor, then our steps will show you that we do not use any external JS or CSS files and creating them by purely HTML/CSS designing.

This method will take 20 – 30 minutes of your time. Let's get started on creating a LinkedIn profile card with Elementor.

Open up the page where you want to show your LinkedIn badge. Add a section to it with three columns.

ELEMENTOR SECTION WITH COLUMNS

We will be creating a Large size badge here. You can later adjust the size according to your choice.

Select the column and click on its edit options.

ELEMENTOR COLUMN FOR LINKEDIN PROFILE CARD

In the Layout tab which is the default tab, put Widgets Space as 10. Go to the Style tab in the left column. In the Background tab, click on the color. Select the completely black color or input the values #000.

LINKEDIN PROFILE BADGE BACKGROUND COLOR SETTING

On the same page now select the Border tab in the Elementor Edit Column. Put Border Radius as 10.

LINKEDIN BADGE ELEMENTOR COLOUMN EDIT

The image was taken before the final changes. Do not make the values 20 but only 10 as said above.

Now go to the Advanced tab, in the padding section remove the Link Values Together by clicking on the link icon. It should have a white background which means the values are not linked to each other.

Put 12 on top, 16 in right, 12 in the bottom, and 16 in left options of Padding.

Update your page. Now go back to Elementor widgets by clicking on the top-right icon.

FIRST STEP FOR LINKEDINT BADGE ON WORDPRESS

Select the Image widget once all the widgets are visible to you. Drag it to our LinkedIn badge column. Now we can select our profile image and set its settings.

After you select the image, go to Image Size and select the Custom option. Put 56 in both width and height place and press the Apply button.

LINKEDIN BADGE CARD BORDERS

Select the Left option for Alignment. Now go to the Style tab from the top section of the same edit page of the Elementor image edit page.

At the bottom of this Style tab, find the Border Radius option and input value 30. After this, your image will look like this.

LINKEDIN PROFILE PIC IN BADGE

Go to the Advanced tab and remove the Link values together icon and make its background white. Put the value 10 in the Top option. Rest everything remains .

Update your post. One part of your LinkedIn page is done.

Now click on the icon of the widget on the top right corner and come back to Elementor's widgets collection. Drag the Heading widget in our LinkedIn profile card widget below the image we just placed.

LINKEDIN BADGE CREATOR STEPS

Input your profile name in the Title. Put your LinkedIn profile link in the Link option. Select Medium option in the Size. Select H3 in HTML Tag option. And select Left in the Alignment.

Next, go to the Style tab from above and select a white color or #fff in Text Color. In Typography select Family as Roboto, Weight as 600, Decoration as Underline. Update the page and it should look like this.

In the Advanced tab above which is located just on the side of the Style tab, go to the Padding section. The Link Values Together icon has to be deactivated. This icon looks like this.

LINKEDIN BADGE PADDING

This icon is deactivated, will be having a white background. Then input 4 in the Bottom option and update the page. Our second part is now complete.

For the third part, just duplicate the name we created above. Put your mouse pointer on top of your name of LinkedIn profile badge and right-click, you will see the option of Duplicate.

ELEMENTOR DUPLICATE WIDGET

Click on the Duplicate option and create a copy of your name. Edit with the right details in its Title by putting your job role and your company name. In the Link option, keep it blank. Size is Medium, HTML Tag will be H4. In the Styles tab, only a few changes had to be made. In the Typography option, select Weight as 400, Decoration as None.

In the Advanced tab go to the Padding section and make the Bottom option from 4 to .

LINKEDIN BADGE PROFESSION

Our third part is also finished now. Going to the fourth part.

Similar to the above steps, duplicate the above-created professional name.

In the Title option, put your Company Name with a “|” and your graduation college name. The real LinkedIn badge from LinkedIn itself links to your Company Name and your College name. You can also do that here but I will not recommend it. To do that, input this code:

UnderWP |  Jawaharlal Nehru Technological University 

Put the Link section blank. Size is to be selected as Small. With this our third step is complete. After the third step, it will look like this.

LINKEDIN COMPANY NAME IN THE BADGE

Now, for the fourth step go to the Elements widget selection page by clicking on the top right gallery icon. Select the Button widget and drag to the LinkedIn badge below the Company and University Name we just created.

LINKEDIN PROFILE CARD BUTTON

In the Edit Button options page, put Text value as View Profile, Link as your LinkedIn profile link.

Go to Style tab, in the Color option set transparent or #FFFFFF00. Border Type is Solid, Width to be set 1, Border Radius as 20, Typography as Roboto.

LINKEDIN PROFILE CARD BUTTON FINAL

Now we will start the fifth step, the final step for creating ourselves the LinkedIn badge for the WordPress website. This is a tricky part which is why I have kept it in the end.

Go to the Elementor Widgets gallery, select the Image widget and place it above the profile image of ours we created in the first step of this tutorial.

For your ease, we have got the LinkedIn logo for both dark and light themes here. You can download it from these links.

LinkedIn Logo for White and Dark Theme on Imgur

LINKEDIN LOGO FOR DARK BACKGROUND 1
LINKEDIN LOGO FOR LIGHT BACKGROUND

For this post we are creating a dark theme LinkedIn badge, so we will use the white font LinkedIn logo.

In the new Image widget we just placed in the badge, Choose Image has to be uploaded with the LinkedIn logo. Select Image Size as Full. Alignment as Left.

Go to the Advanced tab, in the Margin option remove the Link Values Together option by clicking on the link icon. Put the values for Top as -12, Right -16, Bottom -8, and Left as -16. Yes, we are using negative values here to get the same effect as the official LinkedIn profile card.

Now in the Padding section remove again the Link Values Together option by clicking on the link icon. Put the values for Top as 10, Right as 10, Bottom as 10, and Left As 16.

Now go to Background Tab below. Select Background Type as Classic. A new option will open up by the name Color. Select color as #38434F for dark theme and #e9e5df for the light theme of the LinkedIn profile badge.

And the last setting to be set right here is in the Border tab. Put Border Radius values for Top as 10 and Right as 10.

Update the page and your LinkedIn badge is ready to be placed on your WordPress website.

LINKEDIN BADGE CREATED WITH ELEMENTOR

Congratulations! You have successfully created your LinkedIn profile badge without any external scripts as LinkedIn suggests on their official page.

Now you can place this LinkedIn profile badge in any part of your post and get the required attention for it from your website visitors. Placing it at the end of the article of your blog posts is recommended.

Here is the LinkedIn profile card we created above. You can see that we did it practically and wrote this tutorial for our viewers.

Final Words

Now you have seen both ways of creating your LinkedIn profile badge for your blog. You can try both ways and see which one fits your website.

I could also write about how to get this LinkedIn profile card in HTML and CSS but I will wait until someone who is interested in it and comments below. If you want a LinkedIn profile badge embed code generator, do write below and I will custom code it whenever I can.

Please do comment and like this post, if this helps you to keep us motivated to write similar tutorials in the future.

Share This Article:
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email
Reddit
Related Articles:
image size reduce online
Facebook
Free Image Size Reduction Trick

Without Any Plugin Did you know that a normal website gets most of its weight from the images used in it? It is true. The majority of website size is mostly because of the images used in its pages. Optimizing images without losing quality is a difficult task for average

Read More »
free wordpress hosting
Plugins
Host Your WordPress Website For Free Forever

Hosting a WordPress website can be an expensive thing if not done properly. It can go from just a few dollars to thousands of dollars a month. Finding WordPress hosting can be a difficult task. If you own a small blog or website that you do not update often then

Read More »
free high quality backlinks
Backlinks
Get Free High Quality Backlinks The Creative Way

A backlink in the SEO world is a link from a post or a page on one website to another. If a website is linking to your content, it means you got a backlink. These backlinks are also called “inbound links”. Sometimes they are also called “incoming links”. Carrying a

Read More »
Google Analytics
Adding A New Website To Google Analytics

Google Analytics can be applied to a new website in two ways. The first is to create a brand new Google Analytics account, and the second is to add a new property to an existing account. If you’re like me and add websites to Google Analytics on a regular basis,

Read More »
Subscribe to our newsletter
Chat With Our SEO community members On discord
Discord SEO Community Chat
  • Just-iko avatar Just-iko Thank you very much for answering ☑️ ✨
  • ddev66 avatar ddev66 Put your content in the right HTML tags and Google will show it this way.

    In the picture that you show, the first content is put in a list with bold headings.
    The second content is a FAQ on that page.

    Put in the right HTML tags and Google will pick it up nicely.
  • Just-iko avatar Just-iko Hello, I'm a newbie in this field, any guidance would be appreciated :) some questions please, is there any idea on how to make our website could appears like that in Google search? The one that I marked..
  • ddev66 avatar ddev66 Semrush or Ahrefs will help you for spying competitors.

    I think Semrush has a trial period as well.
  • Aadhi avatar Aadhi Buy semrush, you can buy it at cheap rate by using Group buy method
  • SG.CK avatar SG.CK Any free tool for spy traffic and ranking ?
  • ddev66 avatar ddev66 Search on google “htaccess redirect rules”
    Put them in your website’s htaccess file if you are using Apache
  • BrunoAfonso avatar BrunoAfonso how should I go to solve this issue
  • BrunoAfonso avatar BrunoAfonso Can you explain a little bit more? My website is not wordpress, I use amazon web services
  • ddev66 avatar ddev66 You can make a 301 redirect to the correct page on your website.
    If you are using Wordpress then SEO plugins like rank math have this feature.
    If you don’t want to use SEO plugins then there are many good redirect plugins in the Wordpress repository.
    And if you are not using Wordpress then .htaccess file is your friend.
  • BrunoAfonso avatar BrunoAfonso For example, is this image, the second link "THU Main Event" goes to a different page that it's supposed to. How do I fix this.
  • BrunoAfonso avatar BrunoAfonso So I have a website and when you search for it, one of the hyperlinks that google provides goes to the wrong page, is there a specific way for me to change that?
  • ddev66 avatar ddev66 Need more explanation
  • BrunoAfonso avatar BrunoAfonso Hello people, does anyone know how to fix a hyperlink within a google search?
  • ddev66 avatar ddev66 Semrush shows you all the links that it considers as toxic in its domain overview dashboard. You can then use these website list to disavow in GSC.
  • rrakesharmaa avatar rrakesharmaa I want to remove high spam backlinks via Disavow tool. So i need these links.
  • ddev66 avatar ddev66 extract high spam score backlinks.
    This is little confusing for me to understand

    Do you want to remove high spam backlinks to your website or do you want to receive backlinks from websites that have a high spam score?
  • yaswanth avatar yaswanth Now I use the Search console live URL inspector. It shows the page source and screenshot with an error(If any).
    Result: The page is not mobile friendly in the screenshot. All the element's styles are broken.

    Now, I feel like, " What the hell is happening in rich result tester? The google bot shows everything is ok, and in the search console, this is happening."

    # Problem Digging Stage final stage - Solving the problem
    The easiest way to solve the problem is to compare the thing and find the difference.
    Is rich results tester a google bot? Yes!
    Is it owned by google? Yes!
    Is it have any link with the official search console crawler? No!

    Now, What is the difference between 2 crawlers?
    Their IPs are different. They work differently.

    Summary: Google bot (Offical bot) is not able to crawl all elements in the webpage. It is not able to read all styling files. All other bots(services that use crawl as Google Bot) can view/crawl the page.

    List of official google bot IPs: https://developers.google.com/search/apis/ipranges/googlebot.json

    Solution: Rather than digging into all files, we changed the hosting server located in the exact location.

    Thank you for reading this article. It takes a few mins to read this article, but It took hours to find the correct problem with a solution. If you find this article valuable, give it a like and if you have any questions, feel free to ask them.
  • yaswanth avatar yaswanth Solving Critical Indexing Problem (CASE STUDY)

    Last week I received a message from a friend he is requesting me to help him index a page of his website. I said, " Wait, sometime google will index automatically" Then he said he was getting problem with his homepage. So, I started digging. First, I want to find the problem. Then all other things were easy.

    # Problem Digging Stage 1 - Analyze the top layers
    Checking the basic things
    1) No Index tags
    2) Canonical tags
    3) Website page Age

    Result: Nothing Found

    # Problem Digging Stage 2 - Getting Deeper
    1) Checking status codes (If there is any redirects, 404 error, or soft 404 errors)
    2) Using an SEO browser to check the web page accessibility
    3) Trying with different user agents

    Result: Nothing Found

    # Problem Digging Stage 3 - Analyzing and
    comparing past and current stages of webpage
    1) Checking the Wayback machine for any spam content history
    2) Checking the search console for errors
    3) Other page's indexability

    Result: I got some clue. Search console shows "Page is not mobile friendly."

    # Problem Digging Stage 4 -Finding the reason for the search console error.
    When I checked the web page with SEO Browser, the page was mobile friendly, and I also tried "crawl as Googlebot." Everything looks good. Then where is the problem?

    One thing was confirmed google is not able to view the webpage clearly. And all other bots are not getting any problems.

    So, I decided to use only google properties in the further process (Because only the google bot gets stuck).
    I selected three tools to process further.
    1) Google page speed insights
    2) Google rich results tester
    3) Search console Live URL inspector

    First, I used page speed insights to check If the google bot can crawl/view the page or not(If there are any issues in crawling, then the tool returns a lighthouse error)
    Result: everything is ok

    Second I used Google rich results tester. It provides the page source and screenshot of the webpage.
    Result: everything is ok
  • achann avatar achann Backlink actually link that provided outside web, so if you use instagram and insert your web link that still counted as backlink.
  • achann avatar achann If you want to be free, why not using mailchimp for email blast. Or maybe you can use whatsender for whatsapp blast, there is nulled version I think.
  • achann avatar achann Um.. Maybe you can use whatsapp blast and give link? Or maybe you can use email marketing and give link to your web?
  • rrakesharmaa avatar rrakesharmaa How can I extract high spam score backlinks for my website? Is there any free tool that provides all high spam score sites HELP ME PLEASE 🙂
  • nkap avatar nkap <@211319858258771968> hey, would you be able to share the website that you want guest posts on? I’m in touch with a few fintech businesses and can ask them whether they’d be interested in putting a post on your site.
  • ddev66 avatar ddev66 <@211319858258771968> it sure will work. Make sure to write that it’s free to post as guests. A lot of websites do not mention this and writers usually think it’s paid opportunity only.

    Keep us updated of how well this goes for your website.
  • soutaraku avatar soutaraku Thank you so much for the detailed guide. I'll see if I can put up the Guest Post page to start with! I hope my email gets bombarded in a good way haha
  • ddev66 avatar ddev66 You should start putting up a page called Guest Posting on your other website where you put articles, etc.. and put all the requirements there which you are looking for in the guest posts. Make sure to leave your email as well for easier contacts.

    Build up some links to this page. Because most of the writers are looking to write for high metrics website that have good DA, TF, etc...

    Once you have a page setup it will help you get attention from people who are searching on Google.

    Next you can start sending the URL of this page to people whom you think might be interested to write for your service on social networks like twitter, linkedin, etc.

    Also list this page URL on websites that have posts like free guest posts list in SaaS, free guest posts list in "your niche", etc. Something like this: https://underwp.com/the-best-free-guest-posting-websites-list-in-2022-over-3000/

    These will get you enough traction to attract guest posts from various contributors over the time. Your email will be bombarded with emails following the above tips.
  • soutaraku avatar soutaraku I can translate guest post to Japanese and put it on our website to share stories from overseas. I thought it would be interesting for our readers and a good way for link building.
  • soutaraku avatar soutaraku It's not titled as contribute/guest posts page, but there's a website we put interview articles and such. We surely can put guest posts on that website.
  • ddev66 avatar ddev66 <@211319858258771968> does your website have contribute/guest posts page?
  • soutaraku avatar soutaraku Hi guys! I'm a Japanese SEO specialist/ content editor working for a fintech company, and looking for someone to put guest posts on our website (preferably about fintech or SaaS market). Are there any good place to look for people willing to guest post?

    In Japan, not many people write guest posts, so I'm kinda lost. Twitter trick is only guiding light to me, <@838326478924021760>. Thanks for sharing.
  • Deleted User avatar Deleted User trying it out right now
  • nkap avatar nkap Great idea! Will definitely try it out. Thanks mate.
  • ddev66 avatar ddev66 A good trick to get guest posts for your website. <@456226577798135808> <@755307075625549854>
  • Büşra avatar Büşra Thank you very much. I'll try 😊
  • nkap avatar nkap Yeah me too!!
  • naaz avatar naaz <@755307075625549854> Thank you for the detailed answer. Hope <@341197404302737408> finds the right solution for this.
  • nkap avatar nkap <@341197404302737408> Just these:

    You can try 3 things: (I suggest you try the 3rd option first)

    1. If there are any links in your coverage report that’s actually not from your domain/property, I’d recommend you use the Search Console’s removal tool to remove these from your property.

    2. If you’re using any page builders like elementor etc make sure you turn off search engine indexing for things like templates. You can find this in Yoast SEO settings. With this setting your templates and unnecessary pages won’t be indexed. Are you using elementor by any chance?

    3. It’s also possible that your site has been hacked. If random URLs are appearing in analytics and search console the first thing that you should do is check your .htaccess file to see if someone has put any rewrite rules.
  • ddev66 avatar ddev66 <@755307075625549854> got any views on this?
  • ddev66 avatar ddev66 did you change your permalinks sometime back in last few months?
  • naaz avatar naaz <@838326478924021760> bringing to your attention on this.
  • Büşra avatar Büşra hello guys! I need to help about SEO optimation. I'm using wordpress Yoast. I saw dummy link like as ``` https://myURL.com/cuisine/35/17498``` I haven't these in page. Btw ı'm using google search console. Why may be this? Is anyone has idea about that?
  • ankit662003 avatar ankit662003 does anyone know how to create seo silos?
  • ankit662003 avatar ankit662003 hi
  • ddev66 avatar ddev66 Just know that we are all here to help each other
  • ddev66 avatar ddev66 No worries mate.
  • Alex25 avatar Alex25 The thing is idk what to ask .
    I'm just stuck
  • ddev66 avatar ddev66 Drop your queries here

2 Responses

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: