Wie man das SMA-SunnyPortal als WordPress-Widget installiert

Wie ihr gesehen habt erstrahlt die Dachgold Website in neuem Glanz und was mich besonders freut: Die Dachgold Anlage hat nun auch ihren offiziellen Platz und jeder kann die tagesaktuellen Produktionsdaten einsehen! Wer es noch nicht mitbekommen hat: Seit 24. August 2012 produziert eine 8,74 kWp Anlage im Waldviertel Sonnenstrom. Auf dieser Seite könnt ihr auch den langen Weg dahin nochmal nachlesen. Nachdem ich beim Einbau der Anzeige auf dieser WordPress Seite so meine Mühe hatte, möchte ich hier eine Anleitung schreiben, wie man auf jeder WordPress Seite ein Anlagenbild als Widget einfach einbauen kann, für WordPress-Kenner ein Klax, für diese ist die Vorgehensweise eben als Ideeninput zu sehen. An dieser Stelle herzlichen Dank an das Social Media Team der SMA, die ich schon lange durch ihre vorbildlichen Energiebloggeraktivitäten kenne und die mir die Webbox für diese Anlage zur Verfügung gestellt haben.

Hier also die Anleitung für den Widget-Einbau. Damit die der Zugriff auf die Anlagenseite in etwa so aussieht. Vielleicht gibt es eine noch einfachere Möglichkeit, aber für mich als Nichttechnikerin war das die beste “Workaround-Lösung”.

Das Ziel war es, die Anlagendaten auf der rechten Seite im “Widget-Feld” anzuzeigen. Ein Extra-Widget dafür gibt es von SMA leider nicht. Ist aber auch verständlich, da die Anzahl der Menschen, die das dann verwenden würden, vermutlich sehr gering ist. Ich glaub die Anzahl der Blogger mit eigener PV-Anlage hält sich noch in Grenzen, oder irre ich mich? Jedenfalls denke ich, dass sich der ein- oder andere Mal der vielleicht seine Website mit WordPress installiert hat, hierher verirren wird um meine Lösung zu probieren. Da es dann doch nicht möglich war das Widget mit einer Echtzeit-Anzeige zu versehen, hab ich mich entschieden in der Vorschau einen Screenshot von der Sunny-Portal-App zu machen und die tagesaktuellen Daten dann auf einer eigenen Seite anzuzeigen. Da ich nicht wollte, dass die Anlage auf einer eigenen Seite angezeigt wird, sondern direkt in meinem System eingebunden ist, hab ich dann dann zum Schluss auch noch mittles i-Frame-Generator, die verschiedenen Punkte auf die Anlagenseite eingebaut.

 1. Schritt: Seitenlink aus dem Sunnyportal holen

Falls ihr eure Anlage schon länger besitzt, dann schaut ihr vermutlich öfter ins Sunnyportal oder auf die App und prüft, was die Anlage so produziert. Ich mach das jedenfalls gerne. Wer sich auch ein bisschen mit Web beschäftigt hat auch sicher schon den Link gefunden, mit dem man die Anlage auf anderen Seiten einbauen kann. Manche verwenden ihn aber einfach um anderen Leuten den Link zu schicken. Hier nochmal eine kurze Erklärung wie ihr den externen Link im Portal findet. Falls ihr ganz motiviert seid, könnt ihr diesen Link auch als Seite in eure Website einbauen. Als ersten Schritt reichte es aber den Link zu haben, der die Leute zu euer Anlage führt. Wie hier zB. Wenn man dann auf das Widget klickt, kommt man zu der Anlage.

2. Schritt: Screenshot am Iphone

Da ich als Vorschaubild für die Anlagenanzeige ein hochformatiges Bild wollte, habe ich kurzerhand einen Screenshot in der Sunny Portal App von einem guten Tag (ja klar  gemacht und auf dem Laptop gespeichert. Für alle, die das mit dem Iphone machen möchten und so wie ich ein Jahr gebraucht haben um zu checken, dass es eine Screenshotfunktion gibt: Einfach den Ausschaltknopf und den Bedienungsknopf gleichzeitig drücken. Die Bilder dann auf den PC laden und dann noch mit einem Bildbearbeitungsprogramm eventuell die Größe anpassen und vor allem den Balken oben wegschneiden. Am einfachsten geht das mit meinem neuen Lieblingsprogramm “Picmonkey“.

2. Schritt: Bild hochladen und Link aus Mediathek kopieren

Nachdem man den Screenshot gespeichert hat, dann in WordPress das Bild hochladen und in die Mediathek gehen. Wir müssen uns nämlich den Link holen, mit dem das Widget dann eigebaut werden kann.

3. Schritt: Widget einbauen

Jetzt muss die Grafik nur noch als Widget eingebaut werden. Dafür in Design-Widgets gehen und einen leeren “Text” Baustein an die gewünschte Position ziehen, einen Titel und den HTML Code für den Link auf den das Bild verweisen soll (der Link, den wir uns in Schritt 1 geholt haben) und den oben kopierten Link vom Bild. Als Beispiel hier mein Codesnippet:

Der erste Teil ist der Link zur Seite und der 2. der zum Bild. Einfach die “https://” Teile austauschen, dann sollte es funktionieren.

4. Schritt: Seite checken

Wenn alles richtig gemacht wurde, sollte man nun vom Widget auf die Sunn-Portal mit den Anlagendaten kommen oder wie bei mir auf eine Seite in der die Ergebnisse eingebettet sind. Die Einbettung hab ich wie auch oben schon erwähnt über diesen genialen i-frame-generator gemacht. Falls das jemanden genauer interessiert schreib ich auch dazu noch einen Beitrag.

Das wars auch schon mit meiner ersten Bildanleitung. Ich hoffe es hilft dem einen oder anderen Mal. Ich erfreue mich einstweilen an einem weiteren tollen Sonnentag. Heute am 30.4 scheint anscheinend auch im Waldviertel die Sonne. Hier ein kleiner Blick auf den aktuellen Stand. Wer es länger weiterverfolgen will, klickt einfach rechts auf das Widget ;-).