The Social Share Block allows visitors to easily share your content across popular social media platforms and communication channels. This DigiBlocks Pro block provides customizable sharing buttons with multiple styling options and platform choices, perfect for increasing content engagement and social reach. It works seamlessly with our DigiFusion theme and its Pro version for creating custom post templates and page layouts.
Adding the Social Share Block
Navigate to the post or page where you want to add social sharing functionality. Click the block inserter (+) and search for “Social Share” in the DigiBlocks Theme category. The block will be added with default social platforms enabled, displaying preview buttons in the editor.
Social Network Configuration
Available Platforms
Enable or disable individual social sharing platforms using the toggle controls in the Social Networks panel:
Facebook – Share content to Facebook with automatic URL detection
X (Twitter) – Share content to X platform with URL embedding
LinkedIn – Professional sharing for LinkedIn networks
Pinterest – Visual content sharing for Pinterest boards
Reddit – Community sharing for Reddit discussions
WhatsApp – Direct messaging sharing for WhatsApp contacts
Telegram – Instant messaging sharing for Telegram users
Email – Email sharing with automatic subject and body population
Print – Browser print functionality for content archiving
Each platform uses its official sharing API and maintains brand-consistent styling when custom colors are disabled.
Display Options
Button Labels
Control whether platform names appear alongside icons using the Show Labels toggle. When enabled, buttons display both the platform icon and text label. When disabled, only icons are shown for a more compact layout.
Button Style
Choose from three visual presentation styles:
Filled – Solid background buttons using platform brand colors or custom colors
Outlined – Transparent buttons with colored borders matching platform branding
Plain – Minimal buttons with no background or borders, ideal for clean designs
Button Sizing
Button Size – Adjust the overall dimensions of social sharing buttons
- Range from 20px to 80px for optimal icon visibility
- Responsive controls allow different sizes across devices
- Automatically maintains proper icon proportions
Buttons Spacing – Control the gap between individual sharing buttons
- Range from 0px to 40px for flexible layout spacing
- Responsive settings for optimal mobile spacing
Alignment Options
Buttons Alignment – Position the group of sharing buttons within the container
- Left alignment for standard content flow
- Center alignment for symmetric designs
- Right alignment for sidebar or footer placement
Color Customization
Default Brand Colors
By default, social share buttons use official platform brand colors for authentic recognition. Each platform maintains its distinctive color scheme for immediate user recognition.
Custom Color Override
Enable Use Custom Colors to apply consistent styling across all platforms:
Normal State Colors:
Button Background – Set background color for all sharing buttons
Button Text – Choose text and icon color for optimal contrast
Hover State Colors:
Button Background – Background color change during user interaction
Button Text – Text and icon color change on hover state
Custom colors override individual platform branding for cohesive design integration.
Typography Settings
Configure text appearance when labels are enabled:
Font Family – Select from available Google Fonts or system fonts
Font Size – Responsive text sizing with pixel, em, or rem units
Font Weight – Choose from available font weights
Font Style – Normal or italic styling options
Text Transform – Apply uppercase, lowercase, or capitalize formatting
Text Decoration – Add underline, overline, or strikethrough effects
Line Height – Control vertical text spacing with em or pixel units
Letter Spacing – Adjust character spacing for readability
Border and Visual Effects
Border Styling
Border Style – Choose from none, solid, dashed, dotted, or double borders
Border Width – Set individual border thickness for each side
Border Radius – Create rounded corners with pixel or percentage values
Border Color – Set border color for normal state
Border Hover Color – Border color change during user interaction
Advanced Styling
Padding – Internal spacing within each sharing button
Margin – External spacing around the entire button group
Animation Effects
Add entrance animations to engage visitors when the sharing buttons come into view. Choose from fade, slide, zoom, and bounce animations with preview functionality to test effects before publishing.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust button sizes, spacing, alignment, and typography independently for each screen size to ensure optimal usability across all devices.
Visibility Controls
Control block visibility across different devices:
Hide on Desktop – Hide buttons on desktop displays while keeping them visible on smaller screens
Hide on Tablet – Remove buttons from tablet view while maintaining desktop and mobile visibility
Hide on Mobile – Hide buttons on mobile devices for performance or design considerations
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Technical Implementation
The Social Share Block automatically generates proper sharing URLs for each platform, handling URL encoding and parameter formatting. The Email option creates a mailto link with the page URL in the message body, while the Print option triggers the browser’s native print dialog.
For DigiFusion theme users, this block integrates perfectly with custom single post templates and page layouts created through the Site Builder feature available in DigiFusion Pro, allowing for sophisticated content sharing implementations across your entire website.