14
Instagram Connect Pro © MageComp.com Instagram Connect Pro Extension User Manual Instagram Connect integrates Instagram with your Magento Store to display Instagram images based on user names or hashtags. Table of Content 1. Extension Installation Guide 2. Configuration 3. Home Page Settings 4. Product Page Settings 5. Popup Settings 6. UTM Tracking Settings 7. Updating & Approving Images 8. Approved Images Manager 9. CMS Page Setting 10. Instagram Images on Frontend 11. Use Instagram as widget 12. Deactivation of Extension in Case of Emergency 13. FAQs

Instagram Connect Pro Extension User Manual · Instagram Connect Pro Extension User Manual Instagram Connect integrates Instagram with your Magento Store to display Instagram images

  • Upload
    others

  • View
    43

  • Download
    0

Embed Size (px)

Citation preview

Instagram Connect Pro © MageComp.com

Instagram Connect Pro Extension

User Manual

Instagram Connect integrates Instagram with your Magento Store to display Instagram

images based on user names or hashtags.

Table of Content

1. Extension Installation Guide

2. Configuration

3. Home Page Settings

4. Product Page Settings

5. Popup Settings

6. UTM Tracking Settings

7. Updating & Approving Images

8. Approved Images Manager

9. CMS Page Setting

10. Instagram Images on Frontend

11. Use Instagram as widget

12. Deactivation of Extension in Case of Emergency

13. FAQs

Instagram Connect Pro © MageComp.com

1. Extension Installation Guide

Go to My downloadable products. The file that you download normally is a zip or tgz

file.

It’s required to disable cache in the administration panel of your site. Go to

System/Cache Management. Choose all caches and take action “Disable” then submit.

Also disable the Compilation if it is ON. So, make sure that Caching and Compilation is

disabled before installing the extension, you can enable it again after the installation.

Use FTP client (such as Filezilla, WinSCP, cuteFtp) to upload or copy all folders in the zip

package to your Magneto site root folder. This will not overwrite any existing files, just

add new files to the folder structure.

You will need to install the extension in your custom theme if you are using. Just make

sure about these files to be uploaded in custom theme.

app/design/frontend/default/default to

app/design/frontend/YourThemeFolder/PackageFolder

skin/design/frontend/default/default to

skin/design/frontend/YourThemeFolder/PackageFolder

After uploading is done, enable the Cache and if you keep Compilation On then re-run

the Compilation.

Navigate to System/Configuration, if you can see the extension tab, it is installed

properly.

Now if you get Access denied error when click on the extension tab, you need to log out

admin panel and log in again.

Go to front-end and try to process, make sure that everything is OK.

2. Configuration

once you have successfully installed the extension, go to System Configuration to

configure the extension for use. Here you can find various settings for the extension.

Instagram Connect Pro: The option to enable or disable extension.

User Authentication: Add your client id & secret id and click button to authorize your

Instagram account.

Read blog about how to get Client id & Secret id for Magento Instagram Extension

Instagram Connect Pro © MageComp.com

Update Images By: Select option to update Instagram images by, either users or

hashtags.

Users: type self to fetch your Instagram account images.

No. of Images to Fetch: Enter number of images to fetch based on usernames or

hashtags added.

No. of Images to Show on Instagram page: Enter number of images to show on

Instagram page.

Show Instagram Images in Left Sidebar: Set YES to show Instagram images in left

sidebar.

No. of Images to Show on Left Sidebar: Enter number of images to show in left sidebar.

Show Instagram Images in Right Sidebar: Set YES to show Instagram images in right

sidebar.

No. of Images to Show on Right Sidebar: Enter number of images to show in right

sidebar.

3. Home Page Settings

Show images on home page: Set YES to show images on homepage

Number of images to show on homepage: Enter the number of images you want to

show on homepage

Instagram Connect Pro © MageComp.com

4. Product Page Settings

Show images on product page: Set YES to show images on product page

Number of images to show on product page: Enter the number of images you want to

show on product page

In More View Section: Set YES to show images in more view section.

In Product Detail Section: Set YES to show images in product detail section.

In Product Tab Section: Set YES to show images in product tab section.

5. Popup Settings

Select Instagram Popup View: Select one of the three views of Instagram popup to

show in frontend.

Auto Play Video in popup: Select YES to auto play Instagram videos in popup.

Instagram Connect Pro © MageComp.com

6. UTM Tracking Settings

To track the record of visits and Sale made through Instagram, you can enable UTM

tracking for Google Analytics to analysis the data.

URLs With UTM Tracking: Enable UTM tracking.

Campaign Name: Set campaign name for UTM Tracking.

Campaign Medium: Set campaign medium for UTM Tracking.

Campaign Source: Set campaign source for UTM Tracking.

7. Updating & Approving Images

Once you have successfully configured the extension, go to Instagram New Images.

Here you can find a button “Update Images List”. Click it to fetch new Instagram images

based on the settings you selected while configuration. Once the images are fetched,

you can approve or delete them as per your requirement.

You can see all the approved images at Instagram Approved Images. You can even

delete them by clicking on each.

Instagram Connect Pro © MageComp.com

8. Approved Images Manager:

The extension facilitates you to provide to edit image information. Go to Instagram

Approved Images Manager where you can see all the approved images enlisted. You

can edit image information clicking on respective image.

Once you click to edit, you can see various feed options to set. You can set 6 feeds settings to

serve your purpose.

For Instagram View: You don’t need to set any options for this view as it shows the same view

as Instagram app.

For Title With Link View: Set various titles, link URLs and hotspot positions by dragging and

dropping pin on image.

Title 1: Add title for the first image hotspot.

Link URL for Title 1: Set URL to redirect users on a page on title click.

Instagram Connect Pro © MageComp.com

Position-Top & Position-Left: Simply drag and drop pin on the image parts to

automatically set top and left positions for hotspot.

For Product Blocks View:

Position-Top & Position-Left: Simply drag and drop pin on the image parts to

automatically set top and left positions for hotspot.

Product ID 1: Set related product ID to show in product block view in popup.

Instagram Connect Pro © MageComp.com

9. CMS Page Settings

After you have successfully linked the images, it’s time for setup to show them on

frontend. Simply go to CMS Pages and choose the page and go to its content tab.

Paste the below code anywhere in the content area to showcase images on frontend.

{{block type="core/template" template="instagram/homepage.phtml"}}

10. Instagram Images on Frontend:

Once you paste the code and save page, you can see Instagram images on frontend.

Instagram images on homepage:

Instagram Connect Pro © MageComp.com

Instagram page: 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.

o Product Block View: Here you can see Instagram images in popup with product

blocks set from backend. Hovering product block will show related hotspots on

image.

Instagram Connect Pro © MageComp.com

o Title with Link View: 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.

o Instagram View: If you have selected Instagram view from backend, you can see

Instagram view enabled in popup.

Instagram Connect Pro © MageComp.com

o For Multiple Images of a Single Post:

As 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.

Instagram Connect Pro © MageComp.com

Instagram image block in sidebar:

11. Use Instagram as widget:

Instagram extension can also be used as widget. For that go to CMS Widgets and click

on “Add New Widget Instance”. Select type as “Magecomp Instagrampro” and select

design theme. Add widget Title and enter Sort Order. From layout Updates set “Display

On” as where you want to display Instagram block through this widget. Also select Block

Reference to position the widget block on the page.

Instagram Connect Pro © MageComp.com

o Once you have set widget, you can see it on a page and position where you

have set.

12. Deactivation of Extension in Case of Emergency

Manually delete all the files and content from following folders in your Magento root:

var/cache/*

var/session/*

Make sure you’ve uploaded all files from the downloaded package.

Go to app/etc/modules/Magecomp_Instagrampro.xml and replace

<active>true</active> with <active>false</active>

Then repeat Step 1 and if something goes wrong, please contact us at https://magecomp.com/support/

13. FAQs

What if I get “Access denied” error after installation of the extension?

Whenever you get Access denied error while clicking on the extension tab after

installation, log out admin panel and re-login.

How can I display the Instagram images in other CMS pages?

The extension facilitates to display Instagram images on frontend in any CMS page

simply by pasting the below code in content part of CMS page. {{block type="core/template" template="instagram/homepage.phtml"}}