Adding to the Globals
Add this file to the Globals File replacing the Access Token and User Id with the information sent from authorizing the account.
<!--- Instagram Access Token --->
<cfset request.instagram_access_token = "271118734.9b22670.04188663bbd14e2bb6090e52aa671c95">
<cfset request.instagram_user_id = "271118734">
<!--- grab the feed --->
<cfhttp url="https://api.instagram.com/v1/users/#val(request.instagram_user_id)#/media/recent/?access_token=#request.instagram_access_token#" method="get"></cfhttp>
<cfset request.instagram_images = ArrayNew(1)>
<cfset request.instagram_image_containers = 0><cfif IsJSON(cfhttp.fileContent) and StructKeyExists(DeserializeJSON(cfhttp.fileContent), "data")>
<cfset request.instagram_images = DeserializeJSON(cfhttp.fileContent).data>
<cfset request.instagram_image_containers = Ceiling(ArrayLen(request.instagram_images) / 3)>
</cfif>
Instagram Feed
Paste in the CF and Javascript to pull the images.
<div id="instagram_container">
<cfset request.image_counter = 1>
<cfloop from="1" to="#val(request.instagram_image_containers)#" index="i">
<div class="instagram_group_container"<cfif i GT 1> style="display: none;"</cfif>>
<cfloop from="1" to="3" index="x">
<cfif request.image_counter LTE ArrayLen(request.instagram_images)>
<cfset request.image_info = request.instagram_images[request.image_counter]>
<div class="instagram_image_info_container<cfif x EQ 2> middle</cfif>">
<div class="instagram_image_container">
<a href="#request.image_info.link#" target="_blank"><img src="#request.image_info.images.thumbnail.url#"></a>
</div>
<p class="instagram_image_comments">#val(request.image_info.comments.count)# comment<cfif val(request.image_info.comments.count) NEQ 1>s</cfif></p>
</div>
</cfif>
<cfset request.image_counter++>
</cfloop>
</div>
</cfloop>
</div>
<script type="text/javascript">
(function() {
var instagram_container = $("instagram_container");
var image_containers = instagram_container.select(".instagram_group_container").size();
var visible_container = instagram_container.down(".instagram_group_container");
var next_container;if (image_containers > 1) {
new PeriodicalExecuter(function(pe) {
if (visible_container.next(".instagram_group_container")) {
next_container = visible_container.next(".instagram_group_container");
} else {
next_container = instagram_container.down(".instagram_group_container");
}
visible_container.fade();
next_container.appear();
visible_container = next_container;
}, 5);
}
})();
</script>
subpages
- Auto Display Page Title
- Blog
- CSS Animations
- Drop Down Menu
- Email Subscription
- Google Fonts
- Google Maps API
- Header Videos
- Instagram Feed
- Layout Override
- On-Page Nav Scrolling
- Onecast / Latest Sermon
- Page Content
- Page Content Edit Buttons
- Parallax Scrolling
- Per Page SEO
- Permalink Conversion
- Popup Box
- Rotator / Event Box
- Sidebar Pop-out
- Site Search
- Slider
- Social Media Icons
- Split Navigation
- Staff Module
- Subpage Module
- TinyMCE Content Editor
- Twitter Feed
- Deprecated Add Ons