AI WORLD HQDein Blog bekommt ein kleines KI-Wetter-Widget mit Hugging Face
Mit den vorgefertigten Widgets von Hugging Face integrieren Sie in weniger als 10 Minuten ein Live-Wetter-Widget ohne Code in Ihren Blog.
Der Aufhänger: Stellen Sie sich vor, Ihre Blog-Besucher sehen das aktuelle Wetter genau dort, wo Sie Reise- oder Outdoor-Pläne erwähnen. Mit Hugging Face Widgets können Sie einen kleinen, live Wetter-Helfer auf jeder Seite einfügen – ohne jeglichen Code. Am Ende dieser Anleitung haben Sie ein funktionierendes Widget, das sich automatisch aktualisiert und auf Desktop und Mobilgeräten großartig aussieht.
💡 Tipp: tippe auf die Nummer eines Schritts, wenn du ihn erledigt hast — ein grüner Haken erscheint und dein Browser merkt sich, wie weit du warst.
- Ein Blog oder eine Website, die Sie bearbeiten können (WordPress, Wix, Squarespace, GitHub Pages usw.)
- Ein kostenloses Hugging Face-Konto (Anmeldung in 2 Minuten)
- 10 Minuten Zeit und ein Texteditor oder Blog-Dashboard
- Für diese Aufgabe ist kein kostenpflichtiger Plan erforderlich
Bei Hugging Face anmelden
Öffnen Sie einen beliebigen Webbrowser und gehen Sie zu https://huggingface.co. Klicken Sie oben rechts auf Log in / Sign up. Wählen Sie Sign up und geben Sie Ihre E-Mail-Adresse, Ihren Benutzernamen und Ihr Passwort ein. Überprüfen Sie Ihren Posteingang auf eine Bestätigungs-E-Mail und klicken Sie auf den darin enthaltenen Link. Sie landen dann auf Ihrer neuen Profilseite.
Sie wissen, dass es funktioniert hat, wenn Sie Ihren Benutzernamen oben rechts sehen und die Seite „Welcome to Hugging Face, [Ihr Name]“ anzeigt.
Die Widgets-Galerie öffnen
Nach dem Login schauen Sie in die linke Seitenleiste und klicken auf Widgets (es befindet sich unten, unter „Resources“). Eine neue Seite lädt, die ein Raster von vorgefertigten Widgets zeigt. Jedes ist ein kleiner, interaktiver Block, den Sie in Ihren Blog einfügen können.
Sie wissen, dass es funktioniert hat, wenn Sie eine Überschrift sehen, die „Browse all widgets“ lautet, und eine Liste farbenfroher Karten.
Das Wetter-Widget auswählen
Auf der Widgets-Seite verwenden Sie das Suchfeld oben und geben Wetter ein. Sie sehen eine Karte mit dem Titel „Weather widget“ und einem kleinen Sonnen- und Wolkensymbol. Klicken Sie einmal auf die Karte, um die Detailseite zu öffnen. Diese Seite zeigt eine Live-Vorschau, Einstellungen und den benötigten Einbettungscode.
Sie wissen, dass es funktioniert hat, wenn Sie eine Live-Wetteranzeige und Optionen wie „Location“ und „Units“ sehen.
Ihre Einstellungen wählen
Auf der Widget-Seite können Sie die Stadt, die Temperatureinheit (Celsius oder Fahrenheit) und das Farbthema festlegen. Wählen Sie die Stadt aus, die für Ihre Blog-Leser am wichtigsten ist. Lassen Sie die anderen Optionen vorerst auf den Standardwerten. Wenn Sie die Einstellungen ändern, aktualisiert sich die Vorschau sofort, sodass Sie sehen können, wie es aussehen wird.
Wenn sich die Vorschau nicht aktualisiert, laden Sie die Seite neu oder überprüfen Sie Ihre Internetverbindung.
Sie wissen, dass es funktioniert hat, wenn die Vorschau die korrekte Stadt und Temperatureinheit anzeigt.
Den Einbettungscode kopieren
Unterhalb der Vorschau finden Sie ein Feld mit der Beschriftung Embed this widget. Klicken Sie in das Feld, um den gesamten Code zu markieren, und drücken Sie dann Cmd+C (Mac) oder Strg+C (Windows), um ihn zu kopieren. Der Code beginnt mit <iframe und endet mit </iframe>.
Wenn Sie das Einbettungsfeld nicht sehen, suchen Sie nach einer Schaltfläche mit der Aufschrift Copy to clipboard oder Embed.
Sie wissen, dass es funktioniert hat, wenn Sie den Code in Ihrer Zwischenablage haben und das Feld ein grünes Häkchen anzeigt.
Den Code in Ihren Blog einfügen
Öffnen Sie Ihren Blog-Editor (WordPress, Wix, Squarespace usw.) und gehen Sie zu der Seite oder dem Beitrag, wo Sie das Widget haben möchten. Wechseln Sie den Editor in den HTML-Modus (manchmal auch „Code-Ansicht“ genannt). Fügen Sie den kopierten Code genau dort ein, wo der Wetter-Helfer erscheinen soll. Wechseln Sie zurück in den Visuellen Modus und speichern Sie die Seite.
Wenn Ihr Editor keinen HTML-Modus hat, suchen Sie nach einem „Embed“- oder „Custom HTML“-Block und fügen Sie den Code dort ein.
Sie wissen, dass es funktioniert hat, wenn das Live-Wetterfeld auf der Seite erscheint und die aktuelle Temperatur anzeigt.