How to Embed Social Media Feed on Your Website

Displaying a social media feed on your website is a great way to keep your content fresh and engage visitors with your latest posts. Instead of manually updating your website with new content, you can automatically showcase posts from your favorite social media platforms directly on your pages.

With the Social Media Feed widget, it’s easy to embed live, automatically updated feeds on your website without any coding experience. Jotform lets you customize the layout, choose from different display styles, and match the widget to your website’s overall design.

Creating and Getting Your Social Feed Widget Embed Code 

To embed a social feed on your website, you’ll first need to configure the Social Feed widget and copy its embed code. Here’s how to get started:

1. On your Workspace page, click on Create on the top-left side of the page.

2. Then, in the window that opens up, click on the Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the PDF Embed.
4. Now, in the search results, click on Use Widget.

5. Once the widget opens, in the Widget Properties menu that opens automatically on the right side of the Website Widget Builder, under the General tab, set up these things:
   • Platform — Select the Social Media platform you want to display.
   • Source Type — Select the type of source you want to add.
   • Source — Enter the Public Account Name, Profile URL, or RSS feed URL, depending on the source type you selected.
6. When everything looks correct, click on Add Source.

7. Once the source is added, scroll down and set up these display options:
   • Header — Add a header above the social feed.
   • Widget Title — Enter the title shown at the top of the widget.
   • Widget Description — Add a short description below the widget title.
   • Source Tabs — Let visitors switch between connected social media sources.
   • Author Name — Include the account or page name on each post.
   • Author Picture — Add the profile picture to each post.
   • Publication Date — Include the publication date for every post.
   • Post Text — Show the caption or description for each post.
   • Source Label — Identify which social media platform each post came from. 

8. Next, under the Style tab, personalize the appearance of your social feed with these options:
   • Color Scheme — Switch between Light and Dark themes.
   • Jotform Branding — Choose whether to display the Powered by Jotform badge below the feed.
   • Post Style — Select how posts are presented, such as Classic, Compact, or Tile.
   • Action on Post Click — Choose whether clicking a post opens a popup, link, or does nothing.
   • Popup Style — Select how post content is displayed in the popup.
   • Image Ratio — Select how post images are cropped.
   • Actions Bar — Choose whether to display the Like, Comment, and Share actions.

9. Then, scroll down to customize these additional settings:
   • Source Style — Display the social media platform as an Icon or Label. 
   • External Links — Allow visitors to open the original social media post.
   • Card Accent Colors — Choose whether to use platform colors, a single custom color, or no accent color.
   • Accent Color — Select the widget’s accent color.
   • Background Color — Customize the background color of the widget.
   • Post Background — Set the background color for post cards.
   • Post Text Color — Customize the color of the post text.

10. After that, continue scrolling to adjust these appearance settings:
    • Post Link Color — Set the color used for links within posts.
    • Popup Background — Set the background color of the popup window.
    • Popup Backdrop Color — Customize the color behind the popup.
    • Popup Text Color — Choose the text color used inside the popup.
    • Arrow Background — Set the background color of the navigation arrows.
    • Arrow Color — Customize the color of the navigation arrows.
    • Pagination Color — Choose the color of the pagination controls.

11. Now, at the bottom of the Style tab, fine-tune these appearance settings:
    • Text Size — Adjust the size of the text displayed throughout the widget.
    • Corner Radius — Choose how rounded the corners of the widget appear.
    • Card Shadow — Add or remove the shadow around each post card.
    • Custom CSS — Add custom CSS to further customize the widget’s appearance.

12. Next, under the Layout tab, adjust these layout settings:
    • Layout — Select how your social feed is arranged.
    • Width — Adjust the overall width of the widget.
    • Columns — Set how many columns of posts are displayed.
    • Rows — Choose how many rows of posts appear in the widget.
    • Item Spacing — Adjust the spacing between individual posts.
    • Post Limit — Set the maximum number of posts displayed in the feed.

13. Then, scroll down to finish adjusting these layout settings:
    • RTL — Enable right-to-left layout for languages that read from right to left.
    • Open Links in New Tab — Choose whether posts open in a new browser tab.
    • Align Cards by Height — Keep post cards the same height for a more consistent layout.

14. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

15. Finally, in the Embed section, click on Copy Code.

16. Or, if your website is built on a supported platform, in the menu on the left side of the page, click on Platforms.
17. Then, search for or select your platform to copy the embed code and view platform-specific embedding instructions, and you’re done.

That’s it! You can now paste the copied embed code into your website or follow the platform-specific instructions to add the widget to your site. The screenshot below shows an example of how the Social Feed Widget will look when embedded: