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)


Facebook:


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

Twitter:

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

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";

Pintrest:

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="white" data-pin-height="95"><img src="https://assets.website-files.com/5609d224e60df710127a9bb2/560a071643a6d37c5f5ea200_pinterest11.svg" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></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.