# Social Sharing Buttons URL: /docs/theming/recipes/social-sharing-buttons/ Section: recipes Tags: cookbook, social, sharing -------------------------------------------------------------------------------- Social Sharing Buttons Add share buttons to let readers share your content on social platforms. Note Note Built into Default Theme Bengal's default theme includes social sharing in blog posts: Social share buttons in blog post footers Uses share_url() template functions Includes Twitter, LinkedIn, Facebook, Reddit, Email, and copy-link This recipe shows how to customize placement or add additional platforms. The Pattern <div class="share-buttons"> <span>Share:</span> <a href="{{ share_url('twitter', page) }}" target="_blank" rel="noopener"> Twitter </a> <a href="{{ share_url('linkedin', page) }}" target="_blank" rel="noopener"> LinkedIn </a> <a href="{{ share_url('facebook', page) }}" target="_blank" rel="noopener"> Facebook </a> </div> What's Happening Function Purpose share_url(platform, page) Generates share URL for any platform twitter_share_url(url, text, via) Twitter with optional via attribution linkedin_share_url(url, title) LinkedIn share email_share_url(url, subject, body) Email with pre-filled subject and body reddit_share_url(url, title) Reddit submit URL hackernews_share_url(url, title) Hacker News submit URL mastodon_share_text(url, text) Returns share text (not URL) for Mastodon Supported Platforms: twitter, linkedin, facebook, reddit, hackernews, email, mastodon Variations With Icons Twitter via Attribution Full Share Bar Copy Link Button Mastodon Floating Bar <div class="share-buttons"> <a href="{{ share_url('twitter', page) }}" aria-label="Share on Twitter"> <svg><!-- Twitter icon --></svg> </a> <a href="{{ share_url('linkedin', page) }}" aria-label="Share on LinkedIn"> <svg><!-- LinkedIn icon --></svg> </a> <a href="{{ share_url('reddit', page) }}" aria-label="Share on Reddit"> <svg><!-- Reddit icon --></svg> </a> <a href="{{ share_url('hackernews', page) }}" aria-label="Share on Hacker News"> <svg><!-- HN icon --></svg> </a> </div> <a href="{{ twitter_share_url(page.absolute_href, page.title, via='yourblog') }}"> Tweet this </a> This adds via @yourblog to the tweet. <aside class="share-bar"> <span class="share-label">Share this article</span> <div class="share-links"> <a href="{{ twitter_share_url(page.absolute_href, page.title) }}" class="share-twitter" target="_blank" rel="noopener"> <i class="icon-twitter"></i> <span>Twitter</span> </a> <a href="{{ linkedin_share_url(page.absolute_href, page.title) }}" class="share-linkedin" target="_blank" rel="noopener"> <i class="icon-linkedin"></i> <span>LinkedIn</span> </a> <a href="{{ reddit_share_url(page.absolute_href, page.title) }}" class="share-reddit" target="_blank" rel="noopener"> <i class="icon-reddit"></i> <span>Reddit</span> </a> <a href="{{ hackernews_share_url(page.absolute_href, page.title) }}" class="share-hn" target="_blank" rel="noopener"> <i class="icon-hackernews"></i> <span>HN</span> </a> <a href="{{ email_share_url(page.absolute_href, page.title) }}" class="share-email"> <i class="icon-email"></i> <span>Email</span> </a> </div> </aside> Add a "copy link" button alongside social shares: <div class="share-buttons"> <a href="{{ share_url('twitter', page) }}">Twitter</a> <a href="{{ share_url('linkedin', page) }}">LinkedIn</a> <button class="copy-link" data-url="{{ page.absolute_href }}"> Copy Link </button> </div> <script> document.querySelector('.copy-link').addEventListener('click', function() { navigator.clipboard.writeText(this.dataset.url); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy Link', 2000); }); </script> Mastodon requires users to paste into their instance, so we generate share text: <button class="share-mastodon" data-text="{{ mastodon_share_text(page.title, page.absolute_href) }}"> Share on Mastodon </button> <script> document.querySelector('.share-mastodon').addEventListener('click', function() { navigator.clipboard.writeText(this.dataset.text); alert('Copied! Paste this into your Mastodon instance.'); }); </script> <aside class="share-floating"> <a href="{{ share_url('twitter', page) }}"><i class="icon-twitter"></i></a> <a href="{{ share_url('linkedin', page) }}"><i class="icon-linkedin"></i></a> <a href="{{ share_url('facebook', page) }}"><i class="icon-facebook"></i></a> </aside> Example CSS .share-buttons { display: flex; gap: 0.5rem; align-items: center; margin: 2rem 0; } .share-buttons a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-size: 0.875rem; transition: background-color 0.2s; } .share-twitter { background: #1da1f2; color: white; } .share-linkedin { background: #0077b5; color: white; } .share-reddit { background: #ff4500; color: white; } .share-facebook { background: #1877f2; color: white; } .share-buttons a:hover { filter: brightness(1.1); } /* Floating variant */ .share-floating { position: fixed; left: 1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.5rem; } .share-floating a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-secondary); color: var(--text); } Info Seealso Template Functions Reference — All share functions with parameters URL Functions — absolute_href and other URL helpers -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 544 - Reading Time: 3 minutes