Follow us on webflow for early updates! Join us on Webflow
Share a webflow page on social media

Step 1:

Firstly, add a div element to act as the container of our share buttons.

In the example we have used 'Social-icon-wrap' so we can set out our buttons horizontally.

Step 2:

Okay, lets add our buttons.

We've named these 'social-icon' - we only need to make as we will duplicate this element.

Set some properties to this element in the style panel:

We used:

Min Width: 45
Min Height: 30
Background: #4d54d2
Position: Relative

Position relative is the most important as we can then position the code element as we please.

Step 3:

Okay, now add an embed element on top of this. We have called ours 'html'

Inside this we need to set a fixed position of full to cover the relative element below.

Duplicate this element twice so we have 3 buttons, and add some padding as required.

Inside these Embed Areas add the following code to the buttons you would like 'Facebook, Twitter, Pintrest etc)


<a class="social-icon facebook"  href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook"></a>
<script language="javascript">
   function fbshareCurrentPage()   {"" + escape(window.location.href) + "&t=" + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
       return false;


<a href="" class="social-icon twitter" onclick="return tweet()" ></a>
<script type="text/javascript">
function tweet() {
   var u = location.href;
   var t = document.title;''+encodeURIComponent(u)+'&text='+encodeURIComponent(t),'twitsharer','toolbar=0,status=0,width=626,height=436');
   return false;    

You could also change the 't' variable here to be a fixed message. For example: var t="Check out this awesome concept by @waldobroodryk #MadeInWebflow";


<a href="//" data-pin-do="buttonBookmark"  data-pin-color="white" data-pin-height="95"><img src="" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//"></script>

Remember this will take information from your SEO page settings

Guide based on assets from Waldo.

This product is not yet available. Join us on twitter for updates.