How do I add a "follow on Instagram" button to my website using Webflow?
TL;DR
- Drag a Button element onto your page, update the text, and link it to your Instagram profile URL.
- Style the button as desired, optionally add an Instagram icon, and ensure accessibility with an aria-label and good contrast.
To add a "Follow on Instagram" button to your Webflow website, you can use a custom link with Instagram’s URL and style it as a button.
1. Create the Button Element
- Drag a Button element from the Add panel onto your page.
- Double-click the button text and change it to something like “Follow on Instagram.”
2. Link the Button to Your Instagram Profile
- Select the button, then go to the Settings panel (D key).
- In the Link Settings, choose URL and enter your Instagram profile link, e.g.,
https://www.instagram.com/yourusername/. - Set the link to open in a new tab by checking the box.
3. Style the Button
- Use the Style panel to adjust the button’s appearance—background color, padding, border radius, etc.
- You can optionally add an Instagram logo next to the text:
- Upload an Instagram icon as an Image element inside the button.
- Or use a Webflow Icon Font or custom SVG if you prefer vector.
4. Optimize for Accessibility and UX
- Add an aria-label to the button like “Follow us on Instagram” (Settings panel → Custom attributes).
- Make sure contrast and button size meet accessibility best practices.
5. (Optional) Use a Social Icon Widget
- If you want a simpler icon-only solution, you can add an Image or use an Embed element with an SVG icon, then make it a link to your Instagram.
Summary
To add a "Follow on Instagram" button, create a Button element in Webflow, link it to your Instagram profile with URL settings, and customize its style. You can add icons for branding and ensure accessibility best practices are followed.