Facebook

Tuesday, March 1, 2016

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>