how to use change.org api on my website

[eie.ini...@gmail.com]

we have several petitions on change.org and would like to have respondents sign them on our website - eienigeria.org

Kindly help

[Rick Buczynski]

Hi,

There are a number of ways to do this. It's up to your skill-set and platform. Here is the example code (PHP) as given by the people at Change.org:

https://github.com/change/api_docs/blob/master/v1/examples/sign_petition.php

And the rest of the documentation for their API is here:

https://github.com/change/api_docs

If you're looking for another solution, I have written a JavaScript library to help:

https://github.com/vbuck/change-js-api

--

If you need more examples, just ask; but tell us what you would need it to be written in so that the right people can step in with advice.

[Rick Buczynski]

https://github.com/vbuck/change-js-apiPaschal,

It looks like you replied directly to me, so your questions did not get submitted to this thread. You asked:

The trick is how do I add signatures on my website.
 
Do I need to create a form and post the parameter to the script or how do I achieve this?

And ...

Am having trouble getting it work.
 
Can you show me some websites that have successfully implemented the API?
 
If I can get a script to embed on my website that would be great and easy for me.

To my knowledge, there is not a single script you can embed on your website to do this. 

Using HTML Only

I suppose you could add an IFRAME to your page:

<iframe width="800" height="600" src="http://www.change.org/petitions/your-petition-url/"></iframe>

But this is probably the LEAST desirable option, because you have no control over its appearance or transmission of data.

Using PHP

Of course your website will need to be on a server that runs PHP. I don't know what powers your site (WordPress?). This is what you will find examples for on Change.org's site, and in most questions on this group. There isn't a convenient way to do this out-of-the-box; most people seem to be following the Change.org guidelines of creating a cURL request to get the job done. Again, that is demonstrated here:

https://github.com/change/api_docs/blob/master/v1/examples/sign_petition.php

To get you in right direction, you could use the example above with some minor tweaks. Specifically, changing the $parameters array to read from your submitted form:

  $parameters = array();
  $parameters['api_key'] = $api_key;
  $parameters['timestamp'] = gmdate("Y-m-d\TH:i:s\Z"); // ISO-8601-formtted timestamp at UTC
  $parameters['endpoint'] = $endpoint;
  $parameters['source'] = $_POST['source'];
  $parameters['email'] = $_POST['email'];
  $parameters['first_name'] = $_POST['first_name'];
  $parameters['last_name'] = $_POST['last_name'];
  $parameters['address'] = $_POST['address'];
  $parameters['city'] = $_POST['city'];
  $parameters['state_province'] = $_POST['state_province'];
  $parameters['postal_code'] = $_POST['postal_code'];
  $parameters['country_code'] = $_POST['country_code'];

Where those $_POST items come directly from your form:

<form action="http://url.to/your/sign_petition.php" method="post">
  <span>First Name:</span>
  <input type="text" name="first_name" />
  ...
</form>

This is basic form processing with PHP.

Lastly, you might change the last line of sign_petition.php to do something other than output the JSON response. Maybe this:

echo "Thanks for signing the petition. You may now close this window.";

Which would be the most primitive example. Alternatively, you could parse the JSON response to determine what to do:

$response = json_decode($result,true);
if($response['result'] != 'false')
{
  header('Location: http://url.to/your/success/page');
}
else
{
  echo "Failed to sign the petition.";
}

Using JavaScript

If you use my JavaScript library, you'll likely also need to run the PHP proxy script along with it. Here is an example to get you started. On the page that includes your form, include this JavaScript wherever you are able:

<script type="text/javascript" src="http://url.to/changeorgapi.min.js"></script>
<script type="text/javascript">
  ChangeOrgApiUtils.proxy = 'http://url.to/the/proxy/script.php';
</script>

You'll have to edit that proxy script to set your secret key:

# path/to/the/proxy/script.php
ChangeOrgApiProxy::setSecretKey('YOUR_SECRET_KEY');

Then you can tie your form in with the JavaScript. This example will use jQuery to get the job done.

<form id="sign_form" onsubmit="sign_petition(); return false;">
  <span>First Name:</span>
  <input type="text" id="first_name" />
  <span>Last Name:</span>
  <input type="text" id="last_name" />
  ...
</form>
<script type="text/javascript">
  function sign_petition()
  {
    var client   = new ChangeOrgApiClient({
      api_key : 'YOUR_API_KEY'
    });

    var petition = new ChangeOrgApiPetition(client);
    var auth     = petition.getAuthorization();

    auth.setPetitionId(YOUR_PETITION_ID)
      .setRequesterEmail($('#email').val())
      .setSource(window.location.href)
      .setSourceDescription('Your Page Description')
      .setCallback(function(response) {

        if(response.getData('status') == 'granted') {
            petition.addSignature({
                petition_id    : YOUR_PETITION_ID,
                auth_key       : response.getData('auth_key'),
                source         : window.location.href,
                email          : $('#email').val(),
                first_name     : $('#first_name').val(),
                last_name      : $('#last_name').val(),
                address        : $('#address').val(),
                city           : $('#city').val(),
                state_province : $('#state_province').val(),
                postal_code    : $('#postal_code').val(),
                country_code   : $('#country_code').val(),
                phone          : $('#phone').val()
            }, function(response) {

              if(response.getData('result') != 'false') {
                window.location.href = 'http://url.to/your/success/page';
              }
              else {
                alert('Failed to sign the petition. Please try again.');
              }

            });
        }
        else {
          alert('Failed to sign the petition. Please try again.');
        }

      });

      auth.authorize();
    }
</script>

The above script will obtain the authorization key to sign, then pass the form data to your PHP proxy script, where the entire request will be signed. When the response comes back, it will be checked, and the visitor will be redirected to your success page or else notified of an error. Note that this is a very basic example. Your actual implementation may vary.

--------------------------

So there you have 3 options. If you don't know how to implement them, then you might be better off hiring somebody who knows what I'm talking about here. Hopefully this will give you a better sense of direction.