How to Add Twitter/X Feed to Your Website

With Jotform’s Twitter/X Feed Widget, you can display your latest posts and conversations directly on your website. Customize the feed to match your site, choose what to show, and keep visitors connected with your latest updates without sending them elsewhere.

Before you can add the Twitter/X Feed Widget to your website, you’ll first need to configure the age verification settings, customize the widget’s appearance, and copy the embed code for it. Here’s the quick way to do it:

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

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget window, enter Twitter/X Feed.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, click on Add First Source in the Connected Resources section.

6. Next, in the Add Source menu, enter your public X profile URL or username in the Source section.
7. Then, click on Connect.

8. Now, click on the Back button at the top-right of the Edit X / Profile menu to return to the General tab. 

9. Next, continue to set up these properties:
   • Header — Keep this toggled on to show the widget’s header.
   • Title —  Add a title to appear at the top of the widget.
   • Description  — Enter a short description below the title to provide context for your Twitter/X Feed,
   • Post Limit — Click on and hold the slider handle, then drag it to set the maximum number of posts displayed in the feed.
   • Author Name — Show or hide the name of the Twitter/X Feed account that each post was published from.
   • Author Picture — Show or hide the profile picture of the Twitter/X Feed account.
   • Publication Date — Show or hide the date each Twitter/X Feed post was published on.
   • Post Text — Show or hide the caption or text associated with each Twitter/X Feed post.
   • Source Label — Display a label indicating which connected Twitter/X Feed source each post is from.

10. Then, under the Styles tab, customize these properties:
    • Theme — Click on the Downward Arrow icon and select Light, Dark, or Custom as the widget’s theme.
    • Corner Radius — Select the corner style of the widget elements, such as Square, Rounded, or Circular.
    • Post Style — Click on the Downward Arrow icon and choose such as Classic, Compact, or Title.
    • Action on Post Click — Keep the default Show Modal option selected, or click on the Downward Arrow icon and select Open in a New Tab to open links as a new tab in your browser, or None to have no action at all.
    • External Links — Keep this toggled on to allow post links to open the original social content.
    • Popup Style — Click on the Downward Arrow icon to customize how the popup displayed when visitors open a post will look.

11. Now, scroll down to the bottom and then continue setting up these options:
    • Image Ratio — Click on the Downward Arrow icon and select the image cropping style, such as Original, Square, Landscape, or Portrait.
    • Post Meta Data — Keep this toggled on to show like and comment information, or toggle it off to hide the metadata.
    • Text Size — Click on and hold the slider handle, then drag it to change the font size in pixels.
    • Card Shadow — Toggle this on to show a subtle shadow around postcards.
    • Source Style — Click on the Downward Arrow icon, and then select how the source is displayed, using either an Icon or a Label. 
    • Jotform Branding — Turn this on to display the Jotform badge below the feed. Or, turn this option off to hide it.
    • Font — Toggle this on to select and match your website’s font.
    • Custom CSS — Turn this on to add custom CSS code and apply advanced styling to the widget.

12. Next, under the Layout tab, configure these properties:
    • Layout— Keep the default List option to display feed items in a vertical list, or select one of the following layouts:
      • Grid — Arrange feed items in rows and columns.
      • Masonry — Display feed items in a staggered layout with different heights.
      • Carousel — Show feed items in a horizontal row that users can scroll through.
      • Slider —  Display one feed item at a time in a slideshow with navigation controls.
    • Width — Click on and hold the slider handle, then drag it to adjust the feed width.
    • Rows — Keep the default value of 2. Or, click on and hold the slider handle, then drag it to adjust the number of feeds displayed.
    • Space Between Items — Click on and hold the slider handle, then drag it to adjust the spacing between post cards.
    • Header Alignment — Click on the Downward Arrow icon and select Left, Center, or Right to align the widget header.
13. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

14. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
15. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

16. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

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

That’s it! Your Twitter/X Feed widget will appear on your website with the design and settings you selected for it. This is what it’ll look like:

Watch on youtube

How to Embed Twitter/X Feed on a Website

Discover

Website Widgets

Supercharge your website with interactive widgets that empower visitors to take action.

Discover Now