Functional
Social Share
Share content to social media platforms. Works with Collection Lists, Templates, and static content.
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.
Trigger + Platform
I want this
Link Block, Text Link, Text Element, or Div Block
to trigger the social share functionality.
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
[platform-name]
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.
The value of this attribute is the social platform the trigger should open.
Accepted platforms:
- Telegram
The platform name is not case sensitive. Twitter = twitter = twitteR.
For all platforms — Choose share URL
Available for all platforms.
Url
I want this
Text Block, Heading, Paragraph or Text Link
to be the URL for the social share.
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
url
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.
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.
Content
I want this
Text Block, Heading, Paragraph
to be the text content for the social share.
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
content
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.
The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
Username
I want this
Text Block, Heading, Paragraph or Text Link
to generate Twitter username tags in the social share
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
twitter-username
This element generates Twitter usernames based on text content.
For example, @thatsfinsweet
For example, @thatsfinsweet
Hashtag
I want this
Text Block, Heading, Paragraph or Text Link
to generate hashtags in the social share
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
twitter-hashtags
This element generates Twitter hashtags based on text content.
For example, #BuiltWithAttributes
For example, #BuiltWithAttributes
Hashtag
I want this
Text Block, Heading, Paragraph or Text Link
to generate hashtags in the social share
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
facebook-hashtags
This element generates Facebook hashtags based on text content.
For example, #BuiltWithAttributes
For example, #BuiltWithAttributes
Add this attribute
Description
Name
fs-socialshare-element
Value
pinterest-image
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.
Place this on an image element inside Webflow. The src (image source) will be used in the social share.
Description
I want this
Text Block, Heading, Paragraph
to generate the description in the social share
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
pinterest-description
This element generates a Pinterest description based on text content.
Content
I want this
Text Block, Heading, Paragraph
to be the text content for the social share.
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
content
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.
The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
Content
I want this
Text Block, Heading, Paragraph
to be the text content for the social share.
See how it works
Add this attribute
Description
Name
fs-socialshare-element
Value
content
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.
The text content of the Text Element, Paragraph, or Heading will be used as the text content of the social share.
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.
Add this attribute
Description
Name
fs-socialshare-width
Value
VALUE_IN_PX
Width of the social share popup.
Where?
Add to an element with fs-socialshare-element = "[platform-name]"
Add this attribute
Description
Name
fs-socialshare-height
Value
VALUE_IN_PX
Height of the social share popup.
Where?
Add to an element with fs-socialshare-element = "[platform-name]"
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
Optional
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"
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
Next time implement inside Webflow
Use Finsweet Extension
