Instagram Basic Display API plugin for Wordpress
Follow the directions here to create a Basic Display App for your Wordpress site: https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
Valid OAuth Redirect URIs
https://<youwordpresssiteurl.com>/wp-admin/
Deauthorize:
https://<youwordpresssiteurl.com>/
Data Deletion Request URL:
https://<youwordpresssiteurl.com>/
User Token Generator: Add the Instagram account here you will be pulling content from. You can pull content from one account at a time and accounts you own/have the credentials for.
You do not need to perform an App Review.
/**
* Instagram API Creds
*/
define('INSTAGRAM_CLIENT_ID', '<your instagram app id>');
define('INSTAGRAM_CLIENT_SECRET', '<your instagram app secret>');
After activating the plugin you will see a message in the Wordpress Admin asking you to authenticate the Instagram account you added as a test user in the previous step.
Performs a call to me/media
as described here:
https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media
Handles item pagination for large request limits.
Returns the json decoded response directly from the Basic Display API.
This PHP code pulls the six most recent items from your instagram account.
<?php
$instagram_posts = instagram_get_user_items( array( 'limit' => 6 ) );
if( !empty( $instagram_posts ) ):
?>
<div class="instagram-feed" data-chaos-modal-gallery="instagram">
<?php
for( $i = 0; $i < $instagram_posts->count; $i++ ):
$instagram_post = $instagram_posts->data[$i];
$title = htmlspecialchars( $instagram_post->caption );
$caption = htmlspecialchars( nl2br( $instagram_post->caption ) ) . htmlspecialchars( '<br /><br /><a href="'.$instagram_post->permalink.'">View Full Post by @'.$instagram_post->username.' on Instagram</a>' );
$thumbnail = $instagram_post->media_url;
if( !empty( $instagram_post->thumbnail_url ) )
$thumbnail = $instagram_post->thumbnail_url;
if( empty($thumbnail) )
continue; //Skip instagrams with no valid images.
?><div class="item">
<a href="<?php echo $instagram_post->media_url; ?>" class="chaos-modal-link" title="<?php echo $title; ?>" data-chaos-modal-caption="<?php echo $caption; ?>">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $title; ?>" />
</a>
</div><!--.item--><?php
endfor;
?>
</div><!--.instagram-feed-->
<?php
endif;
?>
The HTML is formatted for use with the jquery-chaos-modal script here: https://github.com/msigley/jquery-chaos-modal