Twoday-Tipp #3 - GoogleDrive-Einbindung
Wichtiger Hinweis
Am 31.08.2016 hat Google die öffentliche Hosting-Funktion für beliebige in GoogleDrive gespeicherte Ressourcen eingestellt und abgeschaltet. Dies bedeutet, dass eine direkte Verlinkung/Einbettung von GoogleDrive-Dateien (z.B. von Bildern) in eine Webseite nicht mehr möglich ist. Damit ist die in diesem Beitrag aufgezeigte Lösung obsolet.
Sollten Sie allerdings über einen älteren Dropbox-Account verfügen (vor dem 04. Oktober 2012 angelegt), der noch einen öffentlichen Public-Ordner besitzt, können Sie die unten beschriebene Lösung weiter nutzen! Kopieren Sie dafür Ihren GoogleDrive-Images-Ordner zunächst vollständig in einen neuen Dropbox-Images-Ordner und verwenden Sie dann für den Script-Aufruf folgende Variante:
<script type="text/javascript" src="//static.twoday.net/cdn/files/gdimages-min-js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".googledrive").gdimages().init({
gdDomain: "https://dl.dropboxusercontent.com",
gdRootFolder: "/u/xxxxxxxx",
gdSubFolder: "images"});
});
</script>
wobei 'xxxxxxxx' Ihrer eigenen Dropbox-ID entspricht und 'images' das Verzeichnis unterhalb des Public-Ordners ist, in dem Ihre Bilddateien liegen. Bei Fragen bitte einfach ein Mail senden.
Es ist ein einschneidender Moment, in dem ein Twoday-Free-User in sanfter Verzweiflung realisiert, dass er rasant seiner 3 MB Webspace-Grenze entgegenbloggt. Schlaflose Nächte, in denen die Optionen sortiert werden:
- in einen neuen Twoday-Free-Blog umziehen,
- auf einen kostenpflichtigen Twoday-Tarif mit größerem Speicherangebot wechseln,
- einen eigenen Webspace (inkl. Domain) erwerben,
- zu Wordpress wechseln — der Funktionalität und immerhin 3000 Gratis-MB wegen,
- sich endgültig von der bildhaften Welt lossagen und nie wieder Fotos, Skizzen, Zeichnungen posten.
Jedoch - ein Plattformwechsel ist nicht ganz unkompliziert und füttert die eigene ToDo-Liste ganz unnötig mit nicht-wertschöpfenden Copy/Paste-Arbeitsschritten an! Na denn: wenn Twoday so knauserig mit Blogspace ist, dann muss der dringend benötigte Speicherplatz eben an anderer Stelle akquiriert werden.
Wer den nachstehenden Lösungsvorschlag umsetzt, verfügt anschließend über mindestens 15 Gigabyte (in Worten: 15.360 Megabyte) zusätzlichen und kostenlosen Speicherplatz, der für beliebige Datei- und Ressourcentypen genutzt werden kann. Seit 2012 gestattet GoogleDrive nämlich, dort gespeicherte Dateien als direkt ladbaren Content zu verwenden, ganz ohne lästige Zwischenseiten oder vorherige Downloads.
Zusätzlich stellt GoogleDrive ein sehr effizientes Synchronisierungstool zur Verfügung, das nach seiner Installation das lokale GoogleDrive-Verzeichnis der Festplatte zu jeder Zeit mit dem Webspace synchron hält. Eine in den Ordner gezogene/gespeicherte Bilddatei steht so nach wenigen Sekunden auch online zur Verfügung und kann in Ihr Blog eingebunden werden.Zur Abrundung stelle ich ein kleines, selbst geschriebenes jQuery-Script vor, das die direkte Verlinkung von GoogleDrive-Ressourcen für Twoday-User noch einfacher und performanter macht.
Ich verspreche, dass diese Lösung auch von bekennenden Technik-Grobmotorikern eingesetzt werden kann und versuche, alle Erläuterungen entsprechend "basic" und nachvollziehbar zu verfassen. Falls noch Unklarheiten verbleiben, bitte nicht mit Fragen zögern. Immerhin warten am Ende der Anstrengung 15 Gigabyte persönlicher, kostenfreier Online-Speicher und sorgenfreies Bloggen bis ans Ende aller Twoday-Tage.
Das Twoday-Platzproblem
Twoday Webspace - eine knappe Ressource
Die Hauptursache für rapide abnehmenden Twoday-Speicher besteht in größeren Ressourcenverbräuchen durch hochgeladene Bilder oder Dateien. Gemäß erklärtem Twoday-Prinzip wird der für Beitragstexte benötigte Platz nicht auf das 3 MB Budget angerechnet.
Allerdings reichen bereits zwei unkomprimierte Fotos einer moderneren Megapixelkamera um das knappe Kontingent vollständig aufzubrauchen.
Wohin also mit den Speicherfressern?
Es gibt eine Vielzahl von Plattformen (z.B. Dropbox, HiDrive, Wuala, Google Drive, Skydrive, SugarSync, Amazon Cloud Drive) oder auch unzählige Bilder-Hosting-Dienste, auf denen sich Bildressourcen unterbringen lassen. Entscheidungskriterien für die Auswahl sind:
- Speichermenge
- Verfügbarkeit
- Performanz
- Direktzugriff
- Vertrauen auf eine nachhaltige Existenz
Wer einmal erlebt hat, wie sein Bilderportal über Nacht überraschend abgeschaltet wurde und alle dort gespeicherten Bilder verloren waren, der wird besonders in diesem letzten Punkt sehr empfindlich.
Leider erlauben viele Dienste keinen öffentlichen Direktzugriff oder haben diese Funktion für Neukunden deaktiviert. In einem Blog will man jedoch üblicherweise Bilder oder Filme direkt in das eigene Layout einbetten und nicht auf eine separate Anzeigeseite verlinken, über deren Aussehen und Funktion man keine Kontrolle hat.
Dropbox bietet anfänglich nur überschaubare 2 GB Speicherplatz, Wuala hat zeitweise Performance-Probleme, andere Anbieter erlauben teils keine direkte Dateieinbindung. GoogleDrive ist daher mit 15 GB kostenlosem Speicher, guter Zugriffsgeschwindigkeit und der langfristig wahrscheinlich besten Bestandssicherheit die sinnvollste Wahl.
Was ist GoogleDrive?
GoogleDrive — 15 GB kostenloser Webspace
GoogleDrive ist zuallererst ein zentraler Online-Speicherplatz, auf den Sie beliebige Dateien hochladen können. Für GoogleDrive existieren Zugriffslösungen für alle wichtigen Plattformen, so dass Sie Ihre Dateien von Ihrem iOS/Android-Smartphone oder -Tablet, vom Windows-/Mac-Desktop, iPhone, iPod touch, iPad usw. zugreifen können.
GoogleDrive ist auch ein Synchronisierungstool. Wenn Sie an einem Rechner eine Datei aktualisieren, wird diese neue Version sofort auch allen Ihren anderen angeschlossenen Geräten zur Verfügung gestellt (Einführung inkl. Film). Ob Home-Tablet oder Arbeitsplatz-Rechner — Sie haben jederzeit und überall Zugriff auf die jeweils aktuellsten Versionen Ihrer Dokumente.
In GoogleDrive können Sie Dateien und Verzeichnisse sowohl privat (d.h. nur für Ihren eigenen Zugriff), für einen klar umrissenen Personenkreis oder auch vollständig öffentlich definieren. Für die Nutzung als Bildspeicherplatz für Twoday bietet es sich an, ein separates, öffentliches Verzeichnis anzulegen.
GoogleDrive installieren und einrichten
Google-Account anlegen
Für die Nutzung von GoogleDrive und die Freischaltung von 15 GB persönlichem Webspace benötigen Sie einen Google Account. Ein Google Account ist im Wesentlichen eine bestätigte E-Mail-Adresse. Dies kann eine (neue) gmail-Adresse sein oder auch jede andere E-Mail-Adresse, die Sie bereits besitzen und verwenden.
Falls Sie eine existierende E-Mail-Adresse nicht verwenden wollen, können Sie sich auch eine neue gmail-Adresse anlegen. Ob und in welchem Umfang Sie diese später tatsächlich verwenden, ist alleine Ihre Entscheidung.
Schritt 1: Anmeldung
- Melden Sie sich bei GoogleDrive mit Ihrem GoogleAccount an. Falls Sie noch keinen GoogleAccount besitzen, klicken Sie darunter auf Konto erstellen und folgen Sie den dortigen Anweisungen. (Bild)
GoogleDrive einrichten
Sie können GoogleDrive ausschließlich über die GoogleDrive-Webseite benutzen, wenn Sie dies wünschen. Es ist jedoch eleganter und vereinfacht viele wiederkehrende Arbeitsschritte, wenn man das Synchronisierungsprogramm (googledrivesync) installiert. Dieses hält die relevanten Dateien auf dem GoogleDrive-Verzeichnis Ihrer Festplatte (PC/Mac), Ihrem Smartphone oder Ihrem Tablet jederzeit mit den Online-Dateien in der Cloud synchron.
Schritt 2: Synchronisierung installieren
- Klicken Sie innerhalb von GoogleDrive auf die Schaltfläche Google Drive für PC herunterladen. Führen Sie das heruntergeladene Programm per Doppelklick aus und folgen Sie den Installationsanweisungen. (Bild) Wiederholen Sie die Installation an jedem Gerät, von dem aus Sie auf Google Drive Daten zugreifen wollen.
- Für Smartphones und Tablets gibt es je nach Plattform eigene Apps. Besuchen Sie die für Ihr Endgerät relevante Quelle (Android: Google Play, Apple: iTunes/App Store), suchen Sie nach "Google Drive", installieren Sie die App und melden sich mit Ihrem Account an.
Dateien in GoogleDrive sind grundsätzlich "privat" klassifiziert, d.h. nur Sie als Besitzer haben mit Ihrem Account als E-Mail/Passwort-Kombination Zugriff. Für Bilder, die auf Ihrem Blog angezeigt werden sollen, macht das jedoch wenig Sinn. Diese müssen "öffentlich", d.h. für jeden sichtbar sein. Es bietet sich an, für öffentliche Blogbilder ein eigenes, separates Verzeichnis anzulegen und dieses als "öffentlich" zu kennzeichnen.
Schritt 3: Verzeichnisse einrichten
- Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
- Klicken Sie innerhalb von GoogleDrive links auf Erstellen und dann auf Ordner. (Bild)
- Geben Sie dem Ordner einen Namen, an dem erkennbar ist, dass dort öffentliche Dateien liegen, z.B. "Public". (Bild)
- Klicken Sie in der Ordnerübersicht rechts auf den kleinen Pfeil neben dem öffentlichen Ordner (Bild), dann auf Freigeben... (Bild)
- Klicken Sie in den Berechtigungseinstellungen auf Ändern... (Bild), dann auf Öffentlich im Web... (Bild) und schließlich auf Speichern
- Legen Sie in Ihrem nun öffentlichen Ordner Public einen weiteren Unterordner an, in dem Sie später Ihre öffentlichen Bilder speichern. Klicken Sie im Public-Ordner erneut auf Erstellen und dann auf Ordner. (Bild). Unterverzeichnisse, die in einem schon öffentlichen Ordner angelegt werden, sind automatisch auch öffentlich. Nennen Sie das neue Unterverzeichnis z.B. "images" und klicken Sie dann auf Erstellen und freigeben. (Bild).
Bei Bedarf können Sie weitere öffentliche Unterordner anlegen, z.B. für Filme, Dokumente oder Texte. Eine klare Gliederung und Benennung der Unterordner hilft Ihnen, Ihre Dateien schnell wiederzufinden.
Um in GoogleDrive gespeicherte Dateien online zu verwenden, benötigen Sie die exakte Adresse, unter der die Datei in Ihrem GoogleDrive abgelegt ist. Diese Adresse Ihres Public-Ordners ermitteln sie folgendermaßen:
Schritt 4: Verzeichnisadresse herausfinden
- Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
- Klicken Sie innerhalb von GoogleDrive links auf Meine Ablage und dann darunter auf den kleinen Pfeil neben Ihrem öffentlichen Verzeichnis Public und dann auf Details und Aktivität. (Bild)
- Im angezeigten Fenster Details und Aktivitäten klicken Sie oben auf Details. Unter der Überschrift Hosting sehen Sie nun den Link, der exakt zu Ihrem öffentlichen Ordner führt. (Bild)
- Wenn Sie auf den Link klicken, öffnet Ihr Browser ein weiteres Fenster und zeigt Ihnen den Inhalt Ihres öffentlichen Ordners. (Bild)
- Tipp: Kopieren Sie sich die Linkadresse aus der Browser-Adresszeile in eine Textdatei, um sie jederzeit verfügbar zu haben.
Die vollständige Linkadresse einer öffentlichen Datei in Ihrem GoogleDrive können Sie folgendermaßen zusammensetzen:
https://öffentlicherordner/unterverzeichnis/dateiname.
Beispiel 1: Nehmen wir an, Ihr öffentlicher Ordner hat die Adresse https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/, das Unterverzeichnis für Bilder heißt images und der Name der gewünschten Datei meinbild.jpg, dann lautet die vollständige Bildadresse
https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/images/meinbild.jpg.
Beispiel 2: Angenommen, Sie haben in Ihrem öffentlichen Public-Ordner ein Unterverzeichnis movies für Filmschnipsel angelegt, in dem ein Urlaubsclip mit dem Namen ski.mpg gespeichert ist, dann ist seine öffentliche Linkadresse
https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/movies/ski.mpg.
GoogleDrive-Bilder in das Blog einbinden
Bilder nach GoogleDrive hochladen
Wie im letzten Abschnitt beschrieben, kann jede Datei in Ihrem öffentlichen Ordner über die Kombination https://öffentlicherordner/unterverzeichnis/dateiname für eine Verwendung in HTML-Befehlen herangezogen werden.
Bevor dies jedoch möglich ist, muss das Bild zunächst nach GoogleDrive hochgeladen werden. Hierfür gibt es zwei Möglichkeiten:
Schritt 5: Dateien nach GoogleDrive hochladen
- Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
- Klicken Sie innerhalb von GoogleDrive links auf Meine Ablage und wählen Sie den Ordner an, in den Sie eine neue Datei hochladen möchten (z.B. images).
- Klicken Sie oben auf Erstellen und dann auf Dateien. (Bild)
- Wählen Sie im folgenden Auswahlbildschirm die Bilddatei aus, die Sie im Blog verwenden und anzeigen möchten. Beantworten Sie die Sicherheitsabfrage "In freigegebenen Ordner hochladen und freigeben?", indem Sie auf Hochladen und freigeben klicken. (Bild)
- Schließen Sie nach erfolgtem Hochladen das Upload-Fenster. (Bild)
Alternatives Hochladen via GoogleDriveSync
Falls Sie in Schritt 2 das Synchronisierungsprogramm googledrivesync installiert haben, können Sie eine Datei noch einfacher hochladen.
Kopieren/Speichern Sie dazu einfach das hochzuladende Bild in den gewünschten Zielordner (z.B. Google Drive / Public / images) auf Ihrer Festplatte. Das Synchronisierungsprogramm wird sofort im Hintergrund damit beginnen, die Datei in das gleiche Verzeichnis nach GoogleDrive Online zu kopieren. Nach wenigen Sekunden steht das Bild online für eine Blog-Einbindung zur Verfügung.
Bilder manuell im Blog einbinden (ohne Scriptunterstützung)
Haben Sie ein Bild erfolgreich über eine der o.g. Methoden hochgeladen, können Sie es sofort in Ihrem Blog nutzen. Fügen Sie einfach die vollständige Linkadresse bestehend aus öffentlicher Ordner (z.B. https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/), dem Unterverzeichnis (z.B. images) und dem Dateinamen (z.B. meinbild.jpg) in den Image-Befehl ein:
<img src="https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/images/meinbild.jpg" alt="Mein Bild" width="720" height="300" />
Ziemlich einfach — wenn da nicht diese lange Adresse des öffentlichen GoogleDrive-Ordners wäre, die sich garantiert niemand merken kann. Man kann sich diesen kryptischen Link z.B. jedes Mal aus einer vorbereiteten Textdatei kopieren, die sich schnell erreichbar auf dem Desktop befindet. Noch eleganter ist jedoch die Nutzung eines kleinen Scripts, das ich nachfolgend vorstelle.
Verlinkung von Bildern mit Scriptunterstützung
Das Script gdimages wird durch den Browser bei jeder Aufbereitung einer Blogseite ausgeführt und vervollständigt die Bildadresse in jedem Image-Befehl, der sich auf ein GoogleDrive-Bild bezieht. Hierdurch wird ein Image-Befehl sehr viel übersichtlicher, da Sie nur noch den Dateinamen im alt-Parameter angeben müssen. Damit das Script weiß, welche Image-Befehle es vervollständigen muss, geben Sie diesen IMG-Befehlen eine Klasse googledrive mit:
<img class="googledrive" alt="meinbild.jpg" />
Um das Script einmalig in Ihr Blog zu integrieren, führen Sie folgende Schritte durch:
Schritt 6: jQuery aktivieren (einmalig)
Schritt 7: Hilfsscript aktivieren (einmalig)
- Klicken Sie im Twoday-Menü auf Admin → Layout → Skins (HTML) und dann auf Hauptseite (Site.page).
- Klicken Sie in das letzte Textfeld und scrollen Sie ganz an das Ende bis zum Befehl </body>.
- Fügen Sie vor dem </body>-Befehl folgende Zeilen ein (diese können Sie aus der Box unten herauskopieren):
<script type="text/javascript" src="//static.twoday.net/cdn/files/gdimages-min-js.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".googledrive").gdimages().init({gdRootFolder: "/host/0B87rILWxyzIJTkpNZXF4VlNxyz", gdSubFolder: "images"}); }); </script> - Ändern Sie den Wert des Parameters gdRootFolder auf Ihren öffentlichen Ordner ab — inkl. der vorlaufenden /host/-Kennung. Ändern Sie den Wert des Parameters gdSubFolder auf den Namen des Unterverzeichnisses, in welches Sie in GoogleDrive Ihre Blogbilder hochladen, also z.B. images oder bilder. Achten Sie beim Ändern der Werte auf die Groß-/Kleinschreibung von Buchstaben Ihres öffentlichen Ordners und Verzeichnisnamens!
- Überprüfen Sie nochmals die Parameterwerte und sichern Sie dann Ihre Änderungen durch einen Klick auf Speichern und Schließen.
- Geschafft! Ab jetzt können Sie Ihre auf GoogleDrive hochgeladenen Bilder auf sehr einfache Weise in Ihr Blog einbinden.
Einbindung von GoogleDrive-Bildern mit aktiviertem Hilfsscript
Da Sie Ihren öffentlichen Ordner und das Bildunterverzeichnis einmalig dem Script bekannt gemacht haben, brauchen Sie diese Informationen nun nicht mehr beim einzelnen Bild aufzuführen.
Beispiel 1: Um ein Bild wald.jpg aus dem Ordner images in einem Beitrag anzuzeigen, schreiben Sie folgenden IMG-Befehl:
<img class="googledrive" alt="wald.jpg" />
Beispiel 2: Wenn Sie in Ihrem Bilderverzeichnis images zur besseren Organisation weitere Unterverzeichnisse angelegt haben (z.B. urlaub für Urlaubsbilder), so können Sie Bilder aus diesen Teilverzeichnissen folgendermaßen anzeigen:
<img class="googledrive" alt="urlaub/strand.jpg" />
Wichtig ist, dass Sie den Bildnamen für GoogleDrive-Bilder stets im alt-Parameter übergeben, nicht wie üblich im src-Parameter!
Würde der Bildname im src-Parameter übergeben, würde der Browser bereits versuchen, dieses zu laden, obwohl die korrekte Adresse noch nicht vervollständigt wurde. Damit würde unnötig Ladezeit verbraucht.Selbstverständlich stehen Ihnen weiterhin alle anderen bekannten Bildparameter zur Verfügung, z.B. width (Breite), height (Höhe) oder title (Titel).
Beispiel 3: In Ihrem images-Verzeichnis existiert ein weiteres Unterverzeichnis buchcover, das unter anderem ein Bild argo.jpg enthält. Dieses soll in der Größe 40 x 62 (BxH) Pixel angezeigt werden.
<img class="googledrive" alt="buchcover/argo.jpg" width="40" height="62" />
Die beschriebene Lösung ist eine verifizierte, einfach nachvollziehbare Möglichkeit, das zu vermeiden oder sogar von einem bezahlten Modus wieder in einen Free-Modus zurückzukehren, wenn man seine alten Blogbeiträge entsprechend anpasst.
P.S. Schon gemerkt, dass statcounter.com down ist (Edit: Zumindest noch eben wg. DDOS-Attacke)? Jetzt stellen Sie sich für einen Moment vor, das passiert über Nacht mit bilder-hochladen.net. ;)
Daneben speichern Bilddienste eben nur Bilder. Falls man aber mal ein PDF, ein MP3 oder ein MPG im Blog einbetten will, muss dann wieder nach einem anderen Anbieter gesucht werden. Ich bevorzuge da lieber zentrale, einheitliche Lösungen aus einer Hand.
Oh, die Bilder sind auch bei bilder-hochladen öffentlich?Es geht nicht um Paranoia, sondern ums Prinzip.
Denken Sie auch mal an Ihre Privilegien wie Kühltruhe mit Sichtfenster und Kuschelkissen.