Du willlst eine Vorschau deiner Flickr-Fotos auf deiner Webseite oder deinem Blog integrieren? Ich zeige dir in einfachen Schritten, wie du einen standardmäßigen Flickr Badge (Badge heißt Abzeichen oder Ausweis) auf deine Webseite integrierst, und wie du deinen Flickr Badge individuell gestalten kannst.
Erstelle deinen Flickr Badge
Als ersten Schritt erstellst du dir einen Flickr Badge auf der Flickr-Webseite. Melde dich bei deinem Flickr-Account an. Gehe dann auf die Seite www.flickr.com/badge.gne.
1. Wähle HTML-Modul aus.
2. Du kannst wählen, ob du nur öffentliche Fotos, Fotos mit bestimmten Tags, Fotos eines bestimmten Albums oder alle Fotos anzeigen willst.
3. Wähle dann, ob du dein Account-Bild anzeigen willst, die neusten Fotos oder eine zufällige Auswahl deiner Bilder anzeigen willst. Du kannst außerdem die Größe deiner Fotos, und deren Ausrichtung auswählen.
4. Wähle Farben für Hintergrund und Rahmen Anzeige. Wenn du später dein eigenes Design anpassen willst, wähle kein Hintegrund und Rahmen.
5. Jetzt wird dir der Code für deinen Flickr Badge angezeigt. Wenn dir ein einfacher Flickr Badge genügt, kannst du diesen Code jetzt in den HTML-Code deiner Webseite integrieren. Und schon werden deine neusten Flickr-Fotos auf deiner eigenen Webseite angezeigt.
So sollte dein Code aussehen
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=t&layout=v&source=user&user=DEINE FLICKR USER ID HIER"></script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
Wichtig ist, dass der Code in Zeile 17 deine eigene Flickr-User ID enthält.
Du kannst also nicht einfach diesen Code kopieren, und in deine eigene Webseite einsetzten, sondern musst deinen eigenen Code auf der Fickr-Webseite generieren.
Gestalte deinen Flickr Badge individuell
Wenn du deinen Flickr Badge an das Design deiner eigenen Webseite anpassen möchtest, kannst du den Code ganz einfach anpassen.
1. Passe deinen XHTML-Code an
Suche und kopiere folgenden Code-Schnipsel aus deinem Flickr-Code.
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=t&layout=v&source=user&user=DEINE FLICKR USER ID HIER"></script> </style>
Setze den kopieren Code in den folgenden Code-Schnipsel ein.
<div id="flickrPicContent"> <div id="flickr_badge_wrapper"> KOPIERTEN CODE HIER EINSETZEN!!! </div> <p>via <a href="http://www.flickr.com/DEIN FLICKR ACCOUNT NAME (z.B. Elmastudio)" target="_blank">DEIN NAME Flickr</a></p> </div> <!--end Flickr Element--> </style>
Das war’s, dein HTML-Code ist fertig. Diesen Code kannst du jetzt in deine Webseite einsetzen. Wenn du eine WordPress-Webseite hast, zum Beipiel in die Sidebar.php Datei.
2. Definiere deinen CSS Style
Jetzt musst du nur noch deine CSS Styles definieren. Dazu kopierst du einfach folgenden Code (der Code ist der des Elmastudio Flickr Badge), und fügst in in dein eigenes CSS Style Sheet (z.B. styles.css) ein. Dort kannst du dann dein CSS individuell anpassen.
/* Flickr Badge CSS Styles */
#flickrPicContent {width:280px; padding:15px 0 0 0; background:#78B3A8}
#flickrPicContent {padding:0 20px 0 20px; font-size:13px; font-family:Georgia,"Times New Roman",Times,serif; color:#FFF; font-style:italic}
#flickrPicContent a {color:#4A412C}
#flickrPicContent a:hover {color:#FF564A}
#flickr_badge_wrapper {width:261px; padding:0 19px 0 0; background:#78B3A8; overflow:hidden}
.flickr_badge_image {width: 65px; height: 70px; float: left; background:url(images/Backgrounds/flickrPicBg.jpg) left top no-repeat; padding:5px 0 0 22px; float: left;}
.flickr_badge_image img {width: 60px; height: 50px;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
Ich hoffe, du hast dein Flickr Badge auf deiner Webseite erfolgreich integriert. Wenn du Fragen an mich hast, schreib mir doch einfach unten einen Kommentar.
Diesen Artikel werde ich mir merken. Ich arbeite gerade (schon wieder – ich weiss, ich bin schlimm) an einem neuen Design für meine Website und habe vor, diesmal auch ein Flickr-Modul einzubauen. Danke dir für die gut verständliche und übersichtliche Anleitung :)
Ich möchte Flickr-Fotos einbinden - jedoch mit target=»_blank«, damit der Besucher nicht immer gleich von meiner Seite weg kommt. Geht das?
LG, Hannes
Hallo Hannes,
vielen Dank für deinen Kommentar. Ehrlich gesagt, würde mir eine Umsetzung mit »target blank»auch besser gefallen. Ich habe bis jetzt leider keine Lösung dafür gefunden, werde aber noch einmal ein bisschen recherchieren und dir noch einmal bescheid geben.
Viele Grüße
Ellen
Danke für die schöne Erklärung.
ich suche nur noch eine möglichkeit die Bildgröße anzupassen denn die mittlere größe ist mir zu klein und das größte ist zu groß
&size=t steht jetzt in der url mit welchem parameter kann ich die bildgröße individuell beeinflussen
Hoffe es gibt eine Lösung
Danke und Gruß
derRobert
Bei mir klappt das leider nicht so wirklich, hätte einfach gern 2 Bilder in der Sidebar nebeneinander und fertig und am besten mit einer Breite von jeweils 125 und das wars. Ohne Schnickschnack oder sonst, einfach zufällige Wiedergabe. Bin schon auf der Suche nach einer Lösung aber finde nichts, schade eigentlich.
In den meisten Themes, hat man ja en Flickr Widget inklusive aber bei diesem eben nicht. Schade eigentlich.
Füge einmal deine Userid ein, dann sollten nur zwei Bilder zufällig angezeigt werden
.flickr_badge_image {margin:0px;display:inline;}
.flickr_badge_image img {border: 0px solid #666666 !important; padding:1px; margin:2px;}
#flickr_badge_wrapper {width:220px;text-align:left}
Created with flickr badge.
Damit kann man sich einen kompakten und aufgeräumten Code einfach erstellen:
http://www.flickrbadge.com/