Anzeige
Tutorialbeschreibung

FILo: Das jQuery-Plug-In für Facebook-Bilder in deiner eigenen Website

FILo: Das jQuery-Plug-In für Facebook-Bilder in deiner eigenen Website

Lade Bilder von Facebook mit jQuery: Filo ist ein leichtgewichtiges und kostenloses Plug-In für die JavaScript-Bibliothek jQuery, mit der du Bilder von deiner Facebook-Seite in deine eigene Website einbinden kannst, ohne auch nur eine Zeile JavaScript-Code zu schreiben.


Generator

Bevor wir anfangen, zuerst der Hinweis, dass es einen Generator gibt, mit dem ihr einen ersten Test durchführen könnt.


Quick & Dirty

Für einen schnellen Start brauchst du nur deine Facebook-ID und eine Zeile HTML-Code:
<div class="filo" id="DEINE-FACEBOOK-ID"></div>

Wenn du nicht weißt, was deine Facebook-ID ist, findest du hier eine Anleitung. Per Standard-Einstellung werden nun alle Alben von der Facebook-Seite mit jeweils den ersten drei Thumbnails geladen.

So sieht das Standard-Layout aus!

FILo default layoutBilder



Das sieht zugegebenermaßen noch nicht besonders hübsch aus, doch das wollen wir jetzt ändern. Dir stehen vier verschiedene Design-Templates zur Verfügung, die du einfach über die entsprechende CSS-Klasse auswählen kannst, z.B. "template_1" für Design 1.
<div class="filo template_1" id="DEINE-FACEBOOK-ID"></div>


Das Ganze nun schön verpackt in ein HTML5-Gerüst, Scripte und CSS eingebunden und fertig ist der erste Test:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Your own Website using FILo</title>
<link rel="stylesheet" href="filo/filo_style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="filo/filo.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="filo template_1" id="DEINE-FACEBOOK-ID"></div>
</body>
</html>


So sieht das Beispiel mit dem ersten Design-Template aus!

FILo first templateBilder



Nutze HTML und CSS

Design-Template

Um eines der vorgefertigten Design-Templates nutzen zu können, musst du lediglich bei dem Hauptelement eine zusätzliche Klasse angeben: "Template_1" für das erste Design-Template bis hin zu "Template_4". Schaue dir alle Templates in Aktion an:

FILo templatesBilder



Alben auswählen

Es ist recht selten, dass man alle Alben einer Facebook-Seite laden möchte. Daher hast du die Möglichkei, Alben von dem Laden-Prozess auszuschließen bzw. nur die Alben anzugeben, die geladen werden sollen:

Lädt alle Alben außer "Profile Pictures" und "Cover Photos"
<div class="filo template_1" id="Kontrastspiel">
<div class="excluded" id="cover photos"></div>
<div class="excluded" id="profile pictures"></div>
</div>


Lädt nur die Alben "Kids" und "People"
<div class="filo template_1" id="Kontrastspiel">
<div class="album" id="kids"></div>
<div class="album" id="people"></div>
</div>


Anzahl der Bilder

Je nachdem, ob du ein ganzes Album oder nur ein paar Thumbnails laden willst, ist es sinnvoll, die Anzahl der zu ladenden Bilder pro Album zu begrenzen. Das kannst du ganz einfach über das Attribut "maxCount" machen. Den Wert kannst du in dem Hauptelement oder aber auch in einem einzelnen Album angeben, um unterschiedliche Ergebnisse zu erzielen. In diesem Beispiel werden je 5 Bilder geladen, mit Ausnahme des Albums "Kids", hier werden nur 3 Bilder geladen.
<div class="filo template_1" id="Kontrastspiel" maxCount="5">
<div class="album" id="people"></div>
<div class="album" id="kids" maxCount="3"></div>
<div class="album" id="mixed"></div>
</div>


Benutzer weiterleiten

Klickt der Benutzer auf ein Thumbnail, wird per Standard-Einstellung dieses Bild in einem Overlay-Container vergrößert dargestellt. Wenn du jedoch den Benutzer auf eine andere Seite weiterleiten möchtest, kannst du hierfür das href-Attribut benutzen.

Ein Beispiel: Auf der Bilderseite von Kontrastspiel werden zunächst alle Alben mit nur ein paar Thumbnails dargestellt. Klickt der Benutzer auf ein Bild, kommt er zu einer anderen Seite, auf der alle Bilder des aktuellen Albums geladen werden. Gib hierfür einfach im FILo-Container das href-Attribut an. In diesem Fall wird der Benutzer auf die Seite "album.php" weitergeleitet:
<div class="filo template_1" id="Kontrastspiel" maxCount="3" href="album.php">
<div class="album" id="people"></div>
<div class="album" id="mixed"></div>
</div>


POST und GET

Um nun entsprechend auf die Benutzerinteraktion reagieren zu können, brauchst du zwei Informationen: den Namen des Profils und den Namen des Albums. Beide Informationen werden per POST übermittelt, um auf der Zielseite entsprechend darauf reagieren zu können. Solltest du eine Übermittlung der Daten über GET bevorzugen, kannst du das über das method-Attribut ändern:
<div class="filo template_1" id="Kontrastspiel" maxCount="3" href="album.php" method="GET">
<div class="album" id="people"></div>
<div class="album" id="mixed"></div>
</div>


Nutze JavaScript

Mit JavaScript sind noch ein paar Sachen mehr möglich und es hält deinen HTML-Code schlank. Der Start geht jedoch genauso schnell. Zwei Wege gibt es:
jQuery(document).ready(function ($) {

//first way
$.filo("Kontrastspiel"); //added to body

//second way
$("#Kontrastspiel").filo(); //added to #Kontrastspiel
});



Im ersten Fall werden die Bilder einfach dem Body-Tag hinzugefügt. Bei der zweiten Variante wird das entsprechende Element direkt angegeben. Bei diesen beiden Beispielen fehlen allerdings noch die options, welche die Konfigurationen (Design etc.) enthalten.
jQuery(document).ready(function ($) {

var options = {
//some code
}

//first way
$.filo("Kontrastspiel", options); //add to body

//second way
$("#Kontrastspiel").filo(options); //add to #Kontrastspiel
});



Welche Konfigurationen mit den options genau möglich sind, siehst du in der Dokumentation.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.12.2012 - 12:46

Naja so richtig hat das bei mir nicht füktioniert - weder mit der ID noch mit meinem Namen.
Vielleicht hat Facebook wieder was zugedreht
Ihr könnt das gerne probieren - kplaube - ?!?

Portrait von eiwontno
  • 08.12.2012 - 13:44

@KPLaube: Hi, dein Profil ist leider keine Facebook Page sondern ein Privat Profil, deine Bilder sind also nicht öffentlich zugängig. Bei Kontrastspiel z.B. kannst du dir alle Bilder angucken auch wenn du nicht eingeloggt bist: https://www.facebook.com/kontrastspiel

Wenn du dir deine Seite: http://www.facebook.com/kplaube anschaust und nicht eingeloggt bist siehst du, dass du nicht weiter kommst. Wenn du das möchtest müsstest du eine Facebook Page anlegen: http://de-de.facebook.com/pages/create.php

Frage geklärt?

Portrait von schlumpfiii
  • 30.11.2012 - 09:46

Danke, kann ich bestimmt das ein oder andere mal gebrauchen :)

Portrait von Wellenbrecher1963
  • 28.11.2012 - 14:10

Ist ja der Hammer! Was es nicht so alles gibt.

Portrait von Nille87
  • 28.11.2012 - 12:40

Vielen Dank hierfür :)

Portrait von MaoMao
  • 28.11.2012 - 12:38

Vielen Dank für das Tutorial.

x
×
×