Wenn Sie jemals mit einem CMS wie WordPress gearbeitet haben, sind Sie wahrscheinlich mit der Funktionsweise von Plugins vertraut. Wenn Sie zusätzliche Funktionen wie Social-Sharing-Buttons, Google Analytics, Newsletter-Abonnements usw. benötigen, installieren Sie einfach ein Plugin und die gewünschte Funktionalität wird hinzugefügt.
Filament funktioniert auf die gleiche Art und Weise und bietet Ihnen „Apps“, mit denen Sie Buttons für die soziale Nutzung, Google Analytics, Newsletter-Abonnements und andere zusätzliche Funktionen zu Ihrer Website hinzufügen können. Es gibt jedoch einen großen Unterschied zwischen Filament und jedem vergleichbaren Prozess:
Filament-Apps funktionieren überall, von statischen HTML-Websites zu CMS-basierten Websites
Wenn Sie eine Filament-App sehen, die Sie mögen, können Sie sie unabhängig davon verwenden, ob Sie über eine statische Site, eine WordPress-Site, eine Ghost-Site, eine Drupal-Site oder einen beliebigen Site-Typ verfügen. Sie fügen ein kleines JavaScript-Snippet in den Kopfbereich Ihrer Website ein. Anschließend können Sie Apps per Drag-and-Drop über das Filament-Dashboard in Ihre Website ziehen und in wenigen Sekunden hinzufügen.
Der erste Schritt besteht darin, zu http://filament.io zu gehen und ganz nach unten zu scrollen, wo Sie a sehen Melde dich kostenlos an Taste.
Sie werden durch die Registrierung geführt, wo Sie sich bei Google+ oder Facebook anmelden oder ein neues Konto erstellen können. Sobald Sie angemeldet sind, werden Sie aufgefordert, die Domain Ihrer Website einzufügen:
Hinweis: Beachten Sie hierbei, dass Sie am Ende keine Adresse mit einem Unterordner verwenden können. Sie müssen eine Subdomain oder Top-Level-Domain verwenden.
Nach dem Klicken auf Nächster Sie erhalten ein JavaScript-Snippet zum Kopieren und Einfügen in den Kopfbereich Ihrer Website oder vor dem schließenden body-Tag:
Hinweis: Wenn Sie WordPress verwenden, können Sie diesen Schritt durch das offizielle Filament-Plugin vereinfachen.
Nachdem Sie das Snippet zu Ihrer Site hinzugefügt haben, können Sie zurückkehren und auf die Schaltfläche klicken Testen Sie Ihre Verbindung Taste. Wenn Sie Ihre Site erfolgreich mit Filament.io verbunden haben, erhalten Sie ein grünes Licht und können die Erledigt Taste, um fortzufahren.
Wenn Sie die Verbindung testen, pingt Filament Ihre Homepage, wenn das Snippet auf Seiten platziert wurde andere als auf der Homepage kann man noch ein rotes Licht erhalten. Solange das Snippet auf den Seiten vorhanden ist, auf denen es benötigt wird, sind Sie gut aufgestellt.
Lesen Sie mehr darüber, warum das so istIm Filament.io-Dashboard sehen Sie die vollständige Sammlung von Apps, die Sie aktuell verwenden können. Momentan stehen sechs Apps zur Auswahl, weitere acht sind unterwegs.
Um eine App zu Ihrer Site hinzuzufügen, klicken Sie auf die Startschaltfläche und dann auf die Domäne der Site, zu der Sie die App hinzufügen möchten.
Auf diese Weise gelangen Sie zur Drag & Drop-Oberfläche von Filament, die Ihnen eine Live-Vorschau Ihrer Website bietet. So können Sie sicherstellen, dass alles so aussieht, wie Sie möchten, bevor Sie fortfahren.
Drücke den + NEU Schaltfläche, um eine neue Instanz der hinzuzufügenden App zu erstellen:
Sie haben die Möglichkeit, Ihrer App-Instanz einen Namen zu geben und Ihre Präferenzen für verschiedene Einstellungen festzulegen, die alles von der Funktionalität der App bis zu Farbe, Stil und Ort steuern:
Wenn Sie fertig sind, klicken Sie auf EINSTELLUNGEN SPEICHERN In der Seitenleiste wird Ihre neue App-Instanz angezeigt.
Ziehen Sie nun Ihre neue App-Instanz per Drag & Drop aus der Seitenleiste in die Vorschau Ihrer Website. Diese wird automatisch eingefügt.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche VERÖFFENTLICHEN Taste in der oberen rechten Ecke.
Sie sollten die App jetzt auf Ihrer Live-Site sehen. Ein Hinweis auf der Benutzeroberfläche zeigt an, dass es einige Minuten dauern kann, bis Änderungen angezeigt werden, aber für mich sind die Änderungen sofort sichtbar.
Sie können beliebig viele Apps hinzufügen. Schauen Sie sich diese einfache Demo an, um zu sehen, wie die Flare- und Ivy-Apps ausgeführt werden.
Wie bereits erwähnt, sind derzeit sechs Apps über Filament verfügbar.
Die Flare-App fügt eine schwebende Social-Share-Leiste an Ihrer Seite hinzu. Sie können es so konfigurieren, dass es Links zu neun verschiedenen Diensten sowie E-Mail enthält. Es wird auch die Anzahl der durchgeführten Services für jeden Dienst verfolgt, wobei die Gesamtzahl der "Flares" oben angezeigt wird.
Ivy ist eine hübsche kleine App, mit der Besucher jeden Teil des Textes hervorheben und über Facebook, Twitter oder E-Mail an ihre Freunde senden können.
Mit der Passport-App können Sie sich einen kleinen Avatar von sich anzeigen lassen, umgeben von Flyouts, die Links zu den verschiedenen sozialen Netzwerkseiten enthalten und Kontaktmethoden, die Sie möglicherweise haben.
Mit CodeDrop können Sie HTML oder JavaScript in Ihre Website einfügen, ohne den Code der Website zu bearbeiten. Sie erhalten ein Feld, in dem Sie Code für Webformulare, Umfragen, zusätzlichen Inhalt usw. einfügen können. Sie können dann auswählen, an welcher Position der Code eingefügt werden soll, entweder oben oder unten im Kopfbereich, oben oder unten im Hauptteil oder an einer benutzerdefinierten Position.
Für viele, die noch nicht mit ihrer eigenen Website arbeiten, kann die Integration von Newsletter-Abonnementen ein sehr schwieriger Prozess sein. Die Mailchimp-App bietet die Möglichkeit, ein Newsletter-Formular per Drag & Drop zu verschieben, ohne sich mit Code herumschlagen zu müssen.
Die Integration von Google Analytics-Code ist ein weiterer Bereich, der vielen Anwendern, die ihre eigenen Websites beginnen, große Probleme bereitet. Die Google Analytics-App von Filament bedeutet, dass sich die Leute keine Sorgen machen müssen, die richtige Stelle zu finden, um ihren Code hinzuzufügen. Sie können einfach ihre Tracking-ID einfügen, die App ziehen und ablegen, und sie sind weg.
Auf der Filament-Website sind acht weitere Apps aufgeführt, die sich in der Entwicklung befinden.
Wenn eine dieser Apps als etwas, das Sie gerne verwenden würden, herausspringt, können Sie zur Filament-Website gehen und dafür stimmen, damit das Team wissen kann, wo sie ihre Entwicklungszeit bevorzugen.
Wer kann am meisten von Filament profitieren? Es hängt davon ab, welche der Apps Sie sich ansehen, welche Art von Website Sie auf der App verwenden möchten, und wer die Benutzer sind.
Apps wie CodeDrop, Mailchimp und Google Analytics sind fantastisch für Leute, die nicht mit Code direkt arbeiten können. Für Webdesigner ist dies möglicherweise eine fantastische Möglichkeit, den Kunden die Möglichkeit zu geben, sich um die üblichen Aufgaben zu kümmern, die sie sonst stecken könnten.
Ich weiß, dass es in meiner Zeit als freiberuflicher Mitarbeiter mehrere Leute gab, mit denen ich zusammengearbeitet hätte, die diese Funktionalität gerne hätten. Die Integration des Filament-Snippets könnte im Rahmen eines Website-Erstellungsprojekts erfolgen, und ab diesem Zeitpunkt können Kunden die Kontrolle über Dinge übernehmen, für die sie lieber nicht zu Ihnen zurückkommen müssen.
Apps wie Flare, Ivy und Passport sind potenziell für jedermann geeignet, da sie einzigartig sind und ihren eigenen Stil und ihre Methode der sozialen Interaktion bieten.
Alle aktuellen und zukünftigen Apps können auch für Websites geeignet sein, die auf Plattformen laufen, die sich nicht gut für die Anpassung eignen, oder für Dienste, die absichtlich umfangreiche Code-Bearbeitung verhindern. Mit der geringen Anforderung, ein JavaScript-Snippet einschließen zu können, ergeben sich viele Möglichkeiten, die ansonsten nicht verfügbar sind.
Um mehr über Filament zu erfahren, stimmen Sie über die Apps ab, die Sie am schnellsten sehen möchten, und probieren Sie den Dienst selbst aus, indem Sie http://filament.io besuchen