Ridiculously Responsive Social Sharing Buttons
Provides responsive social sharing and follow buttons with SVG icons that can be added to nodes or placed as blocks.
rrssb
Install
composer require 'drupal/rrssb:8.x-2.7'
composer require 'drupal/rrssb:8.x-2.5'
composer require 'drupal/rrssb:8.x-2.4'
Overview
The Ridiculously Responsive Social Sharing Buttons (RRSSB) module integrates the RRSSB+ library into Drupal, providing beautiful, responsive social sharing buttons with SVG-based icons. The module requires no third-party scripts, resulting in small download sizes and excellent browser compatibility.
You can choose between Share buttons (encouraging visitors to share your content on their social networks) or Follow buttons (directing visitors to your social media profiles). Multiple button sets can be configured with different combinations of buttons, allowing different configurations for different parts of your site.
Buttons can be displayed either as an extra field on specific node types or via blocks that can be placed anywhere in your theme's layout. The module also provides a Views field handler for displaying buttons in Views.
The module supports 19 different social networks and actions including Facebook, Twitter/X, LinkedIn, Pinterest, Instagram, YouTube, GitHub, Reddit, WhatsApp, Email, and more. Each button automatically generates the appropriate sharing/follow URLs using tokens for the current page's URL, title, and images.
Features
- Responsive social sharing buttons that adapt to any screen size with attractive SVG-based icons
- Support for both Share buttons (share content to social networks) and Follow buttons (link to your social profiles)
- Multiple button set configurations allowing different button combinations for different contexts
- 19 built-in social network integrations: Facebook, Twitter, X, LinkedIn, Pinterest, Instagram, YouTube, GitHub, Reddit, Tumblr, WhatsApp, Email, VK, Pocket, Hacker News, Delicious, Print, Phone, and Join (user registration)
- Node type integration via extra field - attach buttons to specific content types
- Block placement for flexible positioning anywhere in the page layout
- Views integration with a custom field handler for displaying buttons in Views
- Customizable appearance settings: size, minimum size (shrink), extra row size (regrow), min/max rows, prefix text, and button alignment
- Token-based URL generation with configurable image token fallbacks
- Automatic popup handling for share dialogs
- Auto-generated CSS for only the enabled buttons, optimizing page load
- Extensible via hooks - add custom buttons or modify existing ones
- Demo block for testing appearance settings in real-time
- Drush command for regenerating button CSS
- No third-party scripts required - all functionality is self-contained
Use Cases
Adding share buttons to blog posts
Configure a Share button set with Facebook, Twitter/X, LinkedIn, and Email buttons. Go to Administration > Structure > Content types > Article, select the button set under the RRSSB tab, and save. Then configure the display at Administration > Structure > Content types > Article > Manage display to position the RRSSB pseudo-field where you want buttons to appear.
Creating a social follow block for the footer
Create a new Follow button set at Administration > Configuration > Content > RRSSB > Add. Select Follow as the button type, enable buttons for your social networks (Facebook, Instagram, YouTube, etc.), and enter your usernames for each. Add prefix text like 'Follow us on'. Then place the RRSSB Block in your footer region at Administration > Structure > Block layout.
Displaying share buttons in Views
Create or edit a View displaying nodes. Add a new field and select 'RRSSB Buttons' from the list. Configure which button set to display. The share buttons will automatically use each node's URL and title for the share links.
Custom styling with vertical button layout
Edit your button set's appearance settings. Set 'Minimum rows' to a high value (e.g., 10) to force buttons into a vertical stack. Adjust 'Size' and 'Minimum size' to control button dimensions. Enable 'Right-align buttons' if needed for your layout.
Adding a custom social network button
Implement hook_rrssb_buttons() in a custom module to define new buttons. Provide the share_url and/or follow_url with appropriate tokens, background colors, and either an SVG string or path to an SVG file. The button will automatically appear in the button set configuration forms.
Testing button appearance in real-time
Place the RRSSB Demo Block on a page. This block displays the appearance settings form and allows you to adjust size, shrink, regrow, and row settings while seeing the changes immediately without saving. Once you find settings you like, apply them to your actual button set configuration.
Tips
- Use multiple button sets for different contexts - a compact set for sidebars and a full set for article footers
- For Follow buttons, remember to enter your username/handle for each enabled social network
- The 'Print' button uses JavaScript to trigger the browser's print dialog - useful for articles
- The 'Join' button links to /user/register - useful for promoting site membership
- Set 'Minimum rows' to a high value to create a vertical button layout
- Use the Demo block during development to experiment with appearance settings before committing them
- The module automatically excludes RRSSB links from External Link module's icon additions
- Button CSS is auto-generated and cached - changes to button configuration will regenerate CSS automatically
- For Pinterest sharing, ensure your content has images and configure the image_tokens setting appropriately
Technical Details
Admin Pages 4
/admin/config/content/rrssb
Lists all configured button sets with their type (Share or Follow). From here you can add new button sets, edit existing ones, or delete them. Each row shows the button set label and its type.
/admin/config/content/rrssb/add
Create a new button set with custom selection of social buttons and appearance settings.
/admin/config/content/rrssb/{rrssb_button_set}
Modify an existing button set configuration. Same fields as the Add form, but with existing values pre-populated.
/admin/config/content/rrssb/{rrssb_button_set}/delete
Confirmation form to delete a button set. Warns that the action cannot be undone.
Permissions 1
Hooks 2
hook_rrssb_buttons
Provide configuration for social share buttons. Allows modules to define new social network buttons with their share/follow URLs, colors, and SVG icons.
hook_rrssb_buttons_alter
Alter the configuration for social share buttons provided by other modules. Useful for modifying URLs, colors, or adding/removing buttons.
Drush Commands 1
drush rrssb:gen-css
Regenerate the rrssb.buttons.css file in the RRSSB+ library. This is useful for standalone library usage outside of Drupal, or when the library CSS needs to be regenerated with all available button styles.
Troubleshooting 5
Ensure you have: 1) Created a button set at /admin/config/content/rrssb, 2) Selected the button set on the node type settings, 3) Enabled the RRSSB pseudo-field in the Manage display settings for that content type, 4) Cleared all caches.
The RRSSB+ library is not installed. If using Composer, run 'composer require drupal/rrssb' which will install the library automatically. Otherwise, manually download from https://github.com/AdamPS/rrssb-plus and extract to libraries/rrssb-plus.
The module generates CSS dynamically. Clear all caches to regenerate the CSS file. If the issue persists, check that the library's icons directory exists at libraries/rrssb-plus/icons with .min.svg files.
The username field only appears when 'Follow' is selected as the button type. Some buttons (like email for share) don't require usernames and won't show the field even for Follow mode.
Configure the 'Tokens to use to find images' field in your button set. The default tries [node:field_image:entity:url] then falls back to the site logo. Customize this to match your content type's image field.
Security Notes 3
- The 'administer rrssb' permission is marked as restricted access because it allows configuration of external URLs
- Usernames entered for Follow buttons are HTML-escaped before rendering to prevent XSS attacks
- Share URLs use rawurlencode() on token values to ensure safe URL construction