Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Display Instagram Feed & Followers for AMP HTML Blogger Themes

  1. Blogr-AMP
  2. Instagram
  3. Learn
  4. Widgets
Display Instagram Feed & Followers for AMP HTML Blogger Themes
19 March
Views
Add Instagram posts, feed, followers & following count is made super easy for AMP HTML integrated Blogger blogs by using amp-iframe component with ampaction-js an AMP HTML helper for blogs on Blogger

In a nutshell, AMP HTML already provides amp-instagram component to fetch a single post from any Instagram account by using the unique media ID supplied by Instagram.

Even though adding multiple or long list of AMP Instagram embeds for AMP pages is pretty much responsive & fast, we thought it would be much easier for Blogger users to maintain & grab their own Instagram feed dynamically -- as it is viewed at Instagram.

AMP HTML Instagram Feed Followers Following widget for Blogger Themes

Due to the above constraints on Blogger platform, we've developed a unique plugin to display Instagram feed dynamically using ampaction-js & Instafeedjs which Blogger blog users can easily use & integrate at their AMP HTML powered Blogger themes & templates.

Why AMP Instagram Feed (ampaction-js) plugin helpful?

  • Easy to install with various settings/options to deploy.
  • Dynamically display Instagram posts feed retrieved from a user account using a single markup.
  • Do not require update of amp-instagram tags/codes/markups to display new Instagram posts.
  • Displays posts/medias, Followers & Following count with options to enable/disable.
  • Retrieve up to 20 posts  -- Instagram restrictions for Sandbox mode.
  • Instagram posts filtering options -- by most commented, most liked, least commented, least liked, in random order or by its chronological order.
  • Customize & blend Instagram feed display to existing blog design.
  • Minimize blog page HTML size -- requires 1 single markup to display multiple Instagram posts.
  • And many more...

How to install AMP Instagram Feed on my Blogger Blog with AMP?

  1. At Instagram Developer page, get your userId, clientId & accessToken. This article shows you how: https://blog.irsah.com/2017/06/add-instagram-widget-for-blogger-themes.html continue to Step #2
  2. Check your theme if amp-iframe component have been included.
  3. Copy & paste amp-iframe supplied HTML markup
  4. Update & add in the unique Instagram userId, clientId and accessToken.
  5. Save your changes
  6. Refresh web page to see the results.

About ampaction-js


ampaction-js is an all-in-one unique helper for AMP HTML integrated web pages -- specifically built for Blogger blog integrated with AMP HTML.

Hosted on Github & files delivered using Content Delivery Network CDN by rawgit.com, easily enhance any Blogger blog theme with awesome features & contents powered by AMP components.

More information & working demo https://blogr-amp.github.io

ampaction-js Release: 0.9.0
Last Modified: March 2018

1.0 Get your Instagram userId, clientId & accessToken


If you do not have any of the above, follow the instructions in below article to get your Instagram userId, clientId & accessToken. Keep these unique Ids somewhere in your computer.

https://blog.irsah.com/2017/06/add-instagram-widget-for-blogger-themes.html continue to Step #2

2.0 Check amp-iframe availability


Do a quick check in your Blogger Theme codes to inspect if the amp-iframe component is available with your theme. The component tags should look like so:-

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

If you do not have any, add the above components within your theme <head> ... <.head> tag, then click Save Theme.

3.0 Copy amp-iframe tags & markup


Select & highlight below amp-iframe markup in your theme codes or use an HTML/Javascript gadget (which supports AMP integrations) & paste them in widget body.

<amp-iframe class="instafeed" frameborder="0" width="600" height="265" layout="responsive" resizable="resizable" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
src="https://cdn.rawgit.com/blogr-amp/ampaction-js/0.9.0/widget.html
?ampactions=instagram
&amp;get=user
&amp;userid={{ Instagram User ID }}
&amp;clientid={{ Instagram cliend ID }}
&amp;accesstoken={{ Instagram access token }}
&amp;sortby=random
&amp;limit=6
&amp;resolution=low_resolution
&amp;comments=true
&amp;likes=true
&amp;posts=Posts
&amp;follower=Followers
&amp;following=Following
&amp;breakpoint=428
&amp;columns=6
&amp;columnsmobile=2
&amp;headercolor=%23333333
&amp;headerbg=white
&amp;headerborder=rgba(0,0,0,.055)
&amp;feedbg=%23ffffff
&amp;feedbgopacity=.25
&amp;feedbgcolor=%23333333
&amp;feedcolor=%23ffffff
&amp;fontstyle=normal
&amp;fontweight=bold
&amp;fontsize=15
&amp;fontlineheight=1.428
&amp;fontfamily=Helvetica,Arial,sans-serif
&amp;fontcolor=%23333333
&amp;fontlinkcolor=%230066cc">
<div placeholder="placeholder">
  <p>Loading Instagram...</p>
</div>
<div overflow="overflow" tabindex="0" role="button" aria-label="Instafeed" class="text-center">
  <p>More from Instagram...</p>
</div>
</amp-iframe>

4.0 Customize amp-iframe Instagram Settings


  • Replace {{ Instagram User ID }} with your unique Instagram userId.
  • Replace {{ Instagram Client ID }} with your unique Instagram clientId.
  • Replace {{ Instagram Access Token }} with your unique Instagram accessToken.
  • Click Save to save your theme or widget.
  • Refresh your blog pages to see the results.

For further customization, refer below attributes to assign custom settings.

Attributes Description


Required


userid={{ Instagram User ID }}
Unique Instagram userId

clientid={{ Instagram client ID }}
Unique Instagram clientId

accesstoken={{ Instagram access token }}
Unique Instagram accessToken

sortby=random
Sorting of media retrieved from Instagram feed. Allowable values:

  • random
  • most-recent
  • least-recent
  • most-liked
  • least-liked
  • most-commented
  • least-commented

limit=6
The amount of posts to retrieve. If unassigned default values available. Allowable values:

  • numbers/integers

resolution=low_resolution
The retrieved media resolution form Instagram. If unassigned default values available. Allowable values:

  • thumbnail -- 150px x 150px
  • low_resolution -- 306px x 306px
  • standard_resolution -- 612px x 612px

Optional: Instagram Feed Display


comments=true
Displays the comment count in Instagram posts. Default true. Allowable values:

  • true
  • false - disable post comments

likes=true
Displays the likes count in Instagram posts. Default true. Allowable values:

  • true
  • false - disable post likes

posts=Media
Text displays a media/post counts. Default Posts. Allowable values:

  • strings/text
  • false -- Instagram media/post count disabled

follower=Followers
Text displayed at followers count. Default Followers. Allowable values:

  • strings/text
  • false -- Instagram follower count disabled

following=Following
Text displayed at following count. Default Following. Allowable values:

  • strings/text
  • false -- Instagram following count is disabled

breakpoint=428
The length in pixels when Instagram post feed is displayed for smaller screen sizes. Default 428. Allowable values:

  • integer/numbers

columns=3
Display Instagram images in columns for web views. Default 3. Allowable values:

  • integer/numbers

columnsmobile=2
Display Instagram images in columns for mobile views. Default 2. Allowable values:

  • integer/numbers

headercolor=%23333333
Header text color. Default #333333. Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

headerbg=white
Header background color. Default #ffffff. Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

headerborder=rgba(0,0,0,.055)
Header border color. Default rgba(0,0,0,.055). Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

feedbg=%23ffffff 
Instagram feed background color. Default #ffffff. Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

feedbgopacity=.25
Instagram feed hover effect opacity. Default 0.25. Allowable values:

  • integer/number for CSS opacity property.

feedbgcolor=%23333333
Instagram feed background color. Default #333333. Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

feedcolor=%23ffffff
Instagram feed text color. Default #ffffff. Allowable values:

  • CSS colors
  • Hex colors -- replace # with %23 (URIencoded)
  • RGBA colors

Optional: Font Style & Colors.


fontstyle=normal
Instagram feed hover effect color. Allowable values:

  • CSS foint style -- normal, italic

fontweight=bold 
Instagram feed hover effect color. Allowable values:

  • CSS font weight -- normal, bold

fontsize=15
Instagram feed hover effect color. Allowable values:

  • CSS font size in pixels

fontlineheight=1.428
Instagram feed hover effect color. Allowable values:

  • CSS font height in points

fontfamily=Helvetica,Arial,sans-serif 
Instagram feed hover effect color. Allowable values:

  • CSS font family.

If you have any questions, please use the comment section below or contact plugin contributors here for more details & assistance.

Instagram Learn Widgets
Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAdd current Instagram feed on Blogger blogs with AMP HTML, display media/posts, followers & following count, easy to install, less markup & more contents.Blogr-AMP: Display Instagram Feed & Followers for AMP HTML Blogger Themes
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Add Instagram posts, feed, followers & following count is made super easy for AMP HTML integrated Blogger blogs by using amp-iframe co....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Working...

Ooops! We're having trouble connecting...
Contact Us