Embedding a LinkedIn feed into your Squarespace website can be a great way to showcase your professional profile and activity to site visitors. However, Squarespace does not have built-in support for embedding LinkedIn feeds. With some custom coding, it is possible to embed a LinkedIn feed into a Squarespace site.
Prerequisites
Before embedding your LinkedIn feed, you’ll need:
- A LinkedIn account
- A LinkedIn Company or Showcase Page
- The Squarespace ID of the page you want to embed the feed into
- Basic HTML and JavaScript knowledge
To get started, you’ll first want to make sure your LinkedIn page has an active feed on it. This can be done by posting updates, images, links, and more to your LinkedIn page.
Get the LinkedIn Embed Code
Here are the steps to generate the necessary embed code from LinkedIn:
- Go to your LinkedIn Company or Showcase Page
- Click on the More dropdown menu and select Embed post
- In the popup window, choose the post you want to embed and select Embed
- This will generate an
<iframe>
embed code for that specific post - Copy this entire embed code
The embed code will look something like this:
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:################" height="352" width="504" frameborder="0"></iframe>
We’ll need to tweak this code a bit before adding it to Squarespace.
Create a Code Block in Squarespace
To embed content from other sites, we’ll need to use Code Blocks in Squarespace. Here’s how to create one:
- Go to the Squarespace page you want to add the embed code to
- Switch to Design mode using the Design/Content toggle
- Click the “+” icon to add an element, and select Code Block
- This will insert a code block into your page
Add Embed Code
Now we can add the LinkedIn embed code into the code block, with a few modifications:
- Wrap the
<iframe>
embed code inside a<div>
tag like so:
<div>
[LinkedIn Embed Code]
</div> - Give the
<div>
a unique ID likelinkedin-feed
- Add
style="width: 100%;"
to the opening<div>
tag - Paste this adjusted embed code into your code block
It should now look something like this:
<div id="linkedin-feed" style="width: 100%;">
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:################" height="352" width="504" frameborder="0"></iframe>
</div>
Style the Feed
We can add some CSS styling to make the feed look and behave better on our Squarespace site. Here are some suggested styles:
#linkedin-feed {
margin: 50px 0; /* spacing */
}
#linkedin-feed iframe {
width: 100% !important; /* override fixed iframe width */
height: 600px !important; /* higher height allows scrolling */
}
Add this CSS code to a Code Block in Squarespace by surrounding it with <style>
tags:
<style>
#linkedin-feed {
margin: 50px 0;
}
#linkedin-feed iframe {
width: 100% !important;
height: 600px !important;
}
</style>
Configure the Feed
There are a few more settings we can tweak to customize the appearance and behavior of the embedded LinkedIn feed:
Content Filtering
By default, the embedded feed will show all content from your LinkedIn page. You can filter it to only show certain types of content using parameters like:
src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:#####"
Options include:
share-update
– only share postscontent-update
– only regular postsurn:li:ugcPost:#####
– single specific post by ID
Height Adjustment
You can set the height of the feed iFrame using the height
attribute:
height="600px"
The height should be larger than the default (352px) to allow scrolling through posts.
Removing Scrollbars
Add scrolling="no"
to prevent scrollbars from showing:
scrolling="no"
Altering Styles
Use CSS to customize styles of the feed such as:
- Colors
- Fonts
- Spacing
- Borders
- etc.
For example:
#linkedin-feed iframe {
border: 10px solid #CCC;
}
Troubleshooting
Here are some common issues and fixes when embedding a LinkedIn feed in Squarespace:
Issue | Fix |
---|---|
Feed doesn’t load |
|
Can’t interact with posts | Add frameborder="0" to the iFrame code |
Small fixed size | Override height/width in the CSS |
Style issues | Use custom CSS to adjust feed styling |
Optimizing Performance
Here are some tips for optimizing LinkedIn feed performance in Squarespace:
- Limit feed size – Don’t show more posts than needed. Stick to 10 or fewer.
- Load on interaction – Load feed only when clicked instead of automatically.
- Static screenshot – Show a screenshot of feed instead of loading the actual iframe.
- Caching – Use a caching plugin to store feed data and reduce API calls.
- Thumbnail previews – Show smaller thumbnail images instead of full-size.
Implementing some of these tips can help improve page load times and reduce resource usage.
Alternative Embed Options
A few other options for embedding LinkedIn content into Squarespace sites include:
Badges
LinkedIn badges can showcase profile stats. Add badge code to a code block.
Share Button
Add a share button so visitors can share your page. Customize button in LinkedIn settings.
Follow Button
Add a Follow button linked to your LinkedIn profile or page for visitors to follow.
LinkedIn Plugin
Install the LinkedIn Plugin to embed content without code. Limited customization.
Conclusion
With some custom HTML and CSS coding, it’s possible to embed a LinkedIn Company or Showcase feed into a Squarespace website. The key steps are:
- Generate an iFrame embed code from LinkedIn
- Paste adjusted embed code into a Code Block in Squarespace
- Add CSS styling and customization as needed
- Test and troubleshoot embed issues
- Optimize feed performance
With a properly formatted and styled LinkedIn feed, you can showcase your brand’s LinkedIn presence directly on your Squarespace website.