Social Share

Share content to social media platforms. Works with Collection Lists, Templates, and static content

Overview

The Social Share attribute enables easy sharing to social media platforms. It automatically generates share URLs with proper formatting and opens them in optimized popup windows. Supports Facebook, X (Twitter), Pinterest, LinkedIn, Telegram, and Reddit.

Attribute Syntax

Elements

fs-socialshare-element · string · required

Defines the social platform or content source:

Social Platforms:

• facebook - Share button for Facebook
• x - Share button for X (formerly Twitter)
• pinterest - Share button for Pinterest
• linkedin - Share button for LinkedIn
• telegram - Share button for Telegram
• reddit - Share button for Reddit

Content Elements:

• content - The text content to be shared
• url - Custom URL to share (otherwise uses current page URL)
• facebook-hashtags - Hashtags for Facebook (comma-separated)
• x-hashtags - Hashtags for X (comma-separated)
• x-username - X username to mention
• pinterest-image - Image URL for Pinterest
• pinterest-description - Description for Pinterest

Settings

fs-socialshare-width · number · default: "600"

Defines the width of the share popup window in pixels.

fs-socialshare-height · number · default: "480"

Defines the height of the share popup window in pixels.

fs-socialshare-element · string

Defines which element’s text content should be used for sharing (by selector or element name).

Usage Examples

Basic Social Buttons

<!-- Simple share buttons -->
<div class="share-buttons">
  <button fs-socialshare-element="facebook">Share on Facebook</button>
  <button fs-socialshare-element="x">Share on X</button>
  <button fs-socialshare-element="linkedin">Share on LinkedIn</button>
</div>

Common Use Cases

Blog Post Sharing

Add share buttons to blog posts for easy social media distribution:

<article>
  <h1 fs-socialshare-element="content">{blog-title}</h1>
  <div class="share-bar">
    <button fs-socialshare-element="facebook">Share</button>
    <button fs-socialshare-element="x">Tweet</button>
  </div>
</article>

Product Sharing

Enable customers to share products with friends:

<div class="product">
  <h2 fs-socialshare-element="content">{product-name}</h2>
  <img src="{product-image}" fs-socialshare-element="pinterest-image">
  <button fs-socialshare-element="pinterest">Pin This Product</button>
</div>

Event Promotion

Share event details across social platforms:

<div class="event">
  <h3 fs-socialshare-element="content">Join us for {event-name}!</h3>
  <button fs-socialshare-element="facebook">Share Event</button>
  <button fs-socialshare-element="telegram">Share on Telegram</button>
</div>

Quote Sharing

Create tweetable quotes:

<blockquote fs-socialshare-element="content">
  "Innovation distinguishes between a leader and a follower."
</blockquote>
<button fs-socialshare-element="x">Tweet This Quote</button>

Platform-Specific Features

Facebook

• Shares current page URL by default
• Supports custom URL via fs-socialshare-element="url"
• Supports hashtags via fs-socialshare-element="facebook-hashtags"

X (Twitter)

• Shares text content from content element
• Hashtags: comma-separated list via x-hashtags element
• Username mention: via x-username element
• Character limit: 280 characters

Pinterest

• Requires image URL via pinterest-image element
• Description via pinterest-description element
• Falls back to page description if not specified

LinkedIn

• Shares current page URL
• Automatically extracts page metadata

Telegram

• Shares text and URL
• Opens Telegram app or web version

Reddit

• Shares URL with title
• Opens Reddit submission page

Share URLs Generated

The attribute generates proper share URLs for each platform:

Platform	Base URL
Facebook	https://www.facebook.com/sharer/sharer.php
X	https://x.com/intent/post/
Pinterest	https://www.pinterest.com/pin/create/trigger/
LinkedIn	https://www.linkedin.com/sharing/share-offsite
Telegram	https://t.me/share
Reddit	https://www.reddit.com/submit

Popup Window Behavior

The attribute opens share dialogs in popup windows:

• Centered on screen
• Focused automatically
• Independent of main window
• Optimized size (600x480 by default)

Custom Popup Sizes

<!-- Small popup -->
<button 
  fs-socialshare-element="x"
  fs-socialshare-width="500"
  fs-socialshare-height="400">
</button>

<!-- Large popup -->
<button 
  fs-socialshare-element="facebook"
  fs-socialshare-width="800"
  fs-socialshare-height="600">
</button>

CMS Integration

In Webflow CMS templates, bind dynamic content:

<div class="blog-post-template">
  <!-- Title as share text -->
  <h1 fs-socialshare-element="content">{cms-post-title}</h1>
  
  <!-- Featured image for Pinterest -->
  <img 
    src="{cms-featured-image}" 
    fs-socialshare-element="pinterest-image"
    style="display: none;">
  
  <!-- Excerpt for Pinterest description -->
  <p fs-socialshare-element="pinterest-description" style="display: none;">
    {cms-post-excerpt}
  </p>
  
  <!-- Share buttons -->
  <div class="share-buttons">
    <button fs-socialshare-element="facebook">Share</button>
    <button fs-socialshare-element="x">Tweet</button>
    <button fs-socialshare-element="pinterest">Pin</button>
    <button fs-socialshare-element="linkedin">Share</button>
  </div>
</div>

Styling Share Buttons

/* Icon-based buttons */
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.share-button:hover {
  transform: translateY(-2px);
}

/* Platform colors */
.facebook { background: #1877f2; color: white; }
.x { background: #000000; color: white; }
.pinterest { background: #e60023; color: white; }
.linkedin { background: #0a66c2; color: white; }
.telegram { background: #0088cc; color: white; }
.reddit { background: #ff4500; color: white; }

Content elements (like content, url, pinterest-description, etc.) are typically hidden with display: none or a .hidden class since they’re only used as data sources.

Test share functionality across different platforms to ensure your content appears correctly. Each platform has different rules for how it displays shared content.

Some browsers may block popup windows if they’re not triggered by direct user interaction. Ensure share buttons are clicked directly by users.