Recently, Twitch.TV switched to a new layout that utilizes a language called Markdown in lieu of HTML. What this means is that my previous post on this topic is now outdated. I’ll leave it up for archival purposes, but obviously some things have changed with Twitch’s newest update.
Note that this update applies only to Twitch.TV specifically. Justin.TV may well work the same as before, but as I’ve moved over to Twitch.TV, I can’t say for sure (Both sites are owned by the same company, but are now effectively two different services outside of their chat servers).
The good news is that actually getting the button to work is quite easy with the new Twitch layout.
With that, let’s get started.
First, log into your paypal and actually get your Paypal donation link. To do this, log into PayPal, then go to Merchants and Services. Under “Create Buttons”, select the button of your choice. NOTE: Since I wrote the previous version of this guide, Paypal has since added a clause basically saying “If you use a donation button, you’d better be ready to verify that you’re putting your money toward a cause.” In light of that, you probably don’t want to use the “Donation” option anymore. Go through all the options, presumably using the “Customize Text or Appearance” option (If you’re not using a custom image, you’re probably better off just using ChipIn), and save the button at the end.
This will yield something like this (Replace all square brackets with braces):
[form action="https://www.paypal.com/cgi-bin/webscr" method="post"]
[input type="hidden" name="cmd" value="_s-xclick"]
[input type="hidden" name="hosted_button_id" value="ABCDEFGHIJKLM"]
[input type="image" src="http://photobucket.com/miscellaneous/Donate%20Button%20Test.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"]
[img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"]
[/form]
I’ve bolded the first three lines of the above because those are the tags we’re concerned with.
Next, go to your Twitch.TV Administration page by clicking “Admin” near the top of your stream, then “Edit”. Click the giant plus sign to add a panel. In the title, put whatever you want the title of the panel to be–I simply use “Donate!” Select whatever image you want to use as your donation button–Twitch now lets you simply pull these from your computer, which is nice.
Now is when we’ll use those three pieces of information I bolded. Where it says “Image links to”, put the following: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM
As you can see, what we did was join those first three elements. We joined elements 1 and 2 with a question mark, elements 2 and 3 with an &, and within each element, we joined the variable name with its value via an equal sign.
Now just click “Submit” below the panel and that’s it, you now have a donation button!
Note that you may want to have a text link to the donation URL in another panel. You should have the basic idea of Twitch panel creation now, but the specific way to create a link that has text is [displayed text](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ABCDEFGHIJKLM) . Don’t look at me, Markdown is wacky.
Hopefully that helps you with donation button creation!
-EE