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.

Get Started

14,722,333

loads per month

Social Share
Script
Documentation
Example
FAQ
Step #1

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

copy icon
Copy Script
Scroll horizontally to see documentation
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]"
navigator arrow
I want to have more than one instance of Social share on the same page. Required to share two or more content/url.
See how it works
see webflow attributes
Optional
This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances
Second instance example
Third instance example
fs-socialshare-element = "twitter"
fs-socialshare-element = "twitter-2"
fs-socialshare-element = "twitter-3"
fs-socialshare-element = "linkedin"
fs-socialshare-element = "linkedin-2"
fs-socialshare-element = "linkedin-3"
fs-socialshare-element = "facebook"
fs-socialshare-element = "facebook-2"
fs-socialshare-element = "facebook-3"
fs-socialshare-element = "content"
fs-socialshare-element = "content-2"
fs-socialshare-element = "content-3"
fs-socialshare-element = "url"
fs-socialshare-element = "url-2"
fs-socialshare-element = "url-3"

Working examples

See this solution working live in this Webflow project.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

Check the dev documentation
external link icon

Next time implement inside Webflow

Use Finsweet Extension
external link icon
Attention, you're browsing the Attributes Legacy (v1) documentation

Adopt the NEW Finsweet Attributes!

This version of Attributes — named Attributes Legacy — is now outdated ¹. For new developments, we highly recommend transitioning to the latest Finsweet Attributes to benefit from enhanced features and support.²

¹ Attributes Legacy will remain operational for existing projects, but please note that we have ceased offering support for this version.
² The new version of Finsweet Attributes and Attributes Legacy are incompatible, they can't be used on the same page. 

Subscribe

Sign up for future releases!

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