Content overview
How to Add Social Share Options on Your Blog Pages on Webflow for SEO
Social share buttons have a complicated reputation in SEO circles. Social shares are not a confirmed ranking factor. But there are adjacent reasons to have them that matter: they make it easier for readers to distribute your content, which drives traffic, which drives links, which does affect rankings.
The logic is simple. A reader who found your Webflow tutorial genuinely useful wants to share it in a Slack channel or on LinkedIn. If there's a share button, they click it. If there isn't, they might copy the URL, they might not. Friction kills distribution. Social share buttons reduce friction.
Where they belong: on blog posts and long-form articles, not on every page. A social share button on your Contact page or your homepage adds no value and clutters the design. On a post that someone has just spent 5 minutes reading, a share prompt at the bottom is well-placed and contextually appropriate.
In Webflow, the simplest way to add social share options to blog posts is through custom code in your CMS collection template. A share link for Twitter/X is just a URL with your page URL encoded as a parameter: https://twitter.com/intent/tweet?url=PAGE_URL&text=TITLE. LinkedIn share links follow the same pattern. You can bind the page URL and title dynamically using Webflow's CMS embed fields, which means the share links update automatically for every blog post without any extra work.
For a cleaner implementation, AddToAny and ShareThis both offer lightweight embed codes that generate share buttons for multiple platforms with minimal JavaScript. If you're trying to keep your page performance lean, the manual URL approach above is faster than a third-party widget.
Track whether share buttons actually get used. If your analytics show zero clicks on share buttons over three months, they're visual noise. If they do get clicks, they're working. Adjust accordingly.
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
