This post was sponsored by Serosensa Creative - the creative agency I work at - who allowed me to spend some time writing this up for all you lovely readers out there. Var feed = new Instafeed() These are the closing tags from var feed new instanceĪnd there you have it - that’s everything you need to do to get a live instagram feed on your site! You can read more about doing this in the readme that can be found here Anyway, so here’s how we implemented a feed: There’s a host of ways you can implement certain types of feeds, whether you want it to grab your own feed, or search for a specific hashtag.This will need to be ABOVE the code we are about to discuss in the next point (but doesn’t need to be above the div tag we made in point 0). Second things first: Make sure you’ve included the instafeed.js file in your code.To generate a free Instagram feed for your website on Pixlee, you just need to enter your email address, a password, and sync your account with your Instagram profile. If it didn’t, I implemented it by putting the following code on my site: There are free ways to add an Instafeed to your site, such as Pixlees Free Social Feed, that are simple and easy to use- perfect for any type of lifestyle blog or business. Once you’ve figured out where you want the Instagram feed to sit on your site, give the element an id of instafeed.That really long client ID is important, as we’ll need that later. ![]() Once you’ve filled that in, you will see some details.You’re now on - fill in that pesky form!.You should now be on - can you see where it says ‘Register a New Client’ towards the top-right-hand corner? Click that button.Then you should be taken to - you’ll see a button on there that says ‘Register Your Application’.Firstly, go to - it’ll ask you to log in (if you’re not already) When you add Instagram feed on Shopify website, it can help your website to increase social proof, user engagement, reduce bounce rate, and increase your.This can be a little awkward, but follow this and you’ll get it working: If this doesn’t make sense, here is an example: My instagram account can be located at Therefore, my account name is sunilsandhu Plop this into the smashballoon link and it’ll give you your user id - it’s quite long but make sure you copy the whole damn thing, as you’ll need it in a bit. ![]() To get this, simply visit and type in your instagram account name. It’s the magical JS code that you’ll have to play with (a little) to get the thing to work. This is a case of simply adding the instafeed.js file from this github link: There’s no need to tamper with it, it simply works. Let’s go through each bit and explain what you need to do. The following bits are needed to make the Instagram API work:Ĥ - magical JS code to activate the feed (more on this later) We have options here.) You can check out the code below.Don’t worry, you can make the feed look way better than this! We want to create a new variable which will contain the parameters of our Instagram feed which is displayed on our website (The tag which we’re targeting, the size or resolution of the images, ordering, number of images, and a bunch more. We’re going place this code within our script tag that we just created. See my screenshot to see the code I placed and to see where I placed it. We’re going to add that a div to our code and give it that id. The Instafeed.js script looks for a div with the id “instafeed”. ![]() We’re not going to go over exactly what the authentication process via oAuth and the rediect_uri is here in this tutorial, but if you have questions Instagram has some information you can check out as well as running a couple Google searches. With over 300 million daily images posted to instagram, it is the number one social network for sharing images and. Give your Client ID an Application Name, a Description, as well as Website and Redirect URI, fill out the CAPTCHA and hit the “Register” button to create that new Client ID. Display your instagram photos on your site. NOTE: Before being able to create a new client, you may need to confirm your phone number on Instagram. We will want to create a new “client” for this feed project. You’ll want to log into your Instagram account and go to this link to find the page where you will be able to register a new client. These benefits are numerous and very real, hence the popularity on many e-commerce sites. You can download the Instafeed.js file for free here at this link and save the. Instagram feedsor, as they’re more commonly known as, Instafeeds are widgets placed somewhere on a website that extend the benefits of your Instagram account onto your site. Instafeed.js is a crazy simple way to grab an Instagram feed and pop it into your website.
0 Comments
Leave a Reply. |