Custom javascript functions

Custom share buttons with javascript - Facebook, Twitter, Pinterest

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a class="fb-share" href="http://www.facebook.com/sharer/sharer.php?u=http://url/to/your/page"><i class="fa fa-facebook"></i></a>

<a class="tw-share" href="http://twitter.com/intent/tweet?status=custom-title-you-want-to-share+http://url/to/your/page"><i class="fa fa-twitter"></i></a>

<a id="pinterest_share" href="#"><i class="fa fa-pinterest"></i></a>

<div class="hidden" id="pinterest_wrap">
    <a href="https://www.pinterest.com/pin/create/button/" >
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>
</div>

<script>
$(function () {
    $('#pinterest_share').click(function(){
        $('#pinterest_wrap').find('span').trigger('click');
    })
   $('.fb-share').click(function (e) {
        window.open($(this).attr('href'), 'Share on facebook', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
        return false;
    });
    $('.tw-share').click(function (e) {
        window.open($(this).attr('href'), 'Share on twitter', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
        return false;
    });
});
</script>
<style>. hidden{display:none;}</style>

DEMO:

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&amp;redirect_uri=HTTP://YOURREDIRECTURLHERE.COM&amp;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>