Naveen Sharma

Posted on Apr 9

How to Create a LinkedIn Widget for Your Website (Beginner to Advanced)

#linkedin #webdev #widgets #tutorial

LinkedIn has become a cornerstone platform for professionals and businesses. Whether you're an individual looking to showcase your professional profile, or a company aiming to engage visitors with your latest updates, embedding a LinkedIn widget on your website can make your online presence more dynamic and trustworthy.

In this guide, we’ll walk through everything from beginner to advanced methods to create a LinkedIn widget for your website. We'll also cover a no-code solution using Tagembed and a developer-focused approach using the LinkedIn API.

By the end, you’ll know how to add a professional, engaging LinkedIn feed to any website—without breaking a sweat.

What is a LinkedIn Widget?

A LinkedIn widget is an embeddable element that allows your website to display LinkedIn content in real time. Depending on the type of widget, it can show:

Your personal LinkedIn profile
Updates and posts from a LinkedIn company page
Job openings
Articles, shared content, or even event posts

The primary advantage is that the content updates automatically whenever you post on LinkedIn. That means your website remains dynamic, fresh, and professional, without requiring any manual updates.

Benefits of Using a LinkedIn Widget

Using a LinkedIn widget on your website provides a range of benefits for both individuals and businesses:

Boost Professional Credibility – Displaying your LinkedIn profile or company activity instantly signals professionalism and trustworthiness to website visitors.
Increase Engagement – Visitors can interact with posts, like or share content, and follow your LinkedIn page directly from your site.
Save Time – Automated updates eliminate the need for manually adding LinkedIn posts to your website.
Promote Your LinkedIn Presence – Encourage visitors to connect, follow, or engage with your LinkedIn profile, increasing your network and brand visibility.
Enhance Website Appeal – Dynamic widgets make your website feel more interactive, boosting visitor retention.

Beginner Method: Embed LinkedIn Profile Widget

For beginners, the easiest way to showcase your LinkedIn presence is by embedding your LinkedIn profile widget.

Steps:

Go to your LinkedIn profile.
Click More → Share Profile via → Embed this profile (if available).
Copy the HTML embed code.

Example code:

<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
<div class="LI-profile-badge"  
     data-version="v1"  
     data-size="medium"  
     data-locale="en_US"  
     data-type="vertical"  
     data-theme="light"  
     data-vanity="your-linkedin-vanity"></div>

Paste the code into your website HTML where you want the widget to appear.

Intermediate Method: Embed LinkedIn Company Feed (No-Code)

If you manage a LinkedIn company page, embedding a company feed is a great way to keep your website fresh with real-time updates. You don’t need any coding experience to get started.

A recommended no-code solution is Tagembed. It allows you to embed a fully responsive LinkedIn feed widget in minutes.

Steps to Embed via Tagembed

Sign up for Tagembed.
Connect your LinkedIn company page to the Tagembed dashboard.
Customize your feed layout, fonts, and colors to match your website’s branding.
Copy the embed code generated by Tagembed.
Paste the code into your website’s HTML.

Example iframe embed code:

<iframe src="https://widget.tagembed.com/your-widget-id" 
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Why use Tagembed?

Fully responsive and mobile-friendly
Automatic feed updates without manual intervention
Customizable design without any coding

Tagembed is particularly useful for businesses that want to showcase multiple posts or a live feed without the complexity of the LinkedIn API.

Advanced Method: Custom LinkedIn Feed Using API

or developers who want full control over their feed, LinkedIn provides an API to fetch posts and render them as a custom widget.

Step 1: Register a LinkedIn App

Go to the LinkedIn Developer Portal and create a new app to get API access.

Step 2: Obtain an Access Token

Generate an OAuth access token for your app to authenticate requests.

Step 3: Fetch Your Company Posts

Use the LinkedIn API endpoint to fetch company shares:

GET https://api.linkedin.com/v2/shares?q=owners&owners=urn:li:organization:{organizationId}

Step 4: Render Posts Using JavaScript

fetch('https://api.linkedin.com/v2/shares?q=owners&owners=urn:li:organization:123456', {
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  }
})
  .then(res => res.json())
  .then(data => {
    // Render your posts dynamically on the website
    console.log(data);
  });

Best Practices for LinkedIn Widgets

Ensure Mobile Responsiveness – Test your widget across devices.
Match Website Branding – Use matching fonts, colors, and style.
Keep LinkedIn Active – Fresh content increases engagement.
Strategic Placement – Homepage, About Us, or Careers pages work best.
Optimize Loading – Lazy load widgets or embed iframes to maintain fast site speed.
Accessibility – Make sure the widget is keyboard-friendly and screen-reader compatible.

Conclusion

Creating a LinkedIn widget is an excellent way to showcase your professional presence or company activity on your website.

Beginners: Use LinkedIn profile embeds.
Intermediate: Use a no-code tool like Tagembed to embed your company feed quickly.
Advanced: Build a fully custom feed with the LinkedIn API for maximum flexibility.

By adding a LinkedIn widget, you enhance engagement, build credibility, and keep your website fresh with live updates.

Start today and make your website more interactive and professional with LinkedIn integration.

DEV Community