5202

ein Blog über technische Fragen zu Blogger

Blogger: Direkte Download Links bauen

von
Ich wurde gefragt, wie man eine .pdf Datei direkt zum Download anbieten kann - ich bin mir sicher, dass wurde von den üblichen Verdächtigen schon x mal beschrieben ... ich find's nur gerade nicht :=).

Schreibe ich halt selber was. 'Cloud' Dienste gibt es inzwischen wie Sand in der Wüste, d.h ihr könnt euer Zeug hosten wie ihr lustig seid, bekommt aber normalerweise keinen Download-Link, sondern nur ein Link zum Material.

Eure Leser müssen dann zuerst auf die jeweilige Seite gehen, dort gibt es [meist super-gut versteckt] irgendeine Möglichkeit zum runterladen ... wirkt nicht besonders einladend, oder?

Dropbox

Ich kenne nicht alle Cloud-Dienste, aber viele und der einzige Cloud-Dienst, bei dem ihr 'echte' Download-Links bekommt, ist Dropbox.

Falls ihr keinen Dropbox Account habt und das ausprobieren wollt, könnt ihr mir einen kleinen Gefallen tun.

Gebt mir kurz über meine Kontaktseite oder in den Kommentaren Bescheid und ich lade euch auf Dropbox ein.

Es gibt keinen Nachteil für euch - für mich gibt's aber pro angenommene Einladung 250mb zusätzlichen Speicherplatz , den ich für Projekte hier auf 5202 ganz gut gebrauchen kann :=).
.

Hochladen

Ihr meldet euch also bei Dropbox und ladet eure .pdf Datei hoch. Ich denke mal, das bekommt ihr hin :=). Ihr wollt, das andere eure Datei sehen können, also gebt ihr die Datei frei. Ihr bekommt dann ein Link, den ihr weitergeben könnt. Mein Beispiel:
http://dl.dropbox.com/u/12178319/Erlk%C3%B6nig.pdf
Anker
Daraus könnt ihr nun einen Anker Element bauen - die HTML dazu:
<a class="button" href="http://dl.dropbox.com/u/12178319/Erlk%C3%B6nig.pdf">View .pdf »»</a>
Die CSS:
.button,
.button:link,
.button:visited {
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    text-decoration: none;
    padding:7px 10px ;
    color: #fff;
    background: #111;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
                 border-radius: 3px;
}
.button:hover {
background: #444
}
Schaut 'live' so aus:

Download

Den Download-Link zu bekommen ist jetzt völlig problemlos, ihr hängt an den öffentlichen Link nur dieses Attribut dran ?dl=1.
<a class="button" href="http://dl.dropbox.com/u/12178319/Erlk%C3%B6nig.pdf?dl=1">Download .pdf »»</a>
Und das ganze 'live':

Ihr könnt's überprüfen, im zweiten Fall öffnet sich ein Download-Link - work done!

Bitten um Einladung

Wie gesagt, ihr könnt in den Kommentaren eine kurze Nachricht hinterlassen, dann lade ich umgehend zu Dropbox ein - falls irgendwelche anderen Probleme damit auftauchen, fragt einfach nach.

Falls alles klappt, dürft ihr das natürlich auch sagen, ich freue mich über Kommentare :=)