Display your Instagram feeds as gallery on your WordPress site.
Try Pro Demo: HERE
Key Contents
1. Plugin Installation
2. Create Instagram Gallery Shortcode
3. Publish Instagram Gallery On Page/Post
4. Plugin Settings
Now, we are explaining about installation, configuration and publishing Instagram feeds using Instagram Gallery Pro plugin.
Plugin Installation
Plugin installation required plugin zip package. So, login to your Weblizar Account to download plugin from your account. Check the below screenshot:
We have downloaded the plugin package now it’s time to install it on your site. Now login to your WordPress site admin dashboard and go to following Page
Plugins → Add New
After that click on Upload Plugin button, provide the path of plugin zip package and click on Install Now button to start plugin installation.
After click on install button, WordPress will upload pluign package and install on your site. After successful install you will see activate plugin link same as screenshot.
Now plugin has been installed on site. You can access plugin menu highlighted into blow screenshot.
Create Instagram Gallery Shortcode
Now we will create a Instgram Gallery for our WordPress site. Go Add New Instagram page.
Instagram Gallery Pro menu → Add New Instagram
Follow the below screenshot & gallery creation steps now:
A) Click on plugin’s Add New Instagram menu
B) Add new Instagram gallery post page will open, give a Title for gallery here.
C) Instagram Setting – this is required setting for each instagram gallery you will create. Setting contains 2 required field:
- User ID
- Access Token
You can generate your own Instagram account User ID & Access Token. Follow the link bellow to generate your own setting credentials. This is a one time process, than generated id & token will use for all instagram gallery.
Now there 3 more various setting available in plugin.
D) Instagram Profile Settings – this settings are related to your Instagram profile, you can show or hide profile section, profile bio, follow button and can customize various color and font option.
E) Instagram Gallery Settings – this settings are related to gallery. Which type og gallery you want to create like recent gallery, feed gallery or hashtag gallery, which type of transition, animation, gallery & image layout, lightbox preview, font, color, and border etc your would like to apply on gallery images.
F) Instagram Other Settings – this settings cover the some end point setting of gallery like image limit, Read more button text, color and alignment.
G) Copy Shortcode – Now our overall gallery setting has been done. You can copy generated Shortcode from the the box. This will be use to display created instagram gallery on any Page/Post.
H) Publish – our instagram gallery is now ready to publish. So, click on Publish button to publish newly created instagram gallery.
Publish Instagram Gallery On Page/Post
We have created a instagram gallery shortcode in previous steps. Now we will publish this gallery shortcode on Page. Follow the below screenshot with simple instructions
A) Crete a new page using Pages → Add New menu.
B) Title – a new page will open, give a Page Title which best suites to your gallery like “My Instagram Gallery” or like that.
C) Instagram Gallery Shortcode Button – you can direct use this button to embed your created instagram gallery shortcode. Click on button, a pop-up window will appear, select a gallery shortcode from drop down list and click on Insert button to embed selected shortcode in your content editor. Or you can follow Step D bellow.
D) Paste Gallery Shortcode – During creation of shortcode, we have copied the generated instagram shortcode like [IGP id=76]. So, you can direct paste your shortcode into content editor. Or you can follow Step C above.
E) Select Template – This is an optional step and depends on your theme. If your theme has multiple page templates than your can choose one of the best template to display your gallery shortcode. We recommend only Full Width / Page with No Sidebar templates, because Full width template give a clear and beautiful view to a gallery .
F) Publish Page – to publish your newly created gallery page click on Publish button and your gallery page will publish immediately. You can view instagram gallery on page.
G) Output –
Plugin Settings
Instagram gallery plugin has 4 different types of settings. We are explaining each and every setting one by one.
1. Instagram API Setting
This is first & required setting appears on Add New Instagram post page. Two fields required into this setting section. User ID & Access Token are used into JS API to fetch information from your instagram account.
2. Instagram Profile Settings
These settings are related to Instagram profile section and more details are below:
* Show Profile – show or hide profile section from above the gallery
* Profile Content Background Type – you can background display as image or color, if you choose color than select a a color using next setting, if you choose image than upload a background image using next setting.
* Profile Section Background Color – allow to set background of profile section
* – allow to set background image of profile section
* – if you choose yes, than during scroll gallery page image will be fixed. if you choose no, than background image will scroll during gallery page scroll.
* – use to set background color of post count detail
*
* – use to set border color of profile image
* – use to set profile name text color
* – use to set profile bio and website text color
* – using this setting you can display your profile in two different style
* – use to set profile image size into two different size
* – use to set profile image layout in circle and rectangle layout
* – use to set follow button color
* – use to set text color of follow button text
* – you can set website link open in same tab or new tab
* – use to show or hide your instagram profile image on profile section
* – use to show or hide follow button on profile section
* – use to show or hide post count details on profile section
* – use to show or hide your website link on profile section
* – use to show or hide your instagram bio details on profile section
3. Instagram Gallery Settings
These settings are related to Instagram Gallery section and more details are below:
* Show In Gallery – what you want to show in your instagram gallery, you can show 3 types of content of gallery
- Recent – This gallery option fetch your resent images of instagram profile and make a gallery. Check recent instagram gallery demo click-here
- Feed – This gallery option fetch all recent images, videos added by Instagram users and make a gallery. Check instagram feed gallery demo click-here
- #(Hash) Tag – This gallery option used to make a # tag gallery. Just use a keyword and add a # symbol with keyword and enter into next appeared text box filed #HashTag. You can make hash tags like #animal, #love, #cars, #pet, #flower. Check instagram hash tag gallery demo click-here
* – this setting give a hover transition effect when you hover mouse pointer on a image of gallery. You can set up to 11 different types of hover transition effect on gallery. Check all transition effect into instagram gallery at demo click-here
* Animation – This is transition effect animation direction setting. Hover transition effect can take place form various different direction like top, bottom, right, left when you hover on gallery image. All transition has different direction animation effect.
* – You can set up to 7 types of gallery layout for gallery. Check all column instagram gallery layout at demo click-here
* – you can set 3 types of lightbox style for preview of gallery image. Note: Pretty Photo and Swipe box Does not support Instagram videos Use Nivo Light Box for this.
* – you can set two types of image layout for gallery images. you can display images in circle or rectangle layout. Try all lightbox style at demo click-here
* – you can set a color which take effect on image hover in gallery
* – you can set image hover color opacity, this set the transparency of color light or dark
* – when you hover on gallery images a statistical text data appears as image caption, total like, total comments. you can set text color of this statistical text data.
* – set a color for statistical text data which will be appears only in mobile device
* – use to set font style for statistical text data on image hover
* – if you want to convert all statistical text data in uppercase than set this setting yes.
* – if you want to show image Tile/Label/Caption on image hover than set it to yes.
* – this setting show your post date of image/video published on instagram
* – this setting show or hide your likes on image hover
* – this setting show or hide comment on image hover
* – if you want to set image border on gallery images than turn this setting on by selecting yes.
* – If Image Birder setting is on, than you can set the thickness of image border. just set a numeric value between 1-10 or which best suites you.
* – If Image Birder setting is on than you can also set image border color. just select a color which you want to apply on image border.
* – if you want apply more custom designs on galley than you can specify your css in this setting. just define your css without style tag.
4. Instagram Other Settings
* – this setting set a limit how many image do you want to display on page load. Set the image counter according to your gallery layout this will give you a five view of gallery.
* – you can specify a custom text on load more button according to you.
*
* – you can also specify a text color of load more button
* – you can specify the position of like Left, Center or Right bottom of gallery.
If you have a support question regarding this plugin you can contact through Support Forum OR Site.
