{"id":83235,"date":"2018-02-28T23:49:36","date_gmt":"2018-03-01T07:49:36","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=83235"},"modified":"2018-03-27T04:44:12","modified_gmt":"2018-03-27T11:44:12","slug":"beaver-builder-instagram-module","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/beaver-builder-instagram-module\/","title":{"rendered":"???? Introducing Instagram Feed Module: Now Display Your Instagram Posts Magnificently!"},"content":{"rendered":"

I am happy to introduce our latest module\u00a0to the PowerPack Family: Instagram Feed!<\/strong><\/a>\u00a0Now you can display the social shares and your posts on Instagram on your website\/blog as well with this awesome module!<\/p>\n

This module allows you to connect to your Instagram Account and show your Instagram activities wherever you want on the website. It is not limited to just displaying posts; there are lots of customizations that you can do to make your Insta Feeds stand out.
\n

\n\t
\n\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tFollow Us @Instagram\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t<\/a>\n\t\t\t<\/span>\n\t\t\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#beach\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#frnd\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>
\nAlthough it might seem tricky to integrate Instagram Feeds via the page builder but with the help of this add-on, it is made much simpler. You only need three ingredients – User ID, Access Token, Client ID<\/strong>. Once you have that, you can see your module live in action without even loading the page.<\/p>\n

Since this module is a part of the PowerPack family, you will get loads of functionality and alteration features. You can alter the Instagram feed display as per your need.<\/p>\n

Demo:<\/h4>\n

Click here for the demo<\/a>\u00a0of Instagram Feed.<\/p>\n

2 Different\u00a0Display Layouts<\/h3>\n

There are two different display styles that come\u00a0with this<\/p>\n

Grid Layout<\/h4>\n

Grid layout shows the Instagram posts in a grid view. You can choose the number of posts you want to show on the module as well.
\n

\n\t
\n\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#beach\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/p>\n

Carousel Layout<\/h4>\n

Carousel layout is another way by which you can linearly display your Instagram posts. Choosing this layout opens up the settings to make changes to the carousel. You can make multiple changes to the same as well using the settings.<\/p>\n

\n\t
\n\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#beach\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#frnd\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\n\t\t\t
<\/div>\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t
<\/span><\/div>\n\t\t\t
<\/span><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n

Other great features-<\/h3>\n
    \n
  1. You can change the count of images<\/strong> that are to be displayed on the module.<\/li>\n
  2. Choosing between the image from Low, thumbnail, and standard is also possible.<\/li>\n
  3. Sort the images by multiple parameters<\/strong> such as recent, liked, commented, and random.<\/li>\n
  4. Displaying\/hiding likes, comments<\/strong> are possible with simple toggle operations.<\/li>\n
  5. You can show a link to your Instagram Profile<\/strong> with custom text such as “Follow Us @ Instagram” with a proper Icon.<\/li>\n
  6. For the image, you can define how the image will look when it is being normally displayed and when someone hovers over the image. This helps in creating interactive hover effects<\/strong>.<\/li>\n
  7. If you wish to add a background, then you can add a color or add a gradient style background<\/strong> for the images as well.<\/li>\n
  8. You can customize the color of likes and comments<\/strong> as well.<\/li>\n
  9. If you want to make changes to the font, you can change the size, family, weight, transformation, style, line height, and letter spacing for both normal state and hover state.<\/li>\n<\/ol>\n
    \n\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"#beach\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"#nature\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t
    <\/span><\/div>\n\t\t\t\t\t\t\"instagram-feed-image\"\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n

    These are just a gist of what all changes that can be done in the Instagram Feed module. If you want to get an idea, here is a link to the demo of the module, check it out<\/a>!<\/p>\n

    Get the Power in your hands!<\/h2>\n

    Instagram Feed add-on is just the tip of the iceberg. The PowerPack Beaver Builder add-on has more than 50 creative modules that you can bring in your use and start designing amazing pages and sections with the help of Beaver Builder. And, if you are not in the mood for designing, you can simply select from our pre-designed library of templates which has 250+ templates<\/a> and more are coming!<\/p>\n

    If you do not have the PowerPack, get it here<\/a>!<\/p>\n

    If you like this update and want us to keep adding more to the PowerPack, do share it and spread the word!<\/p>\n

    Tell us what do you think of the new PowerPack’s addition by commenting down below!<\/p>\n","protected":false},"excerpt":{"rendered":"

    I am happy to introduce our latest module\u00a0to the PowerPack Family: Instagram Feed!\u00a0Now you can display the social shares and your posts on Instagram on your website\/blog as well with this awesome module! This module allows you to connect to your Instagram Account and show your Instagram activities wherever you want on the website. It…<\/p>\n","protected":false},"author":1811,"featured_media":84330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-83235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/83235"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=83235"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/83235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/84330"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=83235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=83235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=83235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}