Realmac Software
Welcome to the RapidWeaver Community Forums, where you can chat with RapidWeaver users from around the world!

Facebook Alben

Tommi SanTommi San Hessisch OldendorfPosts: 50Members
in Plugins
Hallo Gemeinde,
Ich suche eine "schnelle" Lösung, wie ich die Fotoalben unserer Facebook SEITE! auf unsere
Webseite bekomme. FABO Stack habe ich probiert, der zieht aber nur die Bilder von meinem
Facebook Account. Ich brauche aber die Konzertfotos die auf der Band Seite sind.

Wäre für jeden Lösungsvorschlag dankbar. Evtl. auch über die FB API. Da kenn ich mich allerdings überhaupt nicht aus und bräuchte ein HowTo

viele Grüße
Tommisan

Comments

  • marianmarian Posts: 1,412Members
    Es kann sein dass du auf der Seite http://zach.lysobey.com/files/fbAlbum/fbAlbum.html etwas Hilfe bekommst.
    1. Nachdem du in dem Feld hinter "Put your Facebook Album ID here" eingegeben hast und Submit-Button angeklickt hast bekommst du ein Code. Diesen Code kopierst du und setzt ihm in dem Feld "Benutzerdefinierten Kopfzeile"
    2. Als Inhalt in der Seite gibst du 
    <div id="FBalbum"></div>
    ein (wenn du den Code von hier oder von der anderen Seite kopierst dann musst du in RW, nachdem der Code eingegeben hast, ihn auswählen und aus dem Menü Format erstmal "Formatrierung löschen" und dann "Formatierung ignorieren" anklicken.

    Oder wenn du auch die Bilder "öffnen" möchtest dann bräuchtest du http://zach.lysobey.com/files/demo_fancybox/
    Grüße,
    marian
  • marianmarian Posts: 1,412Members
    Oder wenn du auch die Bilder "öffnen" möchtest dann bräuchtest du http://zach.lysobey.com/files/demo_fancybox/

    Das geht so:
    1. Nachdem du "Download The Files" angeklickt hast hast du einen Ordner demo_fancybox bekommen. Bringe diesen Ordner in deinem Projektordner (da wo die die RW-Datei sich auch befindet.
    2. Jetzt in der RW-Datei klicke mit der rechten Maustaste da wo RESOURCES steht (auf der linken Seite des RW-Fensters. Und da klicke "Ordner hinzufügen..." Dem neu erstellten Ordner in Resources gib den Namen fancybox.
    3. Öffne dann der Ordenr demo_fancybox/fancybox (da wo du ihn davor verschoben hast) und wähle ALLE Dateien aus die da sind. Verschiebe sie alle in dem Ordner fancybox aus Resources (siehe Screenshot)
    4. Jetzt verschiebe die Datei jquery.fbAlbum.js in Resources (NICHT in Ordner fancybox aus Resources) (siehe Screenshot)

    5. Schau dir jetzt diesen Code an: 
    <!-- WHERE THE MAGIC HAPPENS-->	

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>;
<script src='%resource(jquery.fbAlbum.js)%'></script> <script src='%resource(fancybox/jquery.mousewheel-3.0.4.pack.js)%'></script>
<script src='%resource(fancybox/jquery.fancybox-1.3.4.pack.js)%'></script>
<link rel='stylesheet' type='text/css' href='%resource(fancybox/jquery.fancybox-1.3.4.css)%' media='screen' />

<script>
	$(document).ready(function() {
		$('#MY_DIV_ID').fbAlbum({
			'albumID':201652143221992,
			'callback':	function(){	//code that loads after the album must go here
				$('.album a').fancybox(); 
			}
		});
	});
</script>

<!-- END OF THE MAGIC-->

<style>
/* just a few simple styles on the album */
.album{ list-style:none;}
.album li{ float:left; height:150px; margin-bottom:10px; text-align:center;}
.album a{ display:block; width:150px; padding:5px; margin:5px; border:4px solid #444;}
.album a:hover{ border:4px solid #44d}
</style>

    - Die ersten Zeilen ( die mit <script und <link anfangen). Sie erstellen eine Verbindung einmal zu ajax.googleapis.com woher die Datei jquery.min.js verlangt wird und dann zu dem Ordner fancybox aus resources woher einige Dateien eingebunden werden. Die Datei jquery.fbAlbum.js aus resources wird auch eingebunden

    - In dem nächsten <script gibt es:
    'albumID':201652143221992,
    Diese Zahl musst du ändern damit die richtige Album ID von facebook eingebunden wird.

    - In dem CSS Code (fängt mit <style an) werden die Bilder formatiert (wie groß, wie breit, Rahmenfarbe etc)

    Diesen Code (brauchst nur die Album ID zu ändern) kopieren und in Benutzerdefinierte Kopfzeile einsetzen.

    (- siehe Screenshot!)

    6. Als Inhalt wurde diesen Code hier eingegeben: 
    <h1><a href='http://zach.lysobey.com/projects/fbalbum'>FBAlbum </a> + Fancybox Demo</h1>
<p>Using <a href='http://zach.lysobey.com/projects/fbalbum'>FBAlbum</a>; with the <a href='http://fancybox.net/'>Fancybox</a>; Plugin</p>
<p><a href='https://www.facebook.com/media/set/?set=a.201652143221992.55520.186646504722556&type=3'>The Demo Album</a> [Album ID: 201652143221992]</p>

<div id='MY_DIV_ID'></div>
    Ob du den h1 und die Absätze bräuchtest, weiss ich nicht, aber du brauchst auf jeden Fall 
    <div id='MY_DIV_ID'></div>
    (wie schon mal erwähnt, Formatierung löschen und ignorieren nicht vergessen!)

    Das wäre alles. Das Ergebnis siehst du als Screenshot auch.
    RapidWeaverSchnappschuss001.jpg
    1606 x 1121 - 851K
    RapidWeaverSchnappschuss002.jpg
    1606 x 1121 - 456K
    Grüße,
    marian
  • Tommi SanTommi San Hessisch OldendorfPosts: 50Members
    Hallo marian,

    vielen Dank für Deine ausführliche Erklärung.
    Werde es heute Abend probieren und den Erfolg dann hoffentlich posten können.

    lg
    Tommisan

    edit: Ahh.. ich sehe gerade, selbst Musiker? Dann kennst Du die Problematik mit den vielen
    Aufnahmen vom Gig. Da kommt ja keiner hinterher.. ;-)
  • marianmarian Posts: 1,412Members
    den Erfolg dann hoffentlich posten können
    Soo schwer ist aber nicht!
    Ahh.. ich sehe gerade, selbst Musiker?
    Ja, aber Klassik.
    Grüße,
    marian
  • Tommi SanTommi San Hessisch OldendorfPosts: 50Members
    Nun ja.... Wenn Du die [url="http://www.crossfader.org "]Seite[/url] mal besuchst, siehst Du, das schon ein Lightbox Effekt existiert und vieles mit Stacks und addons realisiert ist.
    Werde FB schon irgendwie überreden.. *g*

    lg
    Tommisan
  • marianmarian Posts: 1,412Members
    Nun ja.... Wenn Du die [url="http://www.crossfader.org "]Seite[/url] mal besuchst, siehst Du, das schon ein Lightbox Effekt existiert und vieles mit Stacks und addons realisiert ist.
    Ja, ja, aber was du jetzt willst ist ein Album der irgendwo bei facebook ist in deiner Homepage anzeigen. Man muss einen Bezug mit DEINEM SCHON EXISTIERENDEN Lightbox oder fancybox erstellen. Das wird mit irgendeiner Javascript Datei erzeugt. Da bin ich mnicht der jenige der so etwas machen kann.
    Was ich vorgeschlagen habe ist bei dieser Seite die du neu erzeugst ein fancybox DAZU einzurichten und der Album von facebook mit DIESEM fancybox "arbeiten" zu können.
    Werde FB schon irgendwie überreden.. *g*
    Wie gesagt, so schwer ist es nicht.
    Wenn du diesen Screenshot anschaust dann siehst du schon das Album 421209621232965 in einer RW-Seite.
    Was ich gemacht habe ist in dem Screenshot ersichtlich (die Albumnummer von da nach da kopiert und eingefügt).
    Was ich gesehen habe ist dass die Formatierung des Codes (von hier, aus dem Forum, kopiert und in Benutzerdefinierten Kopfzeile-Feld eingefügt) gelöscht wurde (der Anfang der Zeilen).
    Der Code würde dadurch gar nicht funktionieren.
    Der Code funktioniert ABER WENN du hinter "//code that loads after the album must go here" einen Zeilenwechsel erzeugst (habe ich in Screenshot gezeigt).

    Also DOCH einfach :-) (oder ist das falsche Album?)
    RapidWeaverSchnappschuss003-2.jpg
    1848 x 1131 - 969K
    Grüße,
    marian
  • Tommi SanTommi San Hessisch OldendorfPosts: 50Members
    Yeahaa.... das funzt. Vielen Dank für Deine Hilfe und ausführliche Mitarbeit.

    lg

    Tommisan
  • Tommi SanTommi San Hessisch OldendorfPosts: 50Members
    Hallo Gemeinde,
    Lange hat das mit dem FB Album auf der Webseite funktioniert. Jetzt hat FB was an der API geändert und die Bilder werden nicht mehr angezeigt.
    Jetzt habe ich DIES gefunden und stelle mich damit auch blöd an. Soll heißen ich bekomme es nicht zu rennen. http://berlinpix.com/filo/quick-dirty.html
    Wenn mir da jemand zur Hand gehen könnte??

    viele Grüße
    Tom
  • marianmarian Posts: 1,412Members
    Tommi San wrote: »
    Jetzt habe ich DIES gefunden und stelle mich damit auch blöd an. Soll heißen ich bekomme es nicht zu rennen. http://berlinpix.com/filo/quick-dirty.html
    Wenn mir da jemand zur Hand gehen könnte??

    Ok, dann fangen wir an...
    1. Zuerst deine Facebook-ID kennst du (ich habe keinen Facebook Account so dass ich dir nicht helfen kann aber du kannst in Google nach Facebook ID ermiteln suchen - was ich verstehe ist dass so eine ID so aussieht: http://www.tippscout.de/facebook-eigene-id-herausfinden_tipp_5266.html

    2. In dem Code auf der Seite http://berlinpix.com/filo/quick-dirty.html sind zwei Dateien die du wohl auch brauchst. Es geht um die Datei filo_style.css und filo.js (die erste ist mit 
    <link rel="stylesheet" href="filo/filo_style.css" .... etc, etc
    eingebunden und die zweite ist mit 
    <script src="filo/filo.js" .... etc, etc
    eingebunden.

    So dass du zuerst zu der Seite
    http://www.berlinpix.com/filo/filo/filo.js
    hingehst und in Safari in dem Menü Ablage klickst auf "Sichern unter" Sichserst diese Datei als filo.js und in dem Format Quelltext der Seite

    Dann gehst du zu
    http://www.berlinpix.com/filo/filo/filo_style.css
    und so wie davor sichwerst du die Datei als filo_style.css (auch als Quelltext der Seite).

    3. Diese zwei Dateien filo.js und filo_style.css schiebst du in Resources

    4. Jetzt brauchst du erstmal etwas Code in Seiteninspektor.
    In benutzerdefinierten Kopfzeile: 
    <link rel="stylesheet" href="%resource(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="%resource(filo.js)%" type="text/javascript" language="javascript"></script>
    Du sollst aber aufpassen dass das Forum hier einige Semikolons in Code schreibt (z. B. hinter jquery/1.7.2/jquery.min.js" ) die NICHT Teil des Codes sind/ist, also vergleiche mit dem Screenshot!

    5. Und als Inhalt müsstest du das eingeben: 
    <div class="filo template_1" id="DEINE-FACEBOOK-ID"></div>
    Allerdings für DEINE-FACEBOOK-ID musst du deine eingeben.

    Ich habe die ID aus dem Beispiel eingegeben (Kontrastspiel) und ich bekam den zweiten Screenshot. Also es funktioniert. Nur nicht mit meinen Bildern ;)
    RapidWeaverSchnappschuss002.jpg
    1835 x 1178 - 190K
    RapidWeaverSchnappschuss003.jpg
    1835 x 1178 - 274K
    Grüße,
    marian
  • Tommi SanTommi San Hessisch OldendorfPosts: 50Members
    Hallo marian,
    vielen Dank für Deinen Support. Hatte das Problem mit dem Pfad zur css, js Datei.

    LG
    Tom
  • marianmarian Posts: 1,412Members
    Tommi San wrote: »
    Hatte das Problem mit dem Pfad zur css, js Datei.
    Mit %resource()% Funktion von RW dann nicht mehr.
    Grüße,
    marian

Leave a Comment

Unknown
bolditalicunderlinestrikecodeimageurlquotespoiler
Home • PluginsComment As ...