How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Social Share

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

Social Share
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

Choose trigger and platform.

Choose how we initiate a share, and to which platform.

navigator arrow
Trigger + Platform
I want this

Link Block, Text Link, Text Element, or Div Block

to trigger the social share functionality.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
[platform-name]
copy icon
This element is the trigger that initiates the social share. When a user clicks this element, the user will be prompted with the social share content.

The value of this attribute is the social platform the trigger should open.

Accepted platforms:
- Twitter
- Facebook
- Pinterest
- LinkedIn
- Telegram
- Reddit

The platform name is not case sensitive. Twitter = twitter = twitteR.

For all platforms — Choose share URL

Available for all platforms.

navigator arrow
Url
I want this

Text Block, Heading, Paragraph or Text Link

to be the URL for the social share.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
url
copy icon
This element generates the social share URL based on text content. This URL element works with dynamic CMS and static content.

CMS example: A Text Element has a binded CMS field text, "https://finsweet.com/new-campaign". When this URL attribute is placed on the Text Element, the text content will be set as the URL of the social share.

* To use the current page as the URL *
- Do not use this attribute to use the current page's URL. If this attribute is not found on the page, Social Share will use the current page url.

Platform-specific content options

Social platforms have different sharing options.

navigator arrow
Twitter
I want to create a Twitter social share — (3 options)
See how it works
see webflow attributes
navigator arrow
Content
I want this

Text Block, Heading, Paragraph

to be the text content for the social share.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
content
copy icon
This element generates the social share content based on text content.

The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
navigator arrow
Username
I want this

Text Block, Heading, Paragraph or Text Link

to generate Twitter username tags in the social share
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
twitter-username
copy icon
This element generates Twitter usernames based on text content.

For example, @thatsfinsweet
navigator arrow
Hashtag
I want this

Text Block, Heading, Paragraph or Text Link

to generate hashtags in the social share
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
twitter-hashtags
copy icon
This element generates Twitter hashtags based on text content.

For example, #BuiltWithAttributes
navigator arrow
Facebook
I want to create a Facebook social share — (1 option)
See how it works
see webflow attributes
navigator arrow
Hashtag
I want this

Text Block, Heading, Paragraph or Text Link

to generate hashtags in the social share
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
facebook-hashtags
copy icon
This element generates Facebook hashtags based on text content.

For example, #BuiltWithAttributes
navigator arrow
Pinterest
I want to create a Pinterest social share — (2 options)
See how it works
see webflow attributes
navigator arrow
Image
I want this

Image

to generate the image in the social share
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
pinterest-image
copy icon
This element generates a Pinterest image based on text content.

Place this on an image element inside Webflow. The src (image source) will be used in the social share.
navigator arrow
Description
I want this

Text Block, Heading, Paragraph

to generate the description in the social share
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
pinterest-description
copy icon
This element generates a Pinterest description based on text content.
navigator arrow
Reddit
I want to create a Reddit social share — (1 option)
See how it works
see webflow attributes
navigator arrow
Content
I want this

Text Block, Heading, Paragraph

to be the text content for the social share.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
content
copy icon
This element generates the social share content based on text content.

The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
navigator arrow
Telegram
I want to create a Telegram social share — (1 option)
See how it works
see webflow attributes
navigator arrow
Content
I want this

Text Block, Heading, Paragraph

to be the text content for the social share.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-element
copy icon
Value
content
copy icon
This element generates the social share content based on text content.

The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
navigator arrow
LinkedIn
There are no options for LinkedIn
See how it works
see webflow attributes
There are no additional options for this platform. It only accepts URL for social share.

Popup width and height

The height and width of the social share popup.

navigator arrow
Option
Width
I want the social share popup to have this width
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-width
copy icon
Value
VALUE_IN_PX
copy icon
Width of the social share popup.
Where?
Add to an element with fs-socialshare-element = "[platform-name]"
navigator arrow
Option
Height
I want the social share popup to have this height
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-socialshare-height
copy icon
Value
VALUE_IN_PX
copy icon
Height of the social share popup.
Where?
Add to an element with fs-socialshare-element = "[platform-name]"

Working examples

See this solution working live in this Webflow project.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.