Social Icons - Follow Us

How to integrate Social Icons - Follow Us with Webflow

Websites require links to social profiles. Manually coding social icon implementations takes development time for each new profile or design change. Social Icons - Follow Us generates these links through a visual dashboard and JavaScript embed code, eliminating custom implementation work.

You can add Social Icons - Follow Us to Webflow through the Webflow Apps Marketplace listing or by embedding JavaScript code directly into your site. First, you configure your social profiles and styling preferences in the Smartarget dashboard before generating the embed code. Then, you implement the code in Webflow using one of three methods: site-wide custom code, the Scripts tool, or a custom HTML embed element for page-specific placement.

Use the Social Icons - Follow Us app

The Social Icons - Follow Us marketplace app is a verified integration available on the Webflow Apps Marketplace. To implement it, you first configure the widget in the Smartarget dashboard (selecting social profiles, choosing styling, and setting positioning), then copy the automatically generated JavaScript code and implement it across your Webflow site through custom code sections.

The app supports major social platforms including Facebook, Instagram, Twitter, LinkedIn, Pinterest, YouTube, TikTok, WeChat, Weibo, and Snapchat.

• Multiple social platforms including Facebook, Instagram, Twitter, LinkedIn, Pinterest, YouTube, TikTok, WeChat, Weibo, and Snapchat
• Visual styling controls for icon appearance, colors, and animations
• Position configuration for desktop and mobile views
• No-code setup through dashboard interface

Create a free Smartarget account, configure your widget settings, and generate embed code from the dashboard. The platform requires no credit card for basic tier access.

Embed JavaScript code in Webflow

Webflow provides three distinct methods for adding the Smartarget Social Icons - Follow Us JavaScript code to your site, each serving different implementation needs. The first method—Site-Wide Custom Code—places the widget across all pages through the Project Settings custom code section, making it ideal for global deployment. The second method uses Webflow's Scripts tool at the site level, though it's limited to 2000 characters per script, requiring external hosting if your code exceeds this threshold. The third method employs Custom HTML Embed elements on individual pages, offering precise control over widget location for page-specific placement. Each approach offers distinct advantages depending on whether you need site-wide visibility or targeted placement on specific pages.

Site-wide custom code for global deployment

Add the widget across all pages using Webflow's custom code settings. Open your Webflow project, click the settings icon, navigate to Custom Code, and paste your Smartarget JavaScript in the Footer Code section before the closing </body> tag. This placement prevents the script from blocking page rendering during initial load.

Save your settings and publish the site. The widget will then appear automatically on every page where the embed code was placed, displaying the social profiles and styling you configured in the Smartarget dashboard.

Use Scripts Tool for Site-Level Implementation

The Webflow Scripts tool offers an alternative approach with a 2000-character limit per inline script. Access Site Settings → Scripts tool, add a new inline script, choose footer placement, and paste your Smartarget code.

If your generated code exceeds 2000 characters, host the script externally and reference it using <script src="url"> format instead of inline embedding.

Custom HTML embed for page-specific placement

Add the widget to specific pages using Custom Code Embed elements. Open your target page in the Webflow Designer, access the Add panel (+), drag a Custom Code Embed element to your desired location, and paste the Smartarget JavaScript code. This method gives precise control over widget placement on individual pages.

Note: Due to Smartarget documentation infrastructure instability (HTTP 524 timeout errors affecting smartarget.online resources during research), some documentation links may be intermittently unavailable. If you encounter access issues with Smartarget guides, contact their support directly for implementation instructions.

A video tutorial demonstrates the complete process with actual screens and click locations.

Important limitation: Social Icons - Follow Us operates as a client-side widget without API, SDK, or webhook capabilities. All customization happens in the Smartarget dashboard before code generation.

What you can build

Social Icons - Follow Us adds follow buttons to Webflow sites through JavaScript embed codes. Configure styling and positioning in the Smartarget dashboard, then embed the code using one of three implementation methods:

• Global social follow bar: Add a persistent follow widget across all site pages using site-wide custom code placement. Configure the widget to display Facebook, Instagram, Twitter, LinkedIn, YouTube, and TikTok profiles with consistent styling that matches your brand colors and positioning that works across desktop and mobile breakpoints.
• Landing page social connections: Embed social follow buttons on specific landing pages or campaign pages using Custom HTML Embed elements. Place the widget strategically within your page layout (header, footer, or sidebar) to drive social profile follows from high-traffic marketing pages without affecting other site pages.
• Blog and content page engagement: Add social follow buttons to blog post templates or specific content pages where readers are most engaged. Position the widget at the end of articles or in sidebars to convert content readers into social followers, with support for platforms like Pinterest, WeChat, Weibo, and Snapchat alongside major social networks.
• Multi-platform footer widget: Create a comprehensive social media footer that displays up to 10 social platform links (Facebook, Instagram, Twitter, LinkedIn, Pinterest, YouTube, TikTok, WeChat, Weibo, Snapchat) with customizable icon styling, hover animations, and mobile-responsive positioning configured through the visual dashboard.