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

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

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
  class="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>

Demo

View Demo

Source Code

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