Wildfire App Custom Page Template Development

For those completely new to Wildfire app

In short Wildfire is a software as a service to help companies manage and quickly bring to market social media campaigns. Wildfire was acquired by Google earlier this year – thus the “by Google” bit in the logo. Current customers of Wildfire include some big names like Amazon, Sony, and Virgin. To find out more about Wildfire, I recommend you visit the Wildfire website: www.wildfireapp.com

Anyways~ recently I was asked to create a custom Wildfire “Page” template for a client. (For more information regarding what a “Page” is – take a look at this page: <www.wildfireapp.com/products/pages>)

With zero experience with Wildfire; I read through the very well documented documentation provided by Wildfire. I highly recommend you do this too, if you have access to the documentation. It’s not very long, so won’t take too much of your time. One area of the documentation that I believe could do with some improvement is the workflow process of creating a Page template.

I did’t see anywhere in the documentation detailing this. So here’s my workflow after discussing with Wildfire support staff:

Assumption – The following steps assume you already got a Facebook App setup

  1. create a folder with the same structure as shown in the documentation. (include all the required files in their respective folders)
  2. zip up the root template folder. (make sure when you double-click/open the zip file, you see the contents of the root template folder and not the root template folder)
  3. upload the zip file to Wildfire. (this zip file is your “template”)
  4. create a new page using your template.
  5. fill in the fields and publish the page following the documentation. (if you intend to use Facebook functionality – which is 99.9% of the time if not 100% of the time. Then you should press the publish for Facebook button first.)

Updating the template, you could do this via two methods.

Online

  • using the web browser. Method not recommended.

Offline

  1. update your local template files.
  2. re-zip the template as in step 2 above
  3. navigate to the “My templates” page.
  4. click the drop down arrow for your template.
  5. select “upload new version”
  6. upload the new zip file
  7. navigate to your published pages
  8. select the page that you created in step 4 above.
  9. under “Content” in the Side Panel should appear a note saying there’s a new version of the template. click the “update now” button to see your new changes come through.

Other notes

Reasons why I recommend the offline method over the online method

  • coding in a local editor in my opinion is always faster and easier than working in a web browser.
  • If you hit the “save” button and you have invalid/malformed markup in your template. You don’t get any warning, your entire template gets wiped and you’re left with a blank template.

If you come across this error

Figure 1. Wildfire App 500 Internal Server Error

It means you’ve got invalid/malformed markup. e.g. declared a plugin but not given it a name

If you see part/all of your JavaScript code rendered on-screen

This is mostly due to the creation of a multi-line string. Wildfire doesn’t like multi-line strings formed with a single set of quotes with a “” at the end of each line. Instead you should use the “+” to combine the multi-line strings.

Images referenced in CSS

Images can only be stored in the assets folder, not in a subfolder or anywhere else.

Responsive vs Individual templates

I recommend individual templates. It gives more control, and shorter/separate CSS files, etc is easier to maintain in my opinion.

Last but not least. If you ever get stuck, drop the guys at Wildfire a note and they’ll sort you out in no time. (but give them a day or so if you’re not in the same timezone as them. No one can be awake 24/7. :))

Leave a Reply

Your email address will not be published. Required fields are marked *

3 Comments

  1. Thank you, very helpfull !
    I have one question- is it possible to use a wildfire variable inside JS. This breaks my JS because of {% %} sintax … For example i need {% text maintext %} to use inside JS ? How to escape this properly ?

    1. Hi Kristian,

      Just saw your comment.

      Looking at your example, the syntax should be {{ text maintext }} and not {% text maintext %}
      The other thing that might also impact the output is the use of “text”. “text” encodes the output. So you might want to try use “rawtext” instead.

      Hope that solves your issue.

      Cheers,

      Oscar

  2. Nice post with great feedback, Oscar! It’s great to hear from users about their flow and pain points. ….and we’re currently at work figuring out that 24/7 bit ;)