Show Top Fundraisers on a Wordpress Page with API

Cody Brifoglio · December 2018

I am looking to show our top ten fundraisers within a landing page on Wordpress using the getFundraisingResults API.

It is giving an error "This address is not a functioning page on our site."

Very new to TeamRaiser and their API so hoping there is an easy solution to have this show in Wordpress?

Brian Mucha · December 2018

Did you whitelist your WordPress IP address in the API config?

Are you using Noah's Luminate Extend from GitHub? It handles a lot of the annoying plumbing (like retrieving auth tokens and all that) for you.

Also, the getFundraisingResults method returns overall stats about your event, not a top fundraisers list. I think you will want to use getTopParticipantsData instead.

http://open.convio.com/api/#teamraiser_api.getTopParticipantsData_method.html

BPM

Brian Mucha · December 2018

Actually, you probably don't need Luminate-Extend for this one. This is a super easy to access method.

I bet the issue is the API set-up in SiteOptions thing. You have an API Key and whitelisted your WordPress server?

BPM

PS - Are you using jQuery on your WP server?

Cody Brifoglio · December 2018

Hi Brian,

I have whitelisted the url for the website that we are trying to use as well as created the API Key.

Our Wordpress page is built out using Visual Composer, which is allowing for HTML and Javascript to be put in

Brian Mucha · December 2018

Okay cool.

Vanilla JS. I had to Google syntax for that! Here's a super simple script that works. Make sure your server number, customer code and api key are updated.

<html>

   <head></head>

   <body>

       <script>

           // Set up our HTTP request

           var xhr = new XMLHttpRequest();

           // Setup our listener to process completed requests

           xhr.onload = function () {

               // Process our return data

               if (xhr.status >= 200 && xhr.status < 300) {

                   // What do when the request is successful

                   console.log('success!', xhr);

               } else {

                   // What do when the request fails

                   console.log('The request failed!');

               }

               // Code that should run regardless of the request status

               console.log('This always runs...');

           };

           // Create and send a request

           var URL = "https://secure3.convio.net/YOUR-CODE/site/CRTeamraiserAPI?";

               URL += "method=getTopParticipantsData";

               URL += "&api_key=YOUR_API_KEY";

               URL += "&v=1.0";

               URL += "&response_format=json";

               URL += "&fr_id=1800";

           xhr.open('POST', URL);

           xhr.send();

       </script>

   </body>

</html>

Brian Mucha · December 2018

You'll want to flesh this out of course.

You will need some handler where it now says console.log('success!', xhr); to actually loop through the returned JSON and display the results.

Cody Brifoglio · December 2018

This is amazing and so helpful!

Thanks so much, I should, hopefully, be able to get it working now!

Brian Mucha · December 2018

A little more for you. Still needs some details.

http://foundation.luriechildrens.org/_api/getTopParticipantsDataResponse.htm

<html>

   <head></head>

   <body>



       <div id="top-fundraisers" />

       <script>

           // Set up our HTTP request

           var xhr = new XMLHttpRequest();

           // Setup our listener to process completed requests

           xhr.onload = function () {

               // Process our return data

               if (xhr.status >= 200 && xhr.status < 300) {

                   // What do when the request is successful

                   console.log('success!', xhr);

                   var container = document.getElementById("top-fundraisers");



                   var response = JSON.parse(xhr.responseText);

                   for (var count in response.getTopParticipantsDataResponse.teamraiserData) {

                       var participant = response.getTopParticipantsDataResponse.teamraiserData[count];

                       container.innerHTML += participant.name;

                       container.innerHTML += " - ";

                       container.innerHTML += participant.total;

                       container.innerHTML += "<br/>";

                   }



               } else {

                   // What do when the request fails

                   console.log('The request failed!');

               }

               // Code that should run regardless of the request status

               console.log('This always runs...');

           };

           // Create and send a request

       var URL = "https://secure3.convio.net/YOUR-CODE/site/CRTeamraiserAPI?";

               URL += "method=getTopParticipantsData";

               URL += "&api_key=YOUR_API_KEY";

               URL += "&v=1.0";

               URL += "&response_format=json";

               URL += "&fr_id=1800";

           xhr.open('POST', URL);

           xhr.send();

       </script>

   </body>

</html>

Cody Brifoglio · December 2018

Thank you!

I think I have all the correct information plugged in so just need to figure out how to make it auto show in the Visual Composer.

Thanks again!

Cody Brifoglio · December 2018

I've implemented all of the code with the updates and it is displaying no data. Wondering if it could be one of two possible issues.

1. Does it need to be a certain type of TeamRaiser set up in order to allow API access. I had originally reached out to our Luminate developer and he just responded that he would need to rebuild a new TeamRaiser in order to allow this.

2. If the event was from last year, would the API no longer be able to pull historical data?

Thanks,

Brian Mucha · December 2018

No, I don't think the teamraiser itself matters. It does have to be published though, at least accepting gifts. I just tried it on a closed teamraiser, and it returns nothing. Once I republished it, I got results.

Not sure if I mentioned that the fr_id parameter should be the ID of the teamraiser you are calling.

           var URL = "https://secure3.convio.net/ABC/site/CRTeamraiserAPI?";

               URL += "method=getTopParticipantsData";

               URL += "&api_key=YOUR_KEY";

               URL += "&v=1.0";

               URL += "&response_format=json";

               URL += "&fr_id=1410";

BPM

Cody Brifoglio · December 2018

Ok that makes sense then thank you. Yes I was able to update that bottom section with our secure2.convio.net/nygh... our API Key as well as the event ID. I will see if I can get it tuned back on or duplicated so I can re-test.

Thank you!

Cody Brifoglio · February 2019

Hey Brian,

One more question. I was able to get everything now loading correctly. Is there any way to make those top fundraisers that it pulls in to be displayed as live links, that would then link back to their team raiser pages?

Thanks again,

michael greiner 2 · December 2021

@Cody Brifoglio Did you by any chance ever receive an answer regarding linking to the corresponding individual participant pages? I am curious as well!

Show Top Fundraisers on a Wordpress Page with API

Comments

Categories