Back to Top

Prestashop Social Feeds

Updated 16 October 2024

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.

Searching for an experienced
Prestashop Company ?
Find out More

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

Features of the Prestashop Social Feeds module

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

How to install the Prestashop Social Feeds module

  • 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.
Click to upload Prestashop Instagram Feeds module
Drop or select Prestashop Instagram Feeds module file
Prestashop Instagram Feeds module installed on prestashop

How to configure the Prestashop Social Feeds module

API Configuration

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

api configuration

Instagram Post Settings

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.

How to generate the API keys

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

Go to My Apps section

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.

Create App

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

Select purpose of creating app

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

Enter name of the app

Also complete the security check.

Complete the security check

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

Set up instagram basic display app

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

Add platform

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

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.

Enter front-end URL of your shop

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.

Go to products section

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

12-1

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

Create a new app to configure Instagram basic display

Enter the name of the app & proceed.

Enter the anme of the app

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.

Get the API keys

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.

151-1

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.

152

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

153

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

154

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

155

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

156

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

157

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

158

Instagram feeds – Front End View

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.

instagram feeds

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

instagram feeds

The Instagram feeds can also be shown in Masonry view :

instagram feeds

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

Category Page

instagram feeds

Product Page

instagram feeds

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.

instagram feeds

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.

Support

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

Current Product Version - 4.0.2

Supported Framework Version - 8.x.x, 1.7.x.x

Blog Version - 8.x.x, 1.7.x.x
  • Version 8.x.x, 1.7.x.x
  • Version 1.7.x.x
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content