Our Flubit Plugin for WordPress

Recently we were approached to develop a plugin for WordPress that would allow the wordpress content editor to click a button on the text editor, enter a URL of a Flubit product and embed the product onto the page with a link. This would then be hosted on the flubit blog and allow them to drive traffic towards particular products. The initial request was that this information would be scraped from the flubit site and parsed into the desired format.

We started out by building the plugin’s WordPress functionality, so setting the plugin up and setting up the popup window and button for the text editor. Then we began to scrape the provided website URL using CURL which is our standard method, this is where we hit a few issues.  The content of each flubit page is created dynamically using a javascript framework (such as angular) so when we made a CURL request, the returned page only contained the code that the server had responded with and not all of the additional layout and data provided by the javascript  framework. This was a problem because javascript runs only in the browser and was being used to request the page data, the result was that the page returned by CURL was just showing an error saying that the browser was out of date.

The next thought was to check if the twitter card information was provided in the response as we would be able to use that information for our plugin. Unfortunately this appeared to be generated by the javascript framework too.

After some snooping around the internet we stumbled upon a solution, to use phantomJS as a headless browser, this allowed us to make a request and retrieve a fully rendered page from the server which was exactly what we wanted. We implemented this and got the plugin up and running successfully. When it came to deploying the plugin we hit a few snags in that there is a security concern around installing third party code onto corporate servers and as such the phantom JS option was out of the window. Incidentally, we’re considering setting up a phantom JS service to allow developers to pull back any web page’s fully rendered html and javascript as this will likely become an increasingly more common issue in the future (for enquiries email us at: oliver@htmlstudio.co.uk)

The third solution was to make use of the API that existed (and only came to light at this point) which works with no issues. We enjoyed working on the project and took a lot from it in, the key factor, as always, is not to give up as there’s always more than one way to solve a problem.

The Front-end result

Embedded Product