Pinterest Stumbleupon Whatsapp
Ads by Google

If you’ve ever tried to manually paste a code snippet like Google Analytics tracking code to your website by digging into PHP template files, you’ll know how daunting it can be. Filament.io makes it as simple as dragging and dropping. At least, that’s the promise.

Getting Started

Head over to filament.io and hit the sign-up button. You’ll need to create a login, but Facebook and Google accounts can be used for quick one-button access. Next you’ll need to enter the domain you’ll be using it on – you can add more later.

signup

If you’re running WordPress, this will be detected when it scans the site, and it’s suggested that you install the provided plugin as it allows you finer control over which type of pages have the filament functionality contained (such as only posts and not static pages).

youre-running-wordpress

On the next step, the Filament signup screen will give you a short JavaScript snippet – paste this into the plugin settings page. It might be the last bit of JavaScript code you’ll ever need! You can use Filament without the plugin, but you won’t have as many options to filter where scripts are displayed.

Ads by Google

wordpress-snippet

Adding Apps

The Filament screen tool a live preview of your site so you can design visually where you want apps to go. Start by adding a nice set of social buttons called Flare. In the site preview, navigate to a post.

first-flare-site-preview

From the sidebar, hit New to open up the Flare options. Flare is a delightful custom set of share buttons that look much nicer than the standard network-provided buttons that you probably see on the side of this article. A branded logo is included which can be removed by purchasing a premium licence for the plugin.

Save the settings, then drag and drop the new Flare module onto your site. An initial set of filtering options will then show up. Go ahead and add it to All My Posts.

initial-filtering

You’ll then have another set of filters to customise; these are enabled by the WordPress plugin. As a developer I’m used to surrounding scripts in various PHP if clauses (Not sure what these are? Read our PHP Beginners Guide), but I can really appreciate the power of these filters for those without the knowhow of WordPress page-type detection.

additional-wordpress-filtering-

On a technical level, the WordPress plugin adds a set of meta tags to your page output which tell Filament what kind of page it is; the Filament Javascript initialiser then detects that, and injects the scripts you want on that particular page according to your established filters. It doesn’t manipulate the scripts in any other way – just injects them on to the page.

filament-meta-tags

You’ll need to click Publish before changes are sent out to your site, and they may take a few minutes to appear, so don’t panic if it’s not immediately visible.

Click on the Dashboard link to add more apps, or you can create additional Flare units (if, for instance, you wanted a specific design or more buttons on the homepage).

current-apps

At the time of writing, there are 6 apps in total available:

  • Flare, a social bookmarking plugin.
  • Ivy, which enables users to easily share quotes that they highlight from your articles.
  • Passport, an interesting way to highlight all of your personal social profile (yes, I realise this is sounding a little social-centric at the moment)
  • MailChimp is a subscription for the excellent mailing list service (which by the way, is free for up to 12,000 emails a month and 2,000 subscribers)
  • Google Analytics should be familiar to anyone with a website; Ryan created this great beginners guide to understanding your analytics data.
  • Finally, CodeDrop lets you manage any other snippets of code that you’ve been given elsewhere.

From the dashboard, click Launch. Notice the drop down to select sites – you can manage multiple websites from a single account.

dashboard-launch-add-site

Is It Any Good?

The visual layout tool is surprisingly effective, avoiding the hassle of trying to figure out exactly right positioning manually. If you’re not confident editing theme files, it’s a life saver. But it can only work within the confines of your existing theme. It automatically snaps to any elements it finds on the page, but it can’t for instance create a new column for a widget if your theme only has one column.

visual-drag-and-drop

It also gets things wrong sometimes, as inevitably your page will also have dynamic elements such as sliders; or your theme CSS may interfere with the widget. You may need to play around – but for the most part, it works nicely.

misalignment

Even as a web developer, I appreciate the ease of use and central script management. My footer files are usually full of code to output scripts only on a particular page – this makes that ridiculous easy, cleaning up theme files.

The selection of apps is rather limited currently, though of course you can always add your own simple code additions through the CodeDrop module – and there are more apps promised. I find myself wishing this functionality was included by default with WordPress – for all the advances in theme customization, we’re still left with the use of arcane PHP template editing to add JavaScript snippets. For now, Filament.io fills a badly needed hole in functionality that many of us never even knew existed. Have you given it a go? Tell us your thoughts.

  1. Jason
    June 17, 2014 at 4:23 pm

    Thanks so much for the thorough overview, James! =) We're definitely working on expanding the selection of apps available on Filament, as well as a couple other major updates that will further help website owners make their websites better (*cough* Insights, *cough* ;)

    Post your suggestions here, they're welcomed! http://goo.gl/FXRWSQ

Leave a Reply

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