Social Media widget

The Social Media widget allows you to add social sharing actions or direct links to your social media profiles anywhere on your site. It helps visitors share your content, discover your social channels, and engage with your brand beyond your website.

The widget supports two distinct modes:

  • Share This Page – lets visitors share the current page on selected networks
  • Go to Page – links directly to your social media profiles or custom URLs

Used thoughtfully, the Social Media widget strengthens visibility, reach, and engagement across platforms.

What the Social Media Widget Is Used For

Use the Social Media widget to:

  • Encourage visitors to share content
  • Drive traffic to your social media profiles
  • Increase content reach and brand awareness
  • Add recognizable social icons to pages or sections

Common use cases:

  • Blog posts and articles
  • Landing pages and campaigns
  • Footers and content sections
  • About pages or contact sections
  • Promotional or shareable content

Social Media Modes

Share This Page

This mode allows visitors to share the current page URL on selected social networks.

How it works:

  • The widget automatically detects the page URL
  • Clicking an icon opens the corresponding share dialog
  • Visitors can share the page with one click

Available actions:

  • Select which social networks are available
  • Reorder icons using drag & drop
  • Remove or add networks as needed

Typical networks include:

  • Facebook
  • X (Twitter)
  • LinkedIn
  • Pinterest
  • Tumblr (availability may vary)

Best used for:

  • Blog posts
  • Articles
  • Case studies
  • Content meant to be shared externally

💡 Tip

Place share widgets near headlines or at the end of content for higher engagement.

Go to Page

This mode links icons directly to specific URLs.

How it works:

  • Each icon has its own editable URL
  • Clicking an icon sends the visitor to that destination
  • URLs can be changed freely

Common destinations:

  • Social media profiles (Facebook, Instagram, LinkedIn, X, YouTube)
  • Community pages
  • External platforms
  • Custom landing pages

Best used for:

  • Promoting your social channels
  • Providing follow links
  • Directing traffic off-site intentionally

💡 Tip

Use this mode when your goal is long-term audience growth rather than content sharing.

Managing Social Icons

Adding Icons

  • Click + to add a new social icon
  • Choose an icon from the icon picker
  • Assign a share action or URL (depending on mode)

Reordering Icons

  • Drag and drop icons to control visual order
  • Place the most important platforms first

Removing Icons

  • Click an icon to remove it from the list

Styling Options

The Styling panel allows you to control the visual appearance of the social media icons so they match your brand, layout, and overall design language. These settings apply to both sharing buttons and profile-link icons.

Button Size

Controls the overall size of each social media button.

  • Smaller values create a compact, minimal look
  • Larger values increase visibility and tap/click area

💡 Best practice:

Use slightly larger sizes in headers or mobile views to ensure icons remain easy to tap.

Padding Size

Adjusts the internal spacing inside each button, around the icon.

  • Lower padding = tighter, more compact buttons
  • Higher padding = more breathable, touch-friendly buttons

💡 Tip:

Increasing padding without increasing icon size is a great way to improve usability without making the icons feel visually heavy.

Button Border Radius

Controls how rounded the button corners are.

  • 0px   → sharp, square buttons
  • Higher values → rounded or pill-shaped buttons

Design guidance:

  • Sharp corners work well for minimal or corporate designs
  • Rounded buttons feel softer and more friendly

Button Background Color

Sets the default background color of the social media buttons.

Use this to:

  • Match your brand colors
  • Blend buttons into the header or page background
  • Create contrast against surrounding elements

Button Hover Background Color

Defines the background color when a user hovers over (or taps) a button.

This provides:

  • Visual feedback
  • Improved interactivity
  • Clear indication that the icon is clickable

💡 Best practice:

Use a subtle color change rather than a drastic one to keep the interaction polished and professional.

Icons Color

Controls the color of the social media icons themselves.

  • Ensure strong contrast against the button background
  • Use neutral colors (white, dark gray) for consistency
  • Or use brand colors for expressive designs

💡 Accessibility tip

Always check contrast to ensure icons remain clearly visible for all users.

Styling Tips & Recommendations

  • Keep icon size and padding balanced for clarity
  • Use consistent border radius across buttons, icons, and CTAs
  • Subtle hover effects feel more refined than dramatic color shifts
  • In headers, prioritize clarity and simplicity over decoration
  • Test styling on both desktop and mobile to ensure usability

This styling system gives you full control over size, spacing, shape, and color, making it easy to adapt social media icons to both minimal headers and expressive page sections while maintaining consistency and usability.

Design & UX Tips (General Pages)

  • Use Share This Page for content-driven pages
  • Use Go to Page for brand and profile promotion
  • Keep icon sets small and focused
  • Avoid overwhelming users with too many networks
  • Ensure icons are clearly visible and accessible
  • Test placement on both desktop and mobile

Summary

The Social Media widget allows you to:

  • Share pages or link to external profiles
  • Choose and reorder social networks
  • Encourage engagement and visibility
  • Add recognizable social actions anywhere on your site

When placed intentionally, it becomes a powerful tool for discovery, sharing, and brand growth.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.