jQuery Fetch And Display Instagram Photo Feeds By Tags – Instastory.js

jQuery Fetch And Display Instagram Photo Feeds By Tags – Instastory.js

Welcome back I am back with another blog post In this blog post be talking about that how you can fetch the Instagram feeds photos from any hashtags (that are not private) from this library called as instastory.js  so with the help of this library you will be fetching photos from the Instagram feed without having to use any kind of third party API for having to submit the the credential such as client ID and client secret so in this library there is certain methods which allows you to specify the the hashtag for example if you want to fetch photos regarding coding you can just write hashtag coding and then this library will fetch all the photos regarding for coding in that way you can search any kind of photos regarding any topic with the help of this library so all the source code of this application is given in the the description so just copy paste the code and if you want to extend this application then just edit this source code accordingly the screenshot of the application is also given below

 

Demo of Application

 

 

 

 

DOWNLOAD THE LIBRARY FILES AND DEMO PROJECT

 

Getting started

It is really simple to use the plugin all you need to to is include jQuery and the instastory.js file where you include your other scrips in the project.

<script src="jquery.min.js"></script>
<script src="path/to/script/instastory.js"></script>

Then the only thing left is to call the plugin on the DOM element that should be the container, call it with a hashtag that you want the history from.

$("#container").instastory("#coding");

As default the above line will give you the 6 most recent posts with the hashtag “coding” and will output the following html into the container element:

<a href="https://www.instagram.com/p/[POST URL]">
    <img src="[150x150 Image URL]" alt="[POST ACCESSIBILITY CAPTION]">
</a>

 

READ  Image Processing in Node.js Using Jimp Library - Coding Shiksha

Options

 

If you are not happy with the default options you can easily change the options by specifying the below options are you can create a separate object and in that object can declare the properties and then you can attach the top checked to the library

 

$("#container").instastory({
    get: "#coding",
    limit: 9
});

By using an object.

let options = {
    get: "#coding",
    limit: 9
};

$("#container").instastory(options);

 

Templating

When using the plugin you have the option to define a string of html to be used by the plugin when it is rendering your feed to the page. Simple example looks like this:

options: {
    get: '#dog',
    template: '<img src="{{image}}" alt="{{caption}}">'
}

 

Full Example Source Code

 

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>instastory.js - The simple instagram feed</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins|Titillium+Web:700" rel="stylesheet">
    <link rel="stylesheet" href="demo/demo-style.min.css">
</head>
<body>
    <header class="container">
        <h1>instastory.js</h1>
        <div class="sub">The simple instagram feed</div>
        <div class="buttons">
            <a href="https://github.com/kasperlegarth/instastory.js"><i class="fab fa-github"></i> View on Github</a>
            <a href="https://github.com/kasperlegarth/instastory.js/archive/master.zip"><i class="fas fa-cloud-download-alt"></i> Download zip</a>
        </div>
    </header>
    <main class="container">
        <section class="introduction">
            <div class="text">
                <h2>Introdoctuon</h2>
                <p>instastory.js is a jQuery plugin to make it easy for you to make an instagram feed from a hashtag or a user (that is not private). It uses a standard Ajax call to a standard instagram url witch provide the data in JSON format. That means no need for app token client ids.</p>
                <p>The only dependency to make it work is jQuery.</p>
                <p>
                    <strong>Getting startet</strong><br />
                    It is really simple to use the plugin all you need to to is include jQuery and the hashtaghistory.js file where you include your other scrips in the project.
                </p>
                <code class="highlight-me multiline"><script src="jquery.min.js"></script>
<script src="path/to/script/instastory.js"></script>
                </code>
                <p>Then you just need to call the plugin on a DOM element that you want to be a container for the images. <code class="highlight-me">$("#demo1").instastory("coding");</code> There are only one required parmeter, and that is the hashtag you want to show the feed from.</p>
                <p>This will give you the following output:</p>
                <div id="demo1"></div>
                <small class="note"><strong>Note!</strong> The styling is made for this demo only, it is not included in the plugin.</small>
            </div>
        </section>
    </main>
    <div class="playground container">
        <div class="controls text">
            <h2>Try it yourself</h2>
            <p>See the plugin in action</p>
            <hr>
            <h5>What do you want to generate a feed from? - Use # or @ like you would on instagram.</h5>
            <input type="text" id="hashtag-input" placeholder="E.g: @instagram or #summer">
            <h5>How many items do you want?</h5>
            <input type="text" id="limit-input" placeholder="E.g: 9">
            <button id="new-feed">Generate feed</button>
        </div>
        <div id="playground-result" class="result"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="instastory.js"></script>
    <script src="demo/demo.js"></script>
</body>
</html>

 

READ  Youtube Playlist Search Application in Javascript using Youtube Data API V3

demo.js

 

var tags = ['div', 'a', 'button', 'article', 'section', 'strong', 'i', 'input', 'script'];
var attr = ['class', 'src', 'href'];

function highlight(string) {
    string = string.replace(new RegExp('<', 'g'), '<');
    string = string.replace(/"(.+?)"/g, '<span data-type="val">"$1"</span>');

    for(var i = 0; i < tags.length; i++) {
        string = string.replace(new RegExp('<' + tags[i], 'g'), '<<span data-type="tag">'+ tags[i] +'</span>');
        string = string.replace(new RegExp('</' + tags[i], 'g'), '</<span data-type="tag">'+ tags[i] +'</span>');
    }

    for(var i = 0; i < attr.length; i++) {
        string = string.replace(new RegExp(attr[i], 'g'), '<span data-type="attr">'+ attr[i] +'</span>');
    }

    string = string.replace(/span>>(.*)</, 'span>><span data-type="plain">$1</span><');

    return string;
}

$(document).ready(function() {
    $('.highlight-me').each(function() {
        $(this).html(highlight($(this).html()));
    });

    $('#demo1').instastory('#coding');
    
    let playgroundOptions = {
        get: '@instagram',
        imageSize: 240,
        limit: 9,
        link: true,
        template: '<div class="post"><a href="{{link}}"><img src="{{image}}" alt="{{accessibility_caption}}"><span class="meta"><p>{{caption}}</p><span class="stats"><span class="likes"><i class="fas fa-heart"></i>{{likes}}</span><span class="comments"><i class="fas fa-comment"></i>{{comments}}</span></span></a></div>'
    };
    
    $('#playground-result').instastory(playgroundOptions);

    setTimeout(function() {
        $('#playground-result .post').each(function() {
            let currentCaption = $(this).find('.meta p').text();
            let newCaption = currentCaption;
    
            if(currentCaption.length > 350) {
                newCaption = currentCaption.substring(0, 347) + '...';
            }
    
            $(this).find('.meta p').text(newCaption);
        });
    }, 2000);
    

    $('#new-feed').click(function() {
        let newSource = $('#hashtag-input').val();
        let newLimit = $('#limit-input').val();

        if(newSource !== '') {
            playgroundOptions.get = newSource;
        }

        if(newLimit !== '') {
            playgroundOptions.limit = newLimit;
        }

        $('#playground-result').instastory(playgroundOptions);

        setTimeout(function() {
            $('#playground-result .post').each(function() {
                let currentCaption = $(this).find('.meta p').text();
                let newCaption = currentCaption;
        
                if(currentCaption.length > 390) {
                    newCaption = currentCaption.substring(0, 387) + '...';
                }
        
                $(this).find('.meta p').text(newCaption);
            });
        }, 2000);
    });
});

 

Leave a Reply

Close Menu