TipTheWebbeta

TipTheWeb Tip Buttons

Note: Integrating your site with TipTheWeb is not required. Learn more

Adding Tip Buttons to your website encourages people to support your work by tipping it.

Here is what a small Tip Button looks like: Tip — Go ahead, click it! You should see a Tip Widget appear in an overlay on the page. It’s designed to let people quickly tip your content, without leaving the page or getting in the way of what they’re doing:

  • Screenshot showing the Tip Widget overlay presenting an amount chooser to the user First the user can see some information about the link, and choose an amount to tip.

  • Screenshot showing the Tip Widget presenting the funding options to the user Then they can decide whether to fund their new tip now from their tipping balance, or fund later.

  • Screenshot showing the successful Tip creation Finally they briefly see a green confirmation ‘check-mark’, after which the Widget closes.

Adding Tip Buttons to Your Site

Adding Tip Buttons to your site involves putting specially formatted links on your pages where you want Tip Buttons, and adding a JavaScript code snippet to the page. Here is the markup for the small Tip Button above, that lets the user tip whatever page it’s on:

<a href="http://tiptheweb.org/tip/" class="ttw-button ttw-button-small">Tip</a>

And here is the markup for a large Tip Button (see examples below) that’s configured to tip some specific linked content, in this case TipTheWeb’s Twitter profile.

<a href="http://tiptheweb.org/tip/?link=http%3A%2F%2Ftwitter.com%2Ftiptheweb"
    class="ttw-button ttw-button-large">Tip Our Tweets</a>

Note: At their core, Tip Buttons are just a link to http://tiptheweb.org/tip/. This allows TipTheWeb to fall back to using the HTTP “referrer” URL as the link to tip if all else fails.

The Tip Button JavaScript code enhances any link on the page which has the special Tip Button class, ttw-button. The required JavaScript looks like this:

<script>
(function (window, document) {
    var ref = document.getElementsByTagName('script')[0],
        script = document.createElement('script'),
        secure = window.location.protocol === 'https:';
    script.async = true;
    script.src = secure ? 'https://secure-platform.tiptheweb.org/tip/button.js'
                        : 'http://platform.tiptheweb.org/tip/button.js';
    ref.parentNode.insertBefore(script, ref);
}(this, this.document));
</script>

More about the Tip Button JavaScript

We recommend placing the previous JavaScript code just before the closing </body> tag, but it will work fine if placed anywhere in the <head></head> or <body></body>. It’s important to only put the Tip Button JavaScript code once within a page.

Adding the Tip Button JavaScript code to your website will result in only one additional HTTP request because we’ve bundled all the necessary styling (CSS and images) into the JavaScript file.

Configuration Properties

Link Being Tipped

By default, the Tip resulting from using the Tip Button will be for the page the button is on. The link the Tip is associated with can be specified by explicitly setting a value for the link query-string parameter.

Setting the link is most useful when the content the button is near has a more specific URL than the current page’s URL. A great example is the home/index page of a blog, where the posts listed on the home page each have a Tip Button; these buttons should have the permalink of the post as the value of the link.

Here’s an example of a button on this page which has the link query-string parameter pointing to TipTheWeb’s Twitter profile.

Tip Our Tweets

<a href="http://tiptheweb.org/tip/?link=http%3A%2F%2Ftwitter.com%2Ftiptheweb"
    class="ttw-button ttw-button-large">Tip Our Tweets</a>

Note: Query-string values should be URL-Encoded.

Title of Tip

We will automatically figure out a great title for the Tip, but we also allow you to specifically set the Tip title by setting the title query-string parameter.

Tip This

<a href="http://tiptheweb.org/tip/?title=TipTheWeb%E2%80%99s%20Docs%20are%20Great!"
    class="ttw-button ttw-button-large">Tip This</a>

Note: Query-string values should be URL-Encoded.

Customizing

Aside from the ttw-button-small button style, we provide CSS classes for: ttw-button-large, ttw-button-custom, and ttw-button-nostyle.

Examples

Small Button Style:

This style was designed to take up minimal space and fit really well with next to Twitter’s Tweet Buttons.

Tip

<a href="http://tiptheweb.org/tip/" class="ttw-button ttw-button-small">Tip</a>

Large Button Style

This style is much more prominent and fits well in a sidebar or at the end of a blog post.

Tip This

<a href="http://tiptheweb.org/tip/" class="ttw-button ttw-button-large">Tip This</a>

Custom Button Style

The custom style starts off like the large style and inherits much of the same CSS style rules. The goal with the custom style was to provide a starting point for a Tip Button and allow common styling like color to be easily overridden. When our standard ttw-button-large button style doesn’t fit well with your site’s design, use the ttw-button-custom CSS class instead, and apply your own style overrides!

The button below has customized background-color, color, and text-shadow styles; and has customized text. The easiest way to customize the the button’s style is add the ttw-button-custom CSS class and provide your customizations in the style attribute of the button.

Tip to Support This

<a href="http://tiptheweb.org/tip/"
    class="ttw-button ttw-button-custom"
    style="background-color:#AF67B9; color:#F9F9F9; text-shadow:0 -1px 0 #000">
    Tip to Support This
</a>
Design Constraints

You should be aware of the following style limitations when using the ttw-button-custom style.

  • max width: 300px;
  • max height: 50px;

Button With No Default Style

If you’d rather totally style Tip Buttons yourself, while keeping the standard button behavior, use the ttw-button-nostyle class and we’ll not apply any style to the button.

The following button is just styled like the other links on this page. You could easily hook into the ttw-button-nostyle class in your site’s CSS to provides your own style:

Tip This

<a href="http://tiptheweb.org/tip/" class="ttw-button ttw-button-nostyle">Tip This</a>

Need More Help?

If you’re still scratching your head after you read through this page, or if you have other questions, check out our Integration FAQs and don’t hesitate to email us.