The Social Sharing component allows you to add social media buttons to your page, enabling users to share your content on platforms like X, Facebook, LinkedIn, and more. You can customize the component by choosing which social networks to display, whether to include a label, and what the label says. Additionally, you can adjust the styling with options for button appearance, text alignment, and spacing. This component is useful for pages where you want to encourage social media engagement and make sharing your content.

Example

Share:

Content Options

Label Options

Include Label: Off

Include Label: On

Share:

Custom Label:

Social Network Options

Authors can select which social networks to include in the component, allowing them to tailor the options to their audience. Networks include:

  • X / Twitter
  • Facebook 
  • LinkedIn
  • Pinterest
  • Tumblr
  • Reddit

Layout and Styling Options

Button Styles

Icon Only:

Icon Button:

Outline Button:

LinkedIn Pinterest Tumblr Reddit

Small Button:

LinkedIn Pinterest Tumblr Reddit

Align

Left:

Center:

Right:

Bottom Margin

Bottom Margin: None

Bottom Margin: X-Small

Bottom Margin: Small

Bottom Margin: Medium

Bottom Margin: Large

Bottom Margin: X-Large

the end

Top Margin

Top Margin: None

Top Margin: X-Small

Top Margin: Small

Top Margin: Medium

Top Margin: Large

Top Margin: X-Large

the end

Usage

Do

  • Choose social networks that are relevant to your audience and align with your content’s goals.
  • Keep the label text short and descriptive, such as “Share:” or “Spread the word!”
  • Ensure the component fits naturally within the layout of your page, maintaining consistent alignment with nearby elements.
  • Adjust the spacing above and below the component to match the design flow of the page.
  • Use button styles that complement the overall design theme of your website.
  • Place the component in a prominent location, such as near the top of the page or close to engaging content.
  • Preview the component after customizing it to confirm it looks balanced and blends with your content.
  • Use the component on pages where social sharing adds value, such as blog posts, announcements, or promotional content.

Don't

  • Do not place the component in hard-to-see areas, such as at the very bottom of a long page without context.
  • Refrain from using a label that is overly long or vague, as it can confuse users about the component’s purpose.
  • Skip using social networks that are outdated or unpopular with your target audience, as they can dilute the component’s effectiveness.
  • Do not place the component too close to other clickable elements, which can cause users to accidentally click the wrong button.
  • Don't assume the default settings will fit your design perfectly.

Accessibility

  • Authors should use their best judgment when selecting a button style, ensuring it is clear and easy to read, especially against the chosen background color.