Share Buttons

Reward your visitors for sharing pages

TonicPow Share Button

Share Buttons

Add share buttons to your website, enabling visitors to earn Bitcoin for sharing your pages.

Pre-Requisites

  • Create a campaign that will be used to pay visitors who promote your site.
  • If you plan to create share buttons for more than one page, you will want to make sure your campaign target URL is your domain root (https://yourdomain.com) without any specific page or query parameters. This will make it a domain-wide campaign, allowing promoters to create links for any page on your website. For more information on that, see the campaign creation guide.

Step 1: Install JS

Add tonicpow.js to your site.
<script src="https://tonicpow.com/scripts/tonicpow.js"></script>
See the website integration guide for more info.

Step 2: Add Widget HTML

Add a div with a class name of 'tonicpow-widget' wherever you would like your share button to be placed. Set the following attributes:

Example

<div
  className="tonicpow-widget"
  data-widget-type="share-button"
  data-target-url="https://tonicpow.com"
  data-button-id="myButton"
></div>

Options

  • data-button-id - Any unique string used to identify this widget.
  • data-widget-type - 'banner' or 'share-button'. If ommitted, 'banner' will be assumed.
  • data-target-url - URL the share button should create a shortlink for. If omitted this will be the current page.
  • data-get-link-text - Text to show when button is ready to get a share link.
  • data-done-text - Text to show when button is done getting share link.
  • data-loading-text - Text to show when button is fetching the share link.
  • data-auth-text - Text to show when the user is not logged into TonicPow.
  • data-error-text - Text to show when there is an error fetching the share link.
  • data-width - Force the iframe size to this width.
  • data-height - Force the iframe size to this height
  • data-background-color - Force the iframe background color

Step 3: Initialize the button

Now that the HTML has been added, you can initialize the button with some options, like callback handlers by calling the `shareButton` constructor, and passing the corresponding `data-widget-id` along with the configuration options.

Example

TonicPow.shareButton('myButton', options)
<div class="tonicpow-widget"
  data-widget-type="share-button"
  data-target-url="https://tonicpow.com"
  data-button-id="myButton"
></div>

Step 4. Set options (optional)

You can set a number of configuiration options to set text & colors, allow you to get the raw link data, handle error cases and more.

Options

  • buttonId: string
  • width: string
  • height: string
  • backgroundColor: string
  • getLinkText: string
  • authText: string
  • doneText: string
  • errorText: string
  • loadingText: string
  • onSuccess: Function
  • onError: Function

Full Example

<script src="https://tonicpow.com/scripts/tonicpow.js"></script>

<script>
  const onSuccess = (data) => {
    // You can access the raw link data here:
    // data.shortLink === {
    //   short_link_url: "https://tpow.app/whateva"
    //   title: "Some Campaign Title"
    //   image_url: "https://res.cloudinary.com/tonicpow/image/upload/some_campaign_image.png"
    //   target_url: "https://somewebsite.com"
    //   slug: "some-campaign" // campaign page: https://tonicpow.com/campaign/some-campaign
    // }
  }

  const options = {
    onSuccess: onSuccess
  }

  TonicPow.shareButton('myButton', options)
</script>

<div class="tonicpow-widget"
  data-widget-type="share-button"
  data-button-id="myButton"
  data-target-url="https://tonicpow.com"
></div>

Source Code

More information can be found in the code repository for the frontend javascript. See the Github repo and examples for more.