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

How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.

Is it possible to make the page content dynamic in Webflow by selecting an item from a collection associated with a URL query parameter, without the need for javascript or with server-side scripting?

How can I create a table in Webflow without the use of any third-party tools or integrations?

How can I correct the issue where the Webflow staging site appears instead of the custom domain when searching for my Client's business name, Jackson Wink, on Google?

How can I enable event tracking for button clicks in Webflow using Google Analytics?

Is it possible to have a background image in a div, set to "cover" and placed within a div set to "overflow hidden", that reacts to different image proportions and fills either the height or width while cropping to the center, using Webflow?

How can I fix the issue of my edited Webflow settings not reflecting on LinkedIn when sharing the link?

How can I fix the issue with dropdown menus disappearing too quickly in the navbar of my Webflow website?

How can I set a hover transform in Webflow that allows the photo inside a div to zoom in without affecting the size of the div?

How can I find out which pages in Webflow unused assets belong to after deleting them?

Have you worked with Outseta as a third-party tool or integration on Webflow? How does it compare to Memberstack in terms of features and limitations?

Why does my flexbox grid display properly in Chrome, but not in Safari on tablet and mobile?

Has anyone successfully integrated Nowpayments into a Webflow E-commerce website and can provide guidance on how to do it?

How can I make my site on Webflow editable and viewable through a Read-Only link?

How can I align the bulleted content to the bottom and the image to the top in Webflow?

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?