Share Bar

Share Bar


A user engagement tool that simplifies content sharing on social media platforms. By integrating this component into your website or application, you provide users with a convenient way to spread the word about your content, enhancing its visibility and reach.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Share Bar Example 

Component Specifications

Item/Field Description Required/Optional
Title Field type: Single line text aligned with social icons
Character Recommendation: 10
Social Links  Field type: Icon + Link
Hover: White box and blue icon
Number: Up to 6

When to Use

Content Sharing: Use this component when you want to encourage users to share specific pieces of content, such as articles, products, or media, on their social media profiles.

Wider Reach: Implement it to increase your content's exposure by tapping into the vast audiences of social media platforms.

User Engagement: Use it to foster user engagement and interaction with your content, as sharing often indicates user appreciation.

When to Consider Something Else

Minimal Online Presence: If your website or platform does not have a significant online presence or if social sharing is not a priority, consider other features or components.

Privacy Concerns: If your content is sensitive or if privacy concerns are paramount, you may want to provide alternative means of sharing that offer more control to your users.

How to Use

Integration: Insert the Share Bar into your web page's code, positioning it where you want the social sharing icons to appear.

Customization: Customize the links in the href attributes to point to your social media profiles or specific sharing URLs. You can also adjust the visual design to match your website's aesthetics.

Accessibility: Ensure that the icons have appropriate alternative text for screen readers, improving accessibility.

JavaScript (Optional): If you want to track social sharing or implement additional features like share counters, you can use JavaScript to enhance functionality.

Accessibility Tips

  • Provide clear and concise alternative text for each social media icon to make it accessible to users with visual impairments.

  • Test the component with screen readers to ensure that users can navigate and interact with it effectively.

  • Consider providing a visible tooltip or label near the icons to inform users about their purpose, even if the icons themselves have appropriate alternative text.


ShareThis - Share bar platform

Commonly Used