How to create dynamic share buttons

[maddy]

In this guide, we are going to create dynamic share buttons for Facebook and Twitter. This button grabs the current URL, so it can be used on any page. You can also use our dynamic share button template that can be found in “Builder templates” in the insert tab.

Facebook

1. Add a button to your page and style it how you’d like

2. Select the button and navigate to the data tab.

3. Scroll down to the “Element Actions” section and select “+ New action”.

4. Select “click” as the action and paste this code in the “edit action” section:

window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL));

5. Now you can test out your button! If you’ve added this to a product page, this button will share the current product to Facebook.

Twitter

1. Add a button to your page and style it how you’d like
2. Select the button and navigate to the data tab.
3. Scroll down to the “Element Actions” section and select “+ New action”.
4. Select “click” as the action and paste this code in the “edit action” section:

window.open(window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL));

5. Now you can test out your button! If you’ve added this to a product page, this button will share the current product to Twitter.