Embed latest Instagram photo

Hi @dano. I would have to see your page to tell you exactly, so if you want to share your site public link, either here or via PM, and I can look for you :slight_smile:

More info on read-only links here: Share a read-only link | Webflow University.

Cheers, Dave

1 Like

Hi Dave,

At the moment Iā€™ve been testing it out at a site I host myself, Iā€™ve been tweaking the code here and there - so itā€™s a bit of a mess. The site is www.triposphere.co.uk

Thanks

Hi @dano, I took a look at your site, and it looks great :slight_smile: Webflow is changing the quality of those preview images, so it is in the script used to put those on the page. Have you tried to put a larger size thumbnail to see how that works?

Cheers, Dave

Thereā€™s a very simple solution at: http://embedmyphotos.com which works perfectly on smartphones (using their responsive option). And no need to register or provide Instagram account.

Will this work having the instagram feed on multiple pages across the same website? Or will it just work for one div?

Hi @StevenP, it should work on any page, you just have to give the elements the same class names and idā€™s or create a symbol for it. If I understand your question correctly :wink: Cheers, Dave

1 Like

Thanks, you totally understood itā€¦:slight_smile:

Is there a way to manipulate the instagram images for tablet and especially phone portrait? At the moment iā€™ve styled the images so they are centered in mobile portrait, but I want them to be decreased in size and displayed 2x2. Iā€™ve got a total of 6 images.

Hi @StevenP, you probably have to first get the class names used for the instragram embed, and then try to create custom media queries for those. I am not sure it will work, but you could test it. First look at the regular instagram embed, inspect element, get the class names for stuff. Create custom media queries for those classes and styles.

I hope that helps, if you start experimenting, feel free to start a new topic and share a link, I am happy to take a look.

Cheers, Dave :slight_smile:

Oki doki! Iā€™ll take a look at it later on! Thanks.

embedagram didnā€™t work on my web site :frowning:

Hi @Mustafa_Cihat_Gunduz, could you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

I am happy to take a look at the published/design site and see if there are any errors reported in the browser that might give an indication, what is the problem.

Cheers, Dave

1 Like

Hey @cyberdave! What about if you have two instagram accounts? My client has that since they are present att two different locations around Stockholm City and my guess to solve this would be to simply duplicate the codes and change the account ID? Or do you might have a better solution? :smile:

Hi @StevenP, sorry for my delayed response :-/ Probably the easiest thing is to just duplicate the codes. You do not need to duplicate the instagram script, just the script code that activates the plugin. Use different idā€™s for the elements where you plan to contain the images :slight_smile: Cheers, Dave

Hii all see wy jquery plugin http://ibacor.com/instagram.html

Worked like a charm! Danke schƶn! :smile:

1 Like

Can you use this with a Webflow hosted site or only if you have exported to wordpress?

Hi @jdesign, which plugin are you referring? The http://embedagram.com/ will work on a Webflow hosted site, as would probably any other jquery plugin, but I have not tested others :slight_smile: Cheers,
Dave

A much easier solution can be found @ http://instansive.com
You just add your Instagram-account, set your parameters and get your code, that you can paste to your webflow page.
I just tried it out on the bottom of the page iā€™m building. Took me about 20 seconds: http://ravnbo.webflow.io
It updates for free once a day.

4 Likes

Everything works fine but it shows every photo, I only want one to be displayed, the latest one?

1 Like