Adding Social Media Buttons to Your Website
Social media buttons help visitors share your content and find your profiles. In this guide, we explain how to add various social media elements to your Sitebuilder website.
Types of Social Media Elements
Social Profile Links
Links to your social media profiles:
- Twitter/X
- YouTube
- TikTok
Share Buttons
Allow visitors to share your content:
- Share on Facebook
- Tweet this
- Pin on Pinterest
- Share via LinkedIn
- Email to friend
Social Feeds
Display your social content:
- Instagram feed
- Facebook posts
- Twitter timeline
- YouTube videos
Adding Social Profile Links
Using Social Icons Widget
- Open Sitebuilder editor
- Click Add Element
- Find Social Icons or Social Links
- Drag to desired location
Configuring Links
- Click on the social icons element
- For each platform:
- Select the platform
- Enter your profile URL
- Choose icon style
- Add or remove platforms as needed
Icon Styles
Options:
- Colored (original colors)
- Monochrome
- Custom brand colors
- Circle, square, or icon-only
Placement Tips
Best locations for social icons:
- Header (small icons)
- Footer (standard placement)
- Sidebar
- Contact page
- About page
Adding Share Buttons
Page Share Buttons
- Add Share Buttons element
- Select platforms to include
- Choose button style:
- Icons only
- Icons with text
- Icons with count
- Position on page
Product Share Buttons
For e-commerce:
- Add to product template
- Pre-populated with product URL
- Product image in share preview
Blog Post Sharing
Place at:
- Top of article
- Bottom of article
- Floating sidebar
Creating Custom Social Links
Manual Link Buttons
- Add Button element
- Set link to your profile URL
- Add social media icon
- Style to match platform
Navigation Menu Links
Add to your menu:
- Go to menu settings
- Add custom link
- Enter profile URL
- Use icon instead of text
Social Media Feeds
Instagram Feed
Using Built-in Widget:
- Add Instagram Feed element
- Connect your account
- Configure:
- Number of posts
- Grid layout
- Link behavior
Using Embed Code:
- Generate embed at Instagram
- Add HTML element
- Paste embed code
Facebook Feed
- Add Facebook widget
- Connect page
- Select content type:
- Timeline
- Events
- Messages
Twitter/X Feed
- Go to publish.twitter.com
- Create timeline widget
- Copy embed code
- Add HTML element in Sitebuilder
- Paste code
YouTube Videos
Single Video:
- Copy video URL
- Add Video element
- Paste URL
Channel Feed:
- Use YouTube embed options
- Channel or playlist embed
- Customize player appearance
Open Graph Settings
What is Open Graph?
Tags that control how your pages appear when shared on social media.
Essential Tags
For Every Page:
- og:title - Page title
- og:description - Summary
- og:image - Share image
- og:url - Page URL
Setting in Sitebuilder
- Go to page SEO settings
- Find Social/Open Graph section
- Set:
- Social title
- Social description
- Social image (1200x630 pixels)
Testing
Preview your shares:
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
Best Practices
Profile Links
- Only include active profiles
- Keep icons consistent style
- Update if profiles change
- Test all links work
Share Buttons
- Choose relevant platforms
- Do not overwhelm with options
- Place where visible
- Track share analytics
Social Feeds
- Keep feeds updated
- Remove if inactive
- Consider load time impact
- Mobile responsiveness
Platform-Specific Tips
- Use Facebook Page (not personal)
- Enable messaging if applicable
- Business page benefits
- Business account recommended
- Grid layout popular
- Link in bio strategy
- Great for B2B
- Company page link
- Professional content sharing
Twitter/X
- Good for news/updates
- Follow button option
- Embedded timelines
Performance Considerations
Load Time
Social elements can slow your site:
- Lazy load feeds
- Limit visible posts
- Use official widgets (optimized)
Mobile
- Ensure touch-friendly
- Adequate spacing
- Responsive layouts
Privacy Considerations
GDPR Compliance
- Social buttons may track visitors
- Cookie consent notice
- Privacy policy update
Alternative Options
Privacy-friendly share options:
- Share via URL copy
- Email sharing
- QR codes
Need Help?
We are here for you! If you run into any issues or have questions, our support team is happy to help you personally. Send us a message through the ticket system - we usually respond within a few hours and are happy to assist you.
0 van 0 vonden dit nuttig