How to Add Social Media Icons to Your Website

Jotform makes it easy to add links to your social media profiles with the Social Media Icons widget. Display recognizable social media icons on your website so visitors can quickly find and connect with you on their favorite platforms.

Whether you’re growing your brand, promoting your business, or building an online community, the Social Media Icons widget helps visitors stay connected with you across your social media accounts.

Adding Social Media Icons features to your website only takes a few steps. Here’s how to set it up:

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 menu, enter Social Media Icons.
4. Then, at the bottom of the Social Media Icons widget in the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, in the Social Links section, you’ll find sample social links that you can manage using the available action icons:
   • Pencil icon — Click on the Pencil icon to edit the social link. 
   • Duplicate icon — Click on the Duplicate icon to create a copy of the social link. 
   • Trash Can icon — Click on the Trash Can icon to delete the social link. 
6. To add another social link, click on Add Social Link.

7. Then, in the Add Social Link menu that appears, set up these things:
   • Network — Select the social media platform you want to add from the Dropdown menu. 
   • URL — Enter the URL of the social media profile or page you want to link to. 
8. Once you’re done, in the upper-right corner, click on Back to return to the Widget Properties menu under the General tab.

9. Then, set up these things:
   • Show Label Tooltips — Leave this enabled to display the social link name as a tooltip when visitors hover over a social link icon, or toggle it off to hide the tooltips. 
   • Open in New Tab — Leave this enabled to open social links in a new browser tab when visitors click on them, or toggle it off to open them in the current tab.

10. Now, under the Style tab, customize these properties:
    • Theme — Select a color theme for the social link icons from the Dropdown menu.
    • Icon Style — Select one of the following styles for the social link icons:
      • Classic — Display the social link icons with their standard appearance.
      • Bordered — Display the social link icons inside bordered shapes.
      • Symbol Only — Display only the social media symbols without background shapes.
    • Icon Shape — Select one of the following shapes for the social link icons:
      • Circle — Display the social link icons inside circular shapes.
      • Rounded — Display the social link icons inside rounded square shapes.
      • Square — Display the social link icons inside square shapes.
    • Icon Size — Click on and hold the slider handle, then drag it to adjust the size of the social link icons.
    • Use Brand Colors — Leave this enabled to display each social link icon using its official brand color, or toggle it off to apply the selected theme colors instead.
    • Hover Animation — Select the animation effect that plays when visitors hover over a social link icon from the Dropdown menu.
    • Jotform Branding — Leave this enabled to display the Powered by Jotform badge below the social link icons, or toggle it off to hide it.
    • Custom CSS — Toggle this on, then enter your custom CSS in the input box that appears to apply advanced styling to the website widget.

11. Next, under the Layout tab, configure these properties:
    • Display Mode — Select one of the following display modes for the social link icons:
      • Inline — Display the social link icons within the page content. 
      • Floating — Display the social link icons as a floating element on the page. 
    • Icon Direction — Select how the social link icons are arranged:
      • Horizontal — Display the social link icons in a horizontal row. 
      • Vertical — Display the social link icons in a vertical column. 
    • Alignment — Select where the social link icons are aligned:
      • Left — Align the social link icons to the left. 
      • Center — Center the social link icons. 
      • Right — Align the social link icons to the right. 
    • Spacing Between Icons — Click on and hold the slider handle, then drag it to adjust the spacing between the social link icons. 
    • Devices to Display On — Select the devices on which you want the social link icons to appear. 
12. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

13. 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.

14. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.
15. 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.

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

That’s it! Your Social Media Icons widget will appear on your website just as you set it up. The screenshot below shows how it looks on a website: