How to dynamically set a URL for sharing in Social Share Buttons
The Elfsight Social Share Buttons widget is a powerful tool for customizing how your content is shared. Whether you want to share the current page, a fixed URL, or a unique link for each article, this guide will show you how to easily set it up.
Sharing Behavior
Default
By default, the widget shares the current page. This works well for inline widgets in the footer or floating widgets, as it will always share the URL of the post or product where the user clicked the share button:
Dynamic Custom URL
To make the widget always share the same URL, no matter where it appears, use the Custom URL for Share setting. For example, you might want to share the main page or a specific product from any page.
To enable this, go to the Buttons tab → Share Preferences:
And enter your desired URL in the Custom URL for Share field:
Dynamic Custom URL
Another scenario could be if your blog or store's main page features multiple preview cards for different products or posts. If you install the widget in the footer or header of these cards, clicking the share button under each widget will share the same link—the link to the main page where the widget appears—rather than the link to each individual post or product:
To dynamically pass different custom URLs for each article, post, or product, you'll need to add a special data-elfsight-app-custom-url attribute to each widget instance. Here are the steps:
- 1
-
Add the following attribute to the
<div>tag of the widget code right before the greater than (>) symbol:data-elfsight-app-custom-url="YOUR_POST_URL"
- 2
-
Replace
YOUR_POST_URLwith the actual URL of the post or product. You can use the same widget across all posts, just remember to change theYOUR_POST_URLvalue for each individual post or product.Here's an example of the final code:
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core async></script> <div class="elfsight-app-25af**22-d295-4**c-81e1-e4225***f791" data-elfsight-app-custom-url="elfsight.com/test"></div>
The 25af**22-d295-4**c-81e1-e4225***f791part of the code is just an example widget ID—yours will be different. To learn about widget ID, check this article: Where to get your widget ID.
Once done, each share button will send the specific link for that post or product, rather than sharing the main page:
