INSTAGRAM PHOTOS widget not working

5 replies · opened Aug 7, 2017

Vvictor16Aug 7, 2017

Hello, this widget not working?

SSemicolon WebSTAFFAug 8, 2017

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFAug 14, 2017

Hello,

Thanks for your Patience! We have just checked this out and the issue was with the Access Token which we have fixed. Please follow the Steps below to fix this yourself:

  1. Go to https://www.instagram.com/developer/ > Manage Clients > Register a New Client > Create a New Client (Add http://localhost/ in the Redirect URL) > Uncheck: Disable implicit OAuth (In Security Tab)

  2. Go to this URL: https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token and make sure that you replace the CLIENT-ID and REDIRECT-URI in the URL with their Actual Values. This will fetch you your Access Token.

  3. Open the js/functions.js File and find the following code:

SEMICOLON.widget.instagramPhotos( '36286274.14661be.9a5851191e5142c98c6d5ffd026db8e4', '14661befee3e4b4b973fc88adc617c41' );

then replace 36286274.14661be.9a5851191e5142c98c6d5ffd026db8e4 with the newly generated Access Token in the step above and replace 14661befee3e4b4b973fc88adc617c41 with the Client ID of your Newly Created Client.

  1. Then you can simply add your User ID in the data-user Attribute and the data-type="user" Attribute should always be User since Instagram has blocked Access for other types of Content.

To get your Instagram User ID, please visit your Instagram Profile URL in the Browser and then paste/hit enter the following code in the Developer Tools Console:

window._sharedData.entry_data.ProfilePage[0].user.id

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Vvictor16Aug 14, 2017

Thanks, it works.

One more problem, could the instagram url be opened in a new window instead of opening in the same window after clicking the thumbnail? Thanks.

SSemicolon WebSTAFFAug 15, 2017

Hello,

This is Definitely Possible!

Simply find the following code in the js/functions.js File:

if( instaGramType == 'user' ) {

	var feed = new Instafeed({
		target: instaGramTarget,
		get: instaGramType,
		userId: Number(instaGramUserId),
		limit: Number(instaGramCount),
		sortBy: instaGramSortBy,
		resolution: instaGramRes,
		accessToken: c_accessToken,
		clientId: c_clientID
	});

}

and replace it with:

if( instaGramType == 'user' ) {

	var feed = new Instafeed({
		target: instaGramTarget,
		get: instaGramType,
		userId: Number(instaGramUserId),
		limit: Number(instaGramCount),
		sortBy: instaGramSortBy,
		resolution: instaGramRes,
		template: '[
![attachment]({{image}})
]({{link}})',
		accessToken: c_accessToken,
		clientId: c_clientID
	});

}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard