Facebook Share Button

Props

• shareUrl – (string, required) The full URL to be shared on Facebook.
• hashtag – (string, required) The hashtag to include in the Facebook post (e.g., #WebinarMagic).

Route Params

• None

Component Attributes

• data-cc-component="facebookShareButton" – Initializes this component automatically on page load.
• data-cc-component-share-url="https://www.example.com" – Sets the shareUrl prop. (Replace https://example.com with the full URL you want to share.)
• data-cc-component-hashtag="#funtimes" – Sets the hashtag prop. (Replace #funtimes with the hashtag you want to use.)

Custom Behavior

• Constructs a Facebook share link (https://www.facebook.com/sharer/sharer.php) with:
  • The passed shareUrl, enhanced with UTM parameters:
    • utm_source=fb
    • utm_medium=social_share
    • utm_campaign=webinar_sharing
    • utm_content=webinar-thank-you
  • The passed hashtag appended via query string.
  On click:
  • Opens a new Facebook share dialog in a popup window (600x400px).
  • Tracks the click for analytics.
  • Logs an error if either shareUrl or hashtag is missing.

‍

1. From the Kitchen Sink copy the Facebook Share Button component (cmd + c OR right-click → Copy).
2. Open your Webflow project and paste the component where you'd like the start time to appear.
3. Select the pasted element and convert it into a Webflow Component (right-click → Create Component).
4. Publish your changes. The button will automatically initialize and be functional when the page URL includes a valid webinarRegistrationId.

1. Find the element you want to handle the click (or add a new button, link box, etc).
2. In the Element Settings panel, add this custom attribute:
   • Name: data-cc-component
   • Value: facebookShareButton
3. In the Element Settings panel, add this custom attribute:
   • Name: data-cc-component-hashtag
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
4. In the Element Settings panel, add this custom attribute:
   • Name: data-cc-component-share-url
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
5. Publish your changes.

Apply your own styles using Webflow's Designer.

The component will not modify styling automatically.

You can safely add text, icons, or animations to the button.