Fetch / Embed instagram images in your website

Fetch / Embed instagram images in your website

1. Create a client and get client id
   Go to following url and click on 'Register a new client' on top
   https://www.instagram.com/developer/clients/manage/
   Fill in the form
   
   Don't forget to enable implicit authentication
   
2. Retrieve your access token
   Go to https://instagram.com/oauth/authorize/?client_id=YOURCLIENTIDHERE&redirect_uri=HTTP://YOURREDIRECTURLHERE.COM&response_type=token
   You will be redirected to HTTP://YOURREDIRECTURLHERE.COM#access_token=XXXX
   Copy the access token from url
3. Find user id corresponding to client
   Your access code will be of following structure
   userid.somethingelse.somethingelse
   First portion of your access token will be your user id
4. Insert following javascript code

$(document).ready(function() {
    var clientid = $('#INSTAGRAM_CLIENT_ID').val(); // learn how to obtain it below
    var num_photos = 8; // how much photos do you want to get
    var acces_token = $('#INSTAGRAM_ACCESS_TOKEN').val();
    var userid = $('#INSTAGRAM_USER_ID').val();//'2214764568';
    if (clientid != '' && acces_token != '' && userid != '') {
        $.ajax({
            url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent?access_token=' + acces_token,
            dataType: 'jsonp',
            type: 'GET',
            data: {client_id: clientid, count: num_photos},
            success: function (data) {
                console.log(data);
                for (x in data.data) {
                    $('ul#footer_insta').append('<li><a href="' + data.data[x].link + '" target="_blank"><img src="' + data.data[x].images.low_resolution.url + '"></a></li>'); // data.data[x].images.low_resolution.url - URL of image, 306Ñ…306
                }
            },
            error: function (data) {
                console.log(data); // send the error notifications to console
            }
        });
    } else {
        alert("here");
    }
})

Replace 'INSTAGRAM_ACCESS_TOKEN', 'INSTAGRAM_CLIENT_ID', 'INSTAGRAM_USER_ID' with corresponding value.

<input type="hidden" id="INSTAGRAM_ACCESS_TOKEN" value="INSTAGRAM_ACCESS_TOKEN" />
<input type="hidden" id="INSTAGRAM_CLIENT_ID" value="INSTAGRAM_CLIENT_ID" />
<input type="hidden" id="INSTAGRAM_USER_ID" value="INSTAGRAM_USER_ID" />


<ul id="footer_insta"></ul>

Maps - enable scroll after first click on map only

Complete script for google map that will enable zoom on clicking in the map area only

<script type='text javascript' src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js">
<script type='text javascript'="">
    jQuery(document).ready(function(){
        var latitude = $('#map_latitude').val();
        var longitude = $('#map_longitude').val();
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 14,
                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(latitude,longitude),
                //Disable scroll wheel by default,
                scrollwheel: false,
                // How you would like to style the map.
                // This is where you would paste any style found on Snazzy Maps.
            // Get the HTML DOM element that will contain your map
            // We are using a div with id='map' seen below in the 
            var mapElement = document.getElementById('map');
            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);
            var marker = new google.maps.Marker({

                map: map,

                position: map.getCenter(),

                icon: 'images/google-map-cion.png'

            });
            // Listen to click event on map and enable zoom
            map.addListener('click', function() {
                map.set('scrollwheel', true);
            });


        }
    })
    

</script>

DEMO