Streaming live at 10am (PST)

Embed latest Instagram photo


#1

Hello,

I am figuring out how to embed a latest Instagram photo post onto a landing page.
Instagram have their own embed code but that is only for that particular image.

The solution I need has to make the embedded image responsive.
I tried third party embed widgets but they're all fixed width and non-responsive.

I am open to alternative options. (Using IFTTT to get latest Instagram post to download to Dropbox or somewhere, then embed this particular image to the landing page)

Any assistance is greatly appreciated! Thanks!

PS: Is this the first Instagram-related post here?


#2

Hey,

I use http://snapwidget.com and it's highly recommended.

Best,
Naweed


#3

It was what I used. But the image displayed isn't responsive.


#4

I didn't read the responsive part, sorry.

Have a look at this http://www.plusgallery.net


#5

No worries.
Plusgallery looks good. However, I believe they require access to the file directory of the website. Which I do not have access to due to, well, webflow.

Thank you so much for your suggestions thus far!


#6

Hi @Reply, I am travelling, so not at my workstation, so I can't test this for a few hours, but you can try to embed your instagram photo embed into an iframe with width and height set to 100% of your parent container. If you want to retain some aspect ratio, then you add padding in percentage value, to your Bottom padding. For videos, this is 56.25% normally, but you can also play around with this with other embeds, to see how it work. You can definately embed responsive instagram photos, but I have to test with instagram what is best approach to use. I will test this later and then update my post.

Cheers, Dave


#7

Hi @cyberdave , thanks for your response. What I am trying to achieve is to have:

  • latest Instagram photo from a particular account
  • responsive image

Hence no manual update is needed on my end to manually update the site to change the image.

An alternative route I thought of is to set up an IFTTT recipe to upload an Instagram account to a Flickr account and then, set up a latest flickr image embed code. I found this jQuery code snippet here. But I have no knowledge of how to get it implemented.


#8

Hi @Reply, thanks a lot for your update. Ok, I checked out a free solution for you, that does require a little custom code and setup, but here are the instructions. Just follow this step by step, and you should be good to go....

Step 1

Go to http://embedagram.com and click the "Lets get started" link:

Step 2

From the three options listed, select the jQuery plugin option:

Step 3

At this point, you will be asked to authorize embedagram.com to your instagram account, so that the script has access to your image by your instagram account ID. After you authorize this, you will be taken to a screen that shows you your account ID, you will need this so just make a note of the account ID for use in a later step:

Step 4

Copy the following code to your Custom Code section of your site settings. You will need to add some custom styling to the HEAD to style the DIVs that will hold the images. You can style this anyway you want, I have styled this with very basic styling on the images, so that they float left and are display inline block. After that, you will need to paste in the script part also, and that I have already created, so you just need to copy and paste this stuff as shown below.

In the HEAD panel of Custom Code, put the following:

<style>
    
    .instagram div {
        
        display: inline-block;
        float: left;

        
    }
    
</style>

Next, paste in the script for the embedagram jQuery plugin, into the Before Body panel of your site:

<script type="text/javascript">
        $(document).ready(function() {
            $('#slideshow').embedagram({
                    instagram_id: 1440618534,
                    thumb_width: 313.33,
                    wrap_tag: 'div'
                });
        });
</script>
<script>

/*
 * embedagram - embed your instagram photos
 *   http://embedagram.com/plugin.php
 *
 * Copyright (c) 2011 Matthew Hokanson (http://h0ke.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 */
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0($){$.q.h({7:0(d){1 e={8:-v,4:u,2:\'n\',3:\'m\',5:l,f:0(){6 j},};1 d=$.h(e,d);6 g.k(0(){1 o=d;1 b=$(g);1 c="p://7.i/e/r/"+o.8+"/?s=?";c+="&4="+o.4+"&2="+o.2;c+="&5="+o.5+"&3="+o.3;$.t(c,0(a){b.9(a.9);o.f.w(b)});6 b})}})})(x);',34,34,'function|var|wrap_tag|link_type|thumb_width|limit|return|embedagram|instagram_id|html||||||success|this|extend|com|true|each|20|web|li||http|fn|plugin|callback|getJSON|100|999|apply|jQuery'.split('|'),0,{}))

</script>

A couple of notes on the code... in the script that shows "thumb_width", instagram provides images of width 150, 306, and 612. depending on the set width, embedagram serves an appropriate size. defaults to 100, but in my example, I am using 313.33px (I am using a container that is 940px wide, I want three images per row when shown on desktop mode, thus the image width of 313.33px. You can play around with this, to see how it works..

After updating your HEAD and Before Body panels of the Custom Code section in Site Settings, then make sure to save changes.

Step 5

The next step is to go into design mode in your site, and create a section, container or div block on your site, and then give that element a class name of "instagram", like in the example below. In my example, I put first a container on the page, then I dragged in a div to the container and gave it a class of "Instagram"

Make sure all your page changes are auto-saved (with the green checkmark) smile

Step 6

Now all changes should be saved, your custom code entered into the Site Settings and you are ready to publish. Publish the site, and then see how it looks !

You can also get more info from the Embedagram site, on the jQuery plugin, for more options to use in your jQuery call....

http://embedagram.com/plugin.php

If you need a primer in jQuery, go to http://www.codecademy.com/en/tracks/jquery and take the free course, (it is really good. I recommend it to ALL Webflowies...) if you take this course, you will know everything you need to know, about using jQuery on Webflow sites (or any site for that matter).

Try this out, see how it works for you... As I mentioned, you can do your own custom styling of the images, and put that custom styling as I showed in the HEAD section. What I like to do, is to create a blank page in my site, then I get create some sample placeholder images with same size as the thumbnail width (306px) and then do all my styling on the placeholder images (you can use any images for this, uploaded to the blank page on your site). After I have finished my styling, I publish the site and blank page, and I view the source of the page, and open up the css that the page is linked to, and I copy all of the settings of the image style class I used to style the image. I paste those css properties into the HEAD section for my Instagram class:

    <style>
        
        .instagram div {
            
            display: inline-block;
            float: left;
            
            // paste more css properties here .....

  }
        
    </style>

I hope this is what you are looking for, it will always show your latest instagram photos in your instagram account, and all image layout will be responsive, and be styled as you wish.

I really hope this helps, Let me know if you have any questions... I am really not a big instagram user anymore, so maybe other instagram users may have some good tips or tricks for you also... Cheers !


#9

@cyberdave You sir, deserve a medal!
This is amazing, just what I am looking for!

I will get this implemented soon and update once I can.

Side question, instead of pixels, for the width, can I use percentages?


#10

Hi @Reply, I think you can use percentages, it seems the script is just taking the value you put there, and assigning the value to the width property when the divs and images are created by the script... If you have issues, you can raise them here, but I really did not test that, so I cannot say for sure....

Cheers ! Glad to help smile


#11

Hi @cyberdave , so I tried implementing but for some reason I can't seem to get it to work.
I then proceeded what your code, and naming conventions, still no go.

Am I doing something wrong? Did I miss a step?

Preview link:
https://webflow.com/design/instagramembedtest?preview=d7ff1baaa956050ebb834c06a165d17d

Published site:
http://instagramembedtest.webflow.com/


#12

hey guys

I do have the same problem as Reply. Is there any solution?


#13

Hi @reply, sorry I missed this post. Are you still working on your instagram setup? @schuler_joel, thanks for your udpate, do you have a public link to your site you can share?

Since this is custom code, we help when we can, but these take low priority vs official Webflow dev issues and support.

Cheers, Dave


#14

Hi @cyberdave , I am still working on the Instagram set up. Was away on a business trip so I have yet to work around with it.

I understand the priority, and I do appreciate your assistance rendered here.

When you can, take a look at the Preview link and published site. Maybe you could point out what the issue is.

Cheers


#15

Same here, I do understand the priority and really appriciate the good support from webflow staff!

Here my public link:
https://webflow.com/design/schnauzug?preview=abf931463db87b14e4826b5ccb93a75b

please navigate to the site events and then to the blue container...

Many thanks for help!


#16

Sorry for bothering, but is there any news?


#17

Hi @Reply, your issue with instagram, is that you have copied the code verbatim that I posted above, but you have not changed your instagram ID in the code:

instagram_id: 1440618534,

You need to repeat steps 1, 2, 3 above and authorize embeddagram to access your instagram posts, before it will work, and to add your instagram id as reported by the embeddagram plugin instructions. Try checking that, and see if it helps.

Cheers, Dave


#18

Hi @schuler_joel, thanks for your update. In your case, you are missing the unique id 'slideshow' from the DIV with the instagram class, and the script cannot find any container or div to populate. Go to your events page, select the DIV with the instagram class, and add the unique ID 'slideshow' (without the single quotes).

Try that, and then see if you have any issues.

Cheers, Dave


#19

Been busy and finally got around to work on this.

Redid and followed the instructions from Step One but was not able to work it. Finally, I crawled your Preview site and found out that the Instagram Div block had a Div ID of 'slideshow'. To which I applied on my example and boom. It works now.

Thank you @cyberdave . This is a good work around and (almost) exactly what I want. Now to figure out how to center align the images on smaller screens.


#20

Hi Dave,

I was struggling with this until I found your instructions - thank you! I do have one question I wonder if you'd know the answer to... I'm using a percentage for my thumb_width so that they stretch the width of the page (20% each with 5 images) and the quality of the images is heavily degraded. I even tested with various sizes from 100 to 500 pixels and they're still rubbish quality. Is there somewhere else that will affect quality?

Appreciate any help, thanks!