Content overview
How to Add Social Share Options on Your Blog Pages on Webflow for SEO
Adding social share buttons to your blog pages encourages readers to share your content on their social media networks, increasing your content’s reach and visibility.
I recommend not using any third-party plugins. Instead, you can add the following code to your custom code area.
How to do it on Webflow
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}"
target="_blank"
title="Share on LinkedIn"
onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title),'','width=500,height=500'); return false;">
<img src="icon-linkedin.png" alt="Share on LinkedIn" style="width:30px; height:30px;">
</a>
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?url=www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}"
target="_blank"
title="Share on Twitter"
onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL),'','width=600,height=800'); return false;">
<img src="icon-twitter.png" alt="Share on Twitter" style="width:30px; height:30px;">
</a>
<!-- Meta (Facebook) -->
<a href="https://www.facebook.com/sharer/sharer.php?u=www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}"
target="_blank"
title="Share on Facebook"
onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL),'','width=600,height=600'); return false;">
<img src="icon-facebook.png" alt="Share on Facebook" style="width:30px; height:30px;">
</a>
<!-- Email -->
<a href="mailto:?subject=Check%20this%20out!&body=I%20thought%20you%20might%20like%20this%20blog%20post:%20www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}"
target="_blank"
title="Share via Email">
<img src="icon-email.png" alt="Share via Email" style="width:30px; height:30px;">
</a>
<!-- WhatsApp -->
<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20blog%20post:%20www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}"
target="_blank"
title="Share on WhatsApp"
onclick="window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(document.title + ' - ' + document.URL),'','width=600,height=800'); return false;">
<img src="icon-whatsapp.png" alt="Share on WhatsApp" style="width:30px; height:30px;">
</a>
<!-- Pinterest -->
<a href="https://www.pinterest.com/pin/create/button/?url=www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}&media=IMAGE_URL&description=PIN_DESCRIPTION"
target="_blank"
title="Share on Pinterest"
onclick="window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&media=' + encodeURIComponent('IMAGE_URL') + '&description=' + encodeURIComponent('PIN_DESCRIPTION'),'','width=750,height=550'); return false;">
<img src="icon-pinterest.png" alt="Share on Pinterest" style="width:30px; height:30px;">
</a>
<!-- Telegram -->
<a href="https://t.me/share/url?url=www.your-URL.com/blog/{{wf {"path":"slug","type":"PlainText"\} }}&text=Check%20this%20out!"
target="_blank"
title="Share on Telegram"
onclick="window.open('https://t.me/share/url?url=' + encodeURIComponent(document.URL) + '&text=' + encodeURIComponent(document.title),'','width=600,height=800'); return false;">
<img src="icon-telegram.png" alt="Share on Telegram" style="width:30px; height:30px;">
</a>Do's
Don'ts
Tools
