Set a Dynamic Sharing URL with Elfsight Share Buttons.

By default, Elfsight widget Social Share Buttons share the current page where the widget is placed. To share a specific page, use the "Custom URL for share" setting, ensuring that this chosen URL is consistently shared, regardless of widget placement.

So by clicking on a widget under a specific article/product, your visitors can share a direct link to the specific page.

How to do add URL

Currently, there are 2 methods to do this

Method 1

You can access this feature via the Live Configurator of the application, find Custom URL for Share option in Share Preferences section on the Buttons tab:

Elfsight Live Configurator custom url

Add Custom URL in Elfsight Live Configurator

Method 2

You need to add this attribute data-elfsight-app-custom-url to your widget installation code before the closing </div> tag, like this:

data-elfsight-app-custom-url="YOUR_TARGET_URL"

The text YOUR_TARGET_URL is the url of your post or page to be shared, for example the page is: https://beyondspace.studio, then the attribute value would be

data-elfsight-app-custom-url="https://beyondspace.studio"

Let’s take a look at the full widget install code before we add the dynamic URL

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-f35aa1d3-9d1c-4a21-a2c4-fb128d066702" data-elfsight-app-lazy></div>

By append the custom url attribute, your installation code would look like this

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-f35aa1d3-9d1c-4a21-a2c4-fb128d066702" data-elfsight-app-lazy data-elfsight-app-custom-url="https://beyondspace.studio"></div>

Repeat these steps for each of the posts/products that you want to add Social Share Buttons widget to.

What are pros and cons

Method 1 allows you to edit the URL right from Configurator, so it will be much easier to edit yourself without worrying about messing up the installation widget.

Alternatively, Method 2, utilizing the data-attribute, offers enhanced widget flexibility. You can apply the same widget to all posts, with the flexibility to adjust the custom URL for each post. This replaces the need to create separate widgets for each post, streamlining the process, and save your some bucks if your current Plan meets the limited widget per app.

In short, here's the order of priority for the sharing URL configuration of Social Share Buttons:

  1. Installation Code URL (Method 2): Highest priority; set via data-attribute in the widget's code.

  2. Editor Share URL: Intermediate priority; configured in the widget editor.

  3. Current Page Where Widget is Placed: Lowest priority; shares the page where the widget is installed.

Bonus

If you are new to Elfsight and would like to take a look at how powerful these widgets are, I have collected the Elfsight widget Templates in a Catalog

Also, this post will explain about the lazy loading of Elfisight Widgets and how to use the data-attribute data-elfsight-app-lazy

Previous
Previous

Connect Crisp live chat to Squarespace website.

Next
Next

How to lazy loading Elfsight Widgets