Pledge is a jQuery plugin dedicated to making media people create:
- Simple to Embed
- Simple for Others To Support
In layman's terms, pledge allows you to turn a single div tag into an embeded widget to display media and generate a Coinbase donation box attached to it in a visual pleasing and easy to use format.
- Features
- Demo
- Requirements
- Compatibility
- Usage
- Customization
- Parameters
- sourceAddress
- coinbaseKey
- coinbaseSecret
- embedlyKey
- backgroundColor
- textColor
- bottomText
- topText
- currencyType
- marginPercentage
- update
- HTML5 Data Tags
- Commands
- Clear
- Destroy
- About
- Uses Coinbase to allow easy and secure donations to a Coinbase account
- Uses Embed.ly to display almost any kind of media (Over 250+ As Of Now) without having to figure out how to embed it
- Works off of jQuery and PHP; no need for fancy server libraries
- Uses Responsive Design to adapt to whatever screen it is on
- Usable on Tablet and Mobile Devices (Note: Media May Be Unavailable If Media Provider Does Not Support Mobile)
- Customizable to suit your needs
Demo can be found here.
Pledge uses the following:
- jQuery
- FlatUI
- Twitter Bootstrap (Included with FlatUI)
- Coinbase API and PHP Library (Requires API Key With "Buttons" Privledge)
- Embed.ly API and jQuery Library (Requires API Key)
- PHP Installed on your Server
Pledge has been tested and has shown to work on the following browsers:
- Internet Explorer 11
- Firefox
- Google Chrome
- Opera
- Safari
- Mobile Safari For iOS (Note: Flash Embeded Media Will Not Show)
To use Pledge, first put the following into the header of your HTML file:
<!-- Loading jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Loading Embed.ly -->
<script src="http://cdn.embed.ly/jquery.embedly-3.1.1.min.js"></script>
<!-- Loading Pledge -->
<script src="lib/pledge.min.js"></script>
<!-- Loading Pledge CSS Sheet -->
<link rel="stylesheet" type="text/css" href="lib/pledge.css" />
<!-- Loading Bootstrap -->
<link href="lib/flatUI/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="lib/flatUI/css/flat-ui.css" rel="stylesheet">In the body, Pledge only requires a div tag with a name jQuery can use:
<div id="pledge"></div>Then, place the following into your $(document).ready:
$(document).ready(function () {
$("#pledge").pledge( { sourceAddress: "urlOfContent",
coinbaseKey: "CoibaseKeyGoesHere",
coinbaseSecret: "CoinbaseSecretGoesHere",
embedlyKey: "EmbedlyKeyGoesHere" } );
});And the user will get something like this:
Pledge can be customized with additional parameters to suit the widget to your needs
$("#pledge").pledge( { sourceAddress: "http://vimeo.com/86739131",
coinbaseKey: "keyHere",
coinbaseSecret: "secretHere",
embedlyKey: "keyHere",
backgroundColor: "#DC143C",
textColor: "black",
bottomText: "We Need Money To Buy New Cameras!",
topText: "HEY!!!",
currencyType: "USD",
marginPercentage: 0} );
sourceAddress contains the address of the URL which needs to be displayed as an embeded object. If no URL is given, the plugin will just create a pledge box with no content.
coinbaseKey contains the API key from the Coinbase Account that is receiving the donations. An API Key can be generated here, and only needs "Buttons" access.
NOTE! Giving API access other than "Buttons" access is dangerous and not recommended and should be avoided at ALL COSTS. Giving other access to more powerful API features could give others access to your Coinbase wallet. BE SMART ABOUT YOUR API ACCESS!
coinbaseSecret contains the API Secret from the Coinbase Account that is receiving the donations. An API Secret can be generated here, and only needs "Buttons" access.
NOTE! Giving API access other than "Buttons" access is dangerous and not recommended and should be avoided at ALL COSTS. Giving other access to more powerful API features could give others access to your Coinbase wallet. BE SMART ABOUT YOUR API ACCESS!
embedlyKey contains the API key from Embed.ly. An API Key can be generated here.
backgroundColor specifies the color of the mat around the embeded content.
textColor specifies the color of the text in the widget.
bottomText specifies the content that is written below the embeded content and above the box where donation amounts are entered.
topText specifies text written above the embeded content.
currenctType specifies what type of currency donations are asked for in the donation box. Any ISO 4217 Currency Code accepted by Coinbase can be used. If BTC is not used, then the donation button will convert the monetary value to the proper BTC amount to let the user know how much to send.
marginPercentage represents the percentage of whitespace used as a margin on each side of the widget.
If set to true, .pledge() call will attempt to update an existing widget rather than create a new one. Instead of using default values for parameters, the widget will attempt to use any newely entered parameters, and then use the previously used ones to reconstruct the widget.
$("#pledge").pledge( { update: true, backgroundColor: "#DC143C" } );All parameters can be set by the use of HTML5 Data Tags instead of setting them in the jQuery call. Note that if the same parameter is passed both ways, Data tags will override the JavaScript parameters.
<div id="pledge" data-embedlyKey="keyHere" data-sourceAddress="urlHere" data-coinbaseKey="keyHere" data-coinbaseSecret="secretHere"></div>$("#pledge").pledge();Pledge has commands that can be run by sending a string rather than an array of parameters as input.
Clear converts the widget back to an empty div tag.
$('#pledge').pledge("clear");Destroy removes the widget and the div tag that it was created from the DOM.
$('#pledge').pledge("destroy");Plugin developed by Zac Lovoy @zwlovoy.
Made for BitHack 2014
Bitcoin Address: 19d72ob2bgyERMctmdtSzDkfijES12uxwh