pavelk2 / social-feed

JavaScript plugin that shows a user feed from the most popular social networks
http://pavelk2.github.io/social-feed-example/
MIT License
963 stars 304 forks source link

Cannot pull from instagram #264

Open BearBritches opened 7 years ago

BearBritches commented 7 years ago

I wanted to know if anyone had any thoughts as to why I cannot get the instagram feed to work?

$(document).ready(function(){
    $('.social-feed-container').socialfeed({
    facebook:{
    accounts: ['@marybaldwinuniversity', '@MaryBaldwinCollegeAlumniAssociation', '@mbusap', '@mbudining', '@graftonlibrary', '@marybaldwinadmissions'],  //Array: Specify a list of accounts from which to pull wall posts
    limit: 1,                                   //Integer: max number of posts to load
    access_token: 'xxx'  //String: "APP_ID|APP_SECRET"
},  
    instagram:{
    accounts: ['bear_britches', 'marybaldwinuniversity'],  //Array: Specify a list of accounts from which to pull posts
    limit: 1,                                   //Integer: max number of posts to load
    client_id: 'xxx',       //String: Instagram client id (option if using access token)
    access_token: 'xxx' //String: Instagram access token
},
    twitter:{
    accounts: ['@marybaldwinu', '#marybaldwin', '@MBU_Squirrels'],                     //Array: Specify a list of accounts from which to pull tweets
    limit: 1,                                   //Integer: max number of tweets to load
    consumer_key: 'xxx',          //String: consumer key. make sure to have your app read-only
    consumer_secret: 'xxx' //String: consumer secret key. make sure to have your app read-only
 },
        // GENERAL SETTINGS

template: "/wp-content/themes/MBU2018/bower_components/social-feed/template.html",
show_media:true,
length:400 //Integer: For posts with text longer than this length, show an ellipsis. }); });

HartLarsson commented 7 years ago

as explained to previous instagram users, the access you get is valid only for Your instagram page. You cannot get other instagram feed.

If you get the client_id and access_token correctly you can collect feeds only from your instagram.

BearBritches commented 7 years ago

I am pulling my account. Do I have the account name in correctly? In the sample document all accounts are listed with “@“ prior, but this is not reflected on instragram’s documentation. Is there additional documentation specifically on setting up a client in instragram? any help would be appreciated, thank you.

On Jun 21, 2017, at 8:14 AM, HartLarsson notifications@github.com wrote:

as explained to previous instagram users, the access you get is valid only for Your instagram page. You cannot get other instagram feed.

If you get the client_id and access_token correctly you can collect feeds only from your instagram.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pavelk2/social-feed/issues/264#issuecomment-310060047, or mute the thread https://github.com/notifications/unsubscribe-auth/AG8la3OCex2GABqAtYfInPxs9qEA2OUgks5sGQklgaJpZM4N_9L0.

HartLarsson commented 7 years ago

account generally have a @ in front of the page name

HartLarsson commented 7 years ago

the syntax you need to follow is the syntax of social-feed app.

and if you look inside the js code in the instagram part you will see:

 switch (account[0]) {
                        case '@':
                            var username = account.substr(1);
                            url = Feed.instagram.api + 'users/search/?q=' + username + '&' + authTokenParams + '&count=1' + '&callback=?';
                            Utility.request(url, Feed.instagram.utility.getUsers);
                            break;
                        case '#':
                            var hashtag = account.substr(1);
                            url = Feed.instagram.api + 'tags/' + hashtag + '/media/recent/?' + authTokenParams + '&' + 'count=' + options.instagram.limit + '&callback=?';
                            Utility.request(url, Feed.instagram.utility.getImages);
                            break;
                        case '&':
                            var id = account.substr(1);
                            url = Feed.instagram.api + 'users/' + id + '/?' + authTokenParams + '&' + 'count=' + options.instagram.limit + '&callback=?';
                            Utility.request(url, Feed.instagram.utility.getUsers);
                        default:

is quite clear the use of @, # or &

joaovpmamede commented 6 years ago

EDIT:

It seems I missed adding &scope=public_content. Explanation here.


@HartLarsson I'm having some issues as well.

This is my configuration:

instagram: {
  access_token :"xxx",
  access_type : "access_token",
  accounts: ["@foo"],
  client_id: undefined,
  consumer_key: null,
  consumer_secret: null,
  limit : "10"
}

access_token is correct (I got it by doing a curl to https://api.instagram.com/oauth/access_token ), client_id is set but it is being changed to undefined (maybe it's the lib doing it). I replaced my account with @foo but I'm the owner of that account so it should display everything correctly.

And I'm getting this on the console:

screenshot 2017-07-25 11 45 11

on this line of the code

ch1san commented 6 years ago

@BearBritches @joaovpmamede i just added userId: [your user id] to the options and changed the user.id to options.instagram.userId - works for now but probably not ideal

HartLarsson commented 6 years ago

@joaovpmamede the client_id is a value you setup in the javascript part in the page like:

instagram:{
    accounts: ['@YOURACCOUNT'],
    limit: 4, 
    client_id: 'YOURCLIENTID',
    access_token: 'YOURACCESSTOKEN'
},

and the parameter is not changed by any script. I've just tested the instagram part and for me works perfectly without any error.

campsjos commented 6 years ago

@joaovpmamede i had the same issue. The solution is setting the scope as public_content when requesting the access token: https://www.instagram.com/oauth/authorize/?client_id=CLIENTID&redirect_uri=REDIRECT-URI&response_type=token&scope=basic+public_content