If you've ever worked with a CMS such as WordPress, it's likely you're familiar with the way plugins work. Whenever you need extra functionality like social sharing buttons, Google Analytics, newsletter subscriptions and so on, you just install a plugin and the functionality you require is added.
Filament works in very much the same way, giving you “apps” which allow you to add social sharing buttons, Google Analytics, newsletter subscriptions and other extra functionality to your website. But there is one big difference between Filament and any comparable process:
Filament apps work everywhere, from static HTML sites to those powered by any CMS
Register and Connect to Filament.io
The first step is to head over to http://filament.io and scroll down to the very bottom where you'll see a Sign Up Free button.
You'll be taken through to register where you'll have the option to sign in with Google+ or Facebook, or to create a new account. Once you're signed in you'll then be asked to insert the domain of your site:
Note: Be aware here that you can't use an address with a subfolder at the end. You must use a subdomain or top level domain.
Note: If you're using WordPress you can make this step easier through the official Filament plugin.
After you add the snippet to your site you can come back and click the Test your connection button. If you've successfully connected your site to Filament.io you'll get a green light and be able to hit the Done button to proceed.
When you test the connection, Filament pings your homepage, so if the snippet has been placed on pages other than the homepage you may still get a red light. As long as the snippet is present on the pages where it's needed, you'll be good to go.
Adding Filament.io Apps
From the Filament.io Dashboard you'll see the full collection of apps you can currently use. Right now there are six apps to choose from, with another eight on the way.
To add an app to your site click its launch button, then click the domain of the site you wish to add it to.
This will take you to Filament's drag and drop interface, which gives you a live preview of your site so you can make sure everything looks just as you want before going ahead.
Click the + NEW button to create a new instance of the app you're adding:
You'll get the opportunity to give a name to your app instance, and enter your preference for several different settings which control everything from the functionality of the app to its color, style and location:
When you're done, click SAVE SETTINGS and you'll see your new app instance appear in the sidebar.
Now drag and drop your new app instance from the sidebar onto the preview of your site and it will automatically be inserted.
When you're ready, click the PUBLISH button in the top right corner.
You should now see the app in place on your live site. A note on the interface says it may take a few minutes for changes to appear, but for me the changes appeared instantly.
The Current Filament Lineup
As mentioned above, at the moment there are six apps available via Filament.
The Flare app adds a floating social share bar to the side of your site. You can configure it to show links to nine different services, plus email. It will also keep track of the number of shares that have been made through it for each service, with a total number of "flares" displayed at the top.
Ivy is quite a neat little app that lets visitors highlight any portion of text and send it out to their friends via Facebook, Twitter or Email.
The Passport app lets you display a little avatar of yourself, surrounded with flyouts bearing links to the various social networking sites you're on and contact methods you may have.
For many people new to working with their own website, integrating newsletter subscription forms can be a very daunting process. The Mailchimp app provides a way to drag and drop a newsletter form without having to mess around with code.
Integrating Google Analytics code is another area that has been a big headache for many people starting out with their own sites. Filament's Google Analytics app means people don't have to worry about trying to find the right spot to add their code. They can just paste in their tracking ID, drag and drop the app and they're away.
Filament Apps on the Way
There are another eight apps listed on the Filament website as being under development.
- Crazy Egg - See your visitors' behavior with heat maps
- FlipJack - Put more action in your call-to-action
- Highlite - A better way to comment on Web content
- SideCar - Take related content along for the ride
- SlideDeck App - Awesome content sliders, no code required
- Mixpanel - Track user behavior and watch website trends
- Olark - Live chat with visitors from within your site
- Optimizely - A/B test and optimize your site without coding
If any of those apps jump out as being something you'd love to use, you can head to the Filament website and vote for it to help let the team know where they might preference their development time.
Who is Filament For?
Who can most benefit from using Filament? It depends on which of the apps you look at, the type of site you intend to use the app on, and who the users will be.
Apps like CodeDrop, Mailchimp and Google Analytics would be fantastic for people who aren't comfortable with directly editing code. For web designers this is potentially a fantastic way to offer clients the ability to take care of common tasks they might otherwise get stuck on.
I know in my own time freelancing there have been several people I worked with who would have loved to get their hands on functionality like this. Integrating the Filament snippet could be done as part of a site creation project, and from that point on clients would be able to take control of things they'd rather not have to come back to you for.
As for apps like Flare, Ivy and Passport, those are potentially for anyone given they're quite unique and provide their own style and method of social interaction.
Learn More and Try Filament
To learn more about Filament, vote on the apps you'd like to see soonest, and to try out the service for yourself head to http://filament.io
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post