2012-04-13 9 views
3

Ich versuche, das neueste Bild von einem Instagram-Feed in eine Webseite einzufügen, und fragte mich, ob es möglich wäre, es innerhalb eines div zu tun, als würden Sie andere platzieren Element auf der Seite.Hinzufügen eines RSS-Bild-Feeds von Instagram in die Website

Ich möchte jedes Bild auf 280 x 280 Größe ändern und möchte nur das Bild anzeigen - kein Text oder Hashtags.

Ich bin mir nicht sicher, ob dies der beste Weg, dies zu tun, aber ich fand Sie den RSS-Feed von Statigram zum Beispiel http://statigr.am/feed/username

und zu realisieren ziehen könnte, würde ich brauchen das Bild in voller anzuzeigen und stellen Sie die Höhe Ich fand diese Seite auf RSS-Bild: http://www.w3schools.com/rss/rss_tag_image.asp

Kennt jemand den besten Weg für mich, dies zu tun?

Antwort

7

Ich habe es nicht ausprobiert, aber das sieht aus wie es das tun, was Sie wollen: http://stuffthatspins.com/2012/03/30/display-instagram-picture-stream-really-easy-with-jquery-and-json/

Sie kein Javascript bekommen, um wirklich die Größe von Bildern AFAIK, aber Sie können CSS eingerichtet, um die Art und Weise zu beschränken, sie sind angezeigt. Zum Beispiel, wenn alle Bilder hatten die Klasse instagram:

img.instagram{width:280px; height:280px;} 
+0

Dank für Ihre Hilfe:) – thinkvisual

+2

Kein Problem! Wenn es für Sie funktioniert, ziehen Sie in Betracht, diese Antwort zu akzeptieren, so dass jeder weiß, dass es funktioniert und für andere hilfreicher ist. – joshcartme

0

Wenn Sie selbst wollen, dass es kodieren, dann der beste Weg, das Futter wäre zu verwenden, um die Instagram-Medien-API zu erhalten - https://instagram.com/developer/endpoints/users/#get_users_media_recent

Sie erhalten einen JSON-Feed und müssen die Ergebnisse selbst anzeigen.

ODER Sie können sich die ganze Zeit sparen und ein vollständig codiertes Plugin verwenden, das den Feed von Instagram zieht. Ein gutes Beispiel wäre, das InstaMax-Plugin auszuprobieren. Mit Instamax können Sie Fotos und Videos von jedem Benutzerkonto oder HashTag anzeigen. (Ziemlich viel, was Sie wollen)

Hier Demo, die Sie ausprobieren können - http://demos.codehandling.com/instamax_demo/instamax_live_edit.html

Prost :)