How do I add a "follow on Instagram" button to my website using Webflow?

To add a "follow on Instagram" button to your website using Webflow, follow these steps:

1. Obtain your Instagram profile link: First, make sure you have your Instagram profile link handy. You can find this by logging into your Instagram account and navigating to your profile. Once there, copy the URL from your browser's address bar.

2. Add a new link block: In the Webflow Designer, navigate to the page where you want to add the Instagram button. Drag and drop a "link block" element onto your canvas. This will serve as the container for your button.

3. Style the link block: Select the link block and navigate to the Styles panel. Customize the dimensions, background color, border, typography, or any other style attributes to match your website's design.

4. Insert an Instagram icon: To visually represent the Instagram button, you can use an icon from a library like Font Awesome or upload a custom SVG icon.

- If using Font Awesome, go to their website (fontawesome.com), find the Instagram icon, and follow the instructions to add the Font Awesome library to your Webflow project. Once added, you can choose the Instagram icon from the Font Awesome section in the Webflow Designer's Add Element panel.

- If you have a custom SVG icon, you can upload it to your Webflow project and add it as an image element within the link block.

5. Link the button to your Instagram profile: With the link block selected, navigate to the Link settings in the right-hand sidebar. Paste your Instagram profile URL in the "Link URL" field. This will ensure that clicking the button redirects users to your Instagram profile page.

6. Preview and publish: Preview your website to see how the "follow on Instagram" button looks and functions. Make any additional adjustments if needed. Once you're satisfied, publish your site for the changes to go live.

Now, visitors to your website will be able to click the "follow on Instagram" button and be redirected to your Instagram profile, allowing them to follow you directly from your site.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Why am I unable to edit the class in Webflow when I receive the message "The value is overridden by more specific selector"?

How can I create different types of "Parallax" effects in Webflow without using custom code?

How can I show a specific container, including text and an image, exclusively on mobile portrait mode in Webflow? I want to prompt users to turn their phone sideways. I couldn't find a "hide" button or similar feature mentioned in older posts or Webflow's content. Am I overlooking something? I've explored Webflow's resources, but haven't come across any solutions.

Can I build a website on Webflow and then import it to a domain purchased on Namecheap?

What could be causing the scrolling issue on my Webflow search result page on mobile and how can I fix it?

How can I implement smooth scrolling using Locomotive.js in Webflow while ensuring position sticky functionality is working correctly?

How can I integrate Stripe with Webflow and ensure it works properly?

How can I redirect my WordPress website to the non-www version after switching to Webflow?

How can I integrate Google Analytics into my Webflow website and track specific button clicks using the event tracking feature?

How can I force a background video element to autoplay, loop, and mute on Safari and iPhones in Webflow without embedding the video?

How can I make a div in Webflow wrap its content and not take up the full width of the block, specifically when it contains a row of images?

How can I share and copy pages and content between projects in Webflow?

Can scrolling be prevented when the off-canvas menu is open in Webflow?

Can I offer a monthly subscription service using Webflow Ecommerce?

How can I enable scrolling on my Webflow site when using an I frame as the cover image, specifically for Safari on iPad?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?