CODEWITHSUNDEEP
sharethis
Andrew Saltz
Andrew Saltz

Reputation: 355

Dynamic URL with ShareThis

I have a page with users' photos. Each photo is in a card. I would like to allow users to share each picture separately.

This is my html:

<div class="sharethis-inline-share-buttons" data-url="http://{{recent.photo.url}}" data-title="Check out this picture by {{uploaded_by}}"></div>

But it only shares the base website (http://myexample/photopage/)

I see I could also use <span> or Javascript, but it doesn't look like that allows for sharing different links within a page.

Upvotes: 3

Views: 3370

Answers (2)

Lajos M&#233;sz&#225;ros
Lajos M&#233;sz&#225;ros

Reputation: 3870

You need to change the data-url property dynamically with javascript:

const buttons = document.querySelector('.sharethis-inline-share-buttons')
buttons.setAttribute('data-url', `http://${recent.photo.url}`)
buttons.setAttribute('data-title', `Check out this picture by ${uploaded_by}`)

For the record, I'll add the link to sharethis' page, where the customization options are listed: https://www.sharethis.com/support/customization/customize-share-urls/

Upvotes: 2

rafi
rafi

Reputation: 1543

Although this is too late, but you can change sharethis properties including title, url, description etc like this-

// render the html
<div id="my-inline-buttons"></div>

var config = {
  url: 'YOUR_URL_HERE',
  title: 'YOUR_TITLE_HERE',
  description: 'A_LONG_DESCRIPTIN_OF_YOUR_CHOICE',
  image: 'https://YOUR_IMAGE_URL',
};

// load the buttons
window.__sharethis__.load('inline-share-buttons', config);

You can find more in this link of Custom ShareThis.

Upvotes: 0

Related Questions