{"id":6685,"date":"2020-01-25T13:04:18","date_gmt":"2020-01-25T07:34:18","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=6685"},"modified":"2023-04-07T11:27:50","modified_gmt":"2023-04-07T05:57:50","slug":"instagram-images-frontend","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/magento-instagram-connect-pro-extension\/instagram-images-frontend\/","title":{"rendered":"Instagram Images on Frontend"},"content":{"rendered":"<p>Once you paste the code and save page, you can see Instagram images on frontend.<\/p>\n<p><strong>Instagram images on homepage:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-6686\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page.png\" alt=\"\" width=\"1218\" height=\"575\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page.png 1218w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page-300x142.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page-1024x483.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page-768x363.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/11_instagram-images-on-home-page-600x283.png 600w\" sizes=\"(max-width: 1218px) 100vw, 1218px\" \/><\/p>\n<p><strong>Instagram page<\/strong>: Here you can see Instagram images block with filter option. Simply select user or hashtag from the option to filter images by. Hovering the images here show Instagram likes and comments count. Click image to open it in a popup in set view from backend.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6687\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page.png\" alt=\"\" width=\"1220\" height=\"496\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page.png 1220w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page-300x122.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page-1024x416.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page-768x312.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/12_instagram-page-600x244.png 600w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/p>\n<p><strong>Product Block View<\/strong>: Here you can see Instagram images in popup with product blocks set from backend. Hovering product block will show related hotspots on image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6688\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view.png\" alt=\"\" width=\"1136\" height=\"619\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view.png 1136w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view-300x163.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view-1024x558.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view-768x418.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/13_product-block-popup-view-600x327.png 600w\" sizes=\"(max-width: 1136px) 100vw, 1136px\" \/><\/p>\n<p><strong>Title with Link View<\/strong>: If you have selected title with link view from configuration and set titles and links related to them from backend, you can see them in frontend. Simply hover titles to see hotspots on image and click titles to get redirected to a particular page from backend.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6689\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view.png\" alt=\"\" width=\"1139\" height=\"611\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view.png 1139w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view-300x161.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view-1024x549.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view-768x412.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/14_title-with-links-popup-view-600x322.png 600w\" sizes=\"(max-width: 1139px) 100vw, 1139px\" \/><\/p>\n<p><strong>Instagram View<\/strong>: If you have selected Instagram view from backend, you can see Instagram view enabled in popup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6690\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup.png\" alt=\"\" width=\"1107\" height=\"610\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup.png 1107w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup-300x165.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup-1024x564.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup-768x423.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/15_instagram-view-in-popup-600x331.png 600w\" sizes=\"(max-width: 1107px) 100vw, 1107px\" \/><\/p>\n<p><strong>For Multiple Images of a Single Post<\/strong>:<br \/>\nAs Instagram has introduced adding multiple images i.e 10 in a single post. Extension also gives the facility to fetch such post with multiple images and show them under various popup views. You can approve such images and setup hotspot for the very first image of the multiple ones. Whether you select any of the 3 Instagram views, hotspot will be shown on the very first image and one can navigate to other images just by clicking navigation buttons on the images.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6691\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post.png\" alt=\"\" width=\"1083\" height=\"600\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post.png 1083w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post-300x166.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post-1024x567.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post-768x425.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/19_multiple-images-in-a-single-post-600x332.png 600w\" sizes=\"(max-width: 1083px) 100vw, 1083px\" \/><\/p>\n<ul>\n<li><strong>Instagram image block in sidebar<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6692\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar.png\" alt=\"\" width=\"1217\" height=\"541\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar.png 1217w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar-300x133.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar-1024x455.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar-768x341.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2020\/01\/16_instagram-block-in-sidebar-600x267.png 600w\" sizes=\"(max-width: 1217px) 100vw, 1217px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6658,"menu_order":7,"template":"","manualdocumentationcategory":[3285],"manual_doc_tag":[],"class_list":["post-6685","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-m1-instagram-connect-and-connect-pro"],"_links":{"self":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/6685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/6685\/revisions"}],"predecessor-version":[{"id":6693,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/6685\/revisions\/6693"}],"up":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/6658"}],"wp:attachment":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/media?parent=6685"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=6685"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=6685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}