If you have any content, particularly blog posts, and want to add a social media share button, this article provides a step-by-step guide on how to do it in Webflow.
Disclaimer:
This short tutorial is based on the following post on the Webflow Forum: Dynamic share buttons for different social media . The buttons are based on SVG files from Figma. 1. Define the social media to share Copy one of the following codes into an Embed Element and name the class "social-media-share-icon" (or any other name you prefer, but remember to also change it in the HTML code).
VIDEO
FACEBOOK SHARE
<a class="social-media-share-icon" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a>
LINKEDIN SHARE
<a class="social-media-share-icon" href="<http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=>" target="_blank" title="Share on LinkedIn" onclick="window.open('<http://www.linkedin.com/shareArticle?mini=true&url=>' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>
TWITTER SHARE
<a class="social-media-share-icon" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>
PINTEREST SHARE
<a class="social-media-share-icon" href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"></a>
TUMBLR SHARE
<a class="social-media-share-icon" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"></a>
SHARE VIA E-MAIL
<a class="social-media-share-icon" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"></a>
PINBOARD SHARE
<a class="social-media-share-icon" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" onclick="window.open('https://pinboard.in/popup_login/?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>
REDDIT SHARE
<a class="social-media-share-icon" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;">Reddit</a>
2. Copy the design of the icon/button as SVG In Figma, copy the icon/button as an SVG. Right-click, select "Copy/Paste as", and choose "Copy as SVG". Paste it into the Embed element from step 1, between the <a> tags, just before </a>. Note: If you just want text (no icon), write it instead of copying the SVG code. Publish your page, and that's it!
VIDEO
3. (optional) Change color/size at hover To achieve this, you need to modify the HTML code of the SVG icon. ~Change the width and height to 100%. ~Change the fill to "currentColor". Use animations in Webflow as usual, but remember to change the text color, not the background. VIDEO
