Prestashop Social Feeds

The ever-increasing user base is also providing many opportunities for businesses to increase their user reach.

Advertisement on these platforms not only increase the visibility but also does promotion for your shop.

Hence, in order to increase the visibility & promotion of your shop, we are here with Prestashop Social Feeds module.

After the integration of the module, you can easily show all of your Instagram posts on your shop. The posts help you in a multi-faceted manner.

Firstly, they help you to highlight offers/promotions of the shop & secondly, they also help in leaving the long-lasting impression on customers.

Let me tell you how? These posts grow curiosity in customer’s mind & then customers surely want to explore more about shop/brand.

• Prestashop Social Feeds module is MultiShop compatible.
• Show Instagram feeds/posts on multiple pages of your shop.
• Display video posts in Instagram widgets.
• Choose to show the posts in pagination, slider or masonry view.
• Add Instagram feed block’s heading in multi-language.
• Either show caption on the image only on hovering the cursor or never.
• Also, choose whether you want to show a caption on the image always or not.
• Customize the view of posts by choosing a colour for caption background, caption & heading.
• Set the opacity of background as per your convenience between 0 to 1.
• Choose to show the publishing time of the posts on the image.
• Set the number of posts you want to show in one row.
• Enable image thumbnail to show border & padding around images.
• Set padding and border radius on Instagram posts.

• Firstly, Go to the Module Manager in Back office and click on ‘upload a module’.
• After that, Drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

API Configuration

Under API Configuration, the admin needs to specify the Instagram app ID and secret key.

Instagram Post Settings

• Select hooks: Select the position and the pages on which you want to show the Instagram feeds.
• Heading: Write the title for the Instagram Feed block.
• Heading Color: Select the colour for the heading.
• Select view type: Choose to show the feeds in the slider mode or pagination view.
• Show caption: Choose to show caption on the image on hovering the cursor. Also, choose to show caption on image always or never.
• Select colour for caption background: Select the colour of the caption text background.
• Select colour for the caption: Select the colour of your choice for the caption text shown on Instagram feeds.
• Set opacity for caption background: Set the opacity level between 0 to 1 for the caption background.
• Select colour for heading: Select the colour of your choice for the text of Instagram feeds heading.
• Show timestamp with the caption: Choose to show or hide publishing time of post on the Instagram feeds.
• Set number of posts in a row: Enter the number of posts you want to show in one row.
• Show image thumbnail: In order to show border & padding around images, enable this option.
• Padding for image: Add padding to the Instagram posts.
• Show border: Add border to the Instagram posts.
• Border radius: Enter the border radius.

So, this was all about the configuration part of the module. As we saw that we can only configure the module if we have the Instagram API keys.

Hence, let’s head directly to the part where we’ll know about the process to generate API keys.

In order to proceed to generate API keys, visit the link. After landing on the page, click on “My Apps” button.

On clicking the “My Apps” button, you will land on the following page. Here, you can see the list of all the previously created apps.

Now, in order to create a new app, click on the “Create App” button.

After that select the app category as “Something Else”.

Now, enter the name of the app & contact email to proceed.

Also complete the security check.

Upon creation of app, you will land on the dashboard of app. Here, go to the “Basic” under settings section.

Now, at the end of the page, you will find a button to add platform.

Click on the “Add Platform” button & after that select the platform as “Website”.

Here, you will need to add the URL of your website. Add the front-end URL of your shop & click on save changes to proceed.

Set up Instagram Basic Display app

After adding the URL of your shop, now go to products section. Here, you will need to set up a product that’ll help you to show Instagram feeds.

To fetch & show the Instagram feeds, proceed to configure the “Instagram Basic Display” product. Click on the set up button to proceed.

Now, click on the “Create New App” to configure Instagram basic display app.

Enter the name of the app & proceed.

After creating the app for Instagram basic display, you will find the App ID & App Secret needed to configure the module.

On this page, you will also need to fill OAuth redirect URL, Deauthorize callback URL & the data deletion request URL.

The URL which needs to be filled in the above fields should be in the following format.

https://www.example.com/module/wkinstagramfeed/accesstoken

Here “example” refers to the name of your website or shop.

So, this was all about the process to generate the API keys for the module. Enter these keys in the configuration settings to fetch the Instagram feeds.

Apart from the generation of API keys, you also need to add Instagram tester in order to access Insta account via the Facebook app.

Add Instagram Tester

In the above picture, you may notice a section of user token generator. In this section, there is an option to add or remove Instagram Testers.

Now, you need to click on this button in order to proceed to next step.

Upon clicking the “Add Instagram Tester” button, a popup will open. Here, enter the username of the Instagram account whom you want to add as Instagram tester.

After selecting the user & clicking on the “Submit” button, the Instagram user will be added as tester.

Now go to Instagram. After that navigate to “Apps and Websites” section under “Settings“.

Under “Apps and Websites“, you now need to go “Tester Invites” to view all the tester request.

Here, either you can accept/decline the tester request of the Facebook app via which you sent the request.

On clicking the “Accept” button, you are authorizing the Facebook app as Instagram Tester.

Upon accepting the request, status of Instagram Tester will also be updated from “Pending“.

After configuring the module successfully, you will find a new section of Instagram posts on the selected pages.

In the below screenshot of the homepage of the shop, you may notice that a new section of Instagram posts is now added.

You may also notice that a button is also available below the images to load more posts. This button is available only when you set the view to “Pagination” view.

Similarly, in case of slider view, posts are available along with button to slide to next post.

The Instagram feeds can also be shown in Masonry view :

Apart from the homepage of the shop, here is the view of some pages where you can show Instagram posts.

Category Page

Product Page

Now, let’s see what are the available configurable parts of the posts. In the below screenshot, I’ve highlighted each part as per the settings available in the configuration of the module.

So, this was all about Prestashop Social Feeds Module. I hope this document will help you in checking the functionality of the module in a better way.

Also, do let us know about your views in comments.

In case, if you are also looking for a module that helps you to sell your products on Instagram, then do check out the blog.

For any kind of technical assistance or query, please raise a ticket at http://webkul.uvdesk.com or send us a mail at support@webkul.com