How to Embed Medium Feed on a Website

With Jotform’s Medium Feed Widget, you can display your latest Medium articles in a clean, customizable layout that matches your website’s design. Simply connect your Medium publication or profile, personalize the widget, and share your content with your audience in an engaging way.

A Medium Feed is a great way to showcase your latest articles and keep your website updated with fresh content. Whether you’re a writer, blogger, or business, displaying your Medium posts on your website makes it easier for visitors to discover your work without leaving your site.

Creating Your Medium Feed Widget and Getting the Embed Code

Before you can add the Medium Feed Widget to your website, you’ll first need to connect your Medium profile or publication, customize the widget, and copy its embed code. This is how it’s done:

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

2. In the menu that opens up, click on Website Widget.

3. Next, in the Search bar in the upper-left corner of Choose Website Widget, enter Medium Feed.
4. Then, in the search results, click on Use Widget.

5. Now, in Website Widgets, under the General tab in the Widget Properties panel on the right side of the page, configure the following options:
   • Medium URL — Enter the URL of your Medium profile or publication to display its latest articles in the widget.
   • Hidden Posts — Hide specific Medium posts so they won’t appear in your feed.
   • Feed Title — Add a custom title to introduce your Medium feed.
   • Feed Description — Include a short description to provide context about your articles or publication.

6. Then, scroll down and configure the Content Visibility settings:
   • Feed Header — Show or hide the feed header at the top of the widget.
   • Follow Button — Display a button that lets visitors follow your Medium profile or publication.
   • Author Names — Show or hide the author’s name for each article.
   • Article Excerpts — Display a preview of each article’s content.
   • Share Now — Show or hide the sharing option for each article.
   • Load More Button — Display a button that lets visitors load additional articles without leaving the page.
   • Source Label — Show the name of the Medium source for each article.
   • Refresh Button — Display a button that allows visitors to refresh the feed and view the latest posts.
   • Dates — Show or hide the publication date for each article.
   • Images — Display or hide featured images from your Medium posts.
   • Engagement Counts — Show engagement metrics, such as claps or responses, for each article.
   • Excerpts Length — Choose how much of each article excerpt is displayed.

7. After that, scroll down to the bottom and set up the Labels options:
   • Follow Label — Customize the text displayed on the Follow button.
   • Share Label — Customize the text used for the sharing option.
   • Original Post Label — Edit the label that links visitors to the original Medium article.
   • Responses Label — Customize the label displayed for article responses.
   • Load More Label — Change the text displayed on the Load More button.
   • Read More Label — Customize the text used for the Read More link or button.
   • Claps Label — Edit the label displayed alongside the number of claps.
   • Loading Label — Customize the message shown while additional content is loading.

8. Once you’re done, switch to the Styles tab and manage the following options:
   • Theme — Choose a pre-designed theme to quickly change the appearance of your Medium feed.
   • Colors
     • Randomize Palette — Automatically generate a different color palette for the widget.
     • Background — Choose the background color of the widget.
     • Card Background — Set the background color of each article card.
     • Text — Choose the primary text color used throughout the widget.
     • Article Title — Set the color of the article titles.
     • Muted Text — Choose the color used for secondary text, such as dates or labels.
     • Accent — Set the accent color used for highlights, links, and interactive elements.
     • Button Background — Choose the background color of the widget buttons.
     • Button Text — Set the text color displayed on buttons.
     • Border — Choose the color of the borders around cards and other widget elements.

9. Next, scroll down to the bottom and set up these other options:
   • Surface
     • Border Size — Adjust the thickness of the borders around article cards and widget elements.
     • Card and Image Radius — Control how rounded the corners of article cards and images appear.
     • Card Show — Show or hide the borders or card-style containers around each article.
     • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
   • Custom CSS — Apply your own CSS styles for advanced customization beyond the built-in settings.

10. Following that, switch to the Layout tab and configure the following options:
    • Layout — Choose how articles are arranged within the widget.
    • Feed Width — Adjust the overall width of the Medium feed to fit your website’s layout.
    • Item Spacing — Control the amount of space between individual articles.
    • Maximum Posts — Set the maximum number of articles available in the feed.
    • Post Limit — Choose how many articles are displayed when the widget first loads.

11. Then, scroll down to the bottom and continue to set up these things:
    • Posts Per Load — Specify how many additional articles are displayed each time visitors click Load More.
    • Date Format — Choose how publication dates are displayed in the widget.
    • Open Links in New Tab — Open Medium articles in a new browser tab when visitors click them.
    • Right-To-Left Text Direction — Enable right-to-left text support for languages such as Arabic or Hebrew.
12. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

13. Then, in the Embed section, click on Copy Code.
14. Or, if your website is built on a supported platform, click on Platforms in the menu on the left. 

15. Next, in the Search bar at the top of the Platforms page, search for the specific platform.

16. For this example, let’s use the Drupal platform. In Platforms, search for Drupal and click on it.

17. Finally, follow the steps in the How to Embed Your Widget section to add it to your platform.

That’s it. Simply paste the embed code into your website, and the widget will automatically display your latest Medium articles for visitors to explore. Take a look at the screenshot below to see how it appears on a sample website.