Social Wall Feeds by Webkul for Shopify – [User Guide]

Social wall feed by webkul app for Shopify is an awesome application that will grab your Facebook posts automatically and display them on every page. You just need to put your Facebook account ID or account name with the access token and other values. SOCIAL WALL FEED lets you display your latest feed at your site’s front end by allowing you to put your Facebook username with a slider showing the tab’s content. This amazing app will enhance the look of the store as customers will be able to see your wall feeds on the store end and you will be able to market your store in a unique yet very familiar way.

Features

• Displays the Social wall feed on Store’s frontend.
• You can adjust the height and width from the backend.
• Admin can display the Facebook wall feed anywhere on the page as per your requirement.
• You can set values for configuration settings.
• The admin can set values for display settings and design settings.
• Cross-browser compatible.
• Easily configured and user-friendly.
• Displays Images with feeds.
• Displaying Avatar can be Enabled /Disabled from the backend.
• Display of wall text option can be enabled /disabled from the backend.
• Character length can be increased /decreased from the backend.
• Toggle speed can be increased/Decreased from the backend.

On Landing Page, you will find the “Try Now” button. Enter the shop URL where you want to install the app.

Now you need to install the app:

After the installation, you need to buy the monthly plan available for this app. The app will list here:

After clicking on the app you will land on the Home Page of the app.

• Once you install the application successfully, visit your theme page by clicking example.myshopify.com/admin/themes. Instead of example.myshopify.com, you need to specify your shop name.

Then liquid files menu will appear:

After clicking on ‘themes.liquid’ menu pastes the following code at any place where you want to display the Facebook wall.

{{ '//shopify.webkul.com/shopify-facebook-wallfeed/css/jquery.webkul.fb.wall.css' | stylesheet_tag }}{{ '//shopify.webkul.com/shopify-facebook-wallfeed/css/jScrollPane.css' | stylesheet_tag }}{{ '//shopify.webkul.com/shopify-facebook-wallfeed/js/jquery.webkul.fb.wall.js' | script_tag }}{{ '//shopify.webkul.com/shopify-facebook-wallfeed/js/jquery.mousewheel.js' | script_tag }}{{ '//shopify.webkul.com/shopify-facebook-wallfeed/js/jScrollPane-1.2.3.4.min.js' | script_tag }}

Click on the Save button after pasting the above code. Now after saving the code go the front-end, the Facebook Wall will be displayed at every page according to the place where you have pasted the code and default configuration values saved during installation.

Go to Shopify and click on the Apps menu. All your installed apps will get displayed then click on FB wall link or click on App preferences option of the app, you will get redirected to the Facebook configuration page.

You can also change the configuration settings for FB Wall. Once you install the application you will redirect to the welcome page. This page will consist of all the instructions which you need to follow to use this application.

Set the configuration values for your FB wall by clicking on different tabs.
The Facebook Configuration page will consist of four tabs:

• Configuration Settings
• Display Settings
• Design Settings
• Information

You can click on these tabs for changing the values of different settings. Default values are already set while the installation of this application, you can change them according to your requirement.

For Example: If you want to set the values for Display Settings, click on Display Setting Tab, fill the details and click on the Save button.

Same as Display Settings you can change Configuration and Design Settings by clicking on their corresponding tab.

Further, the Facebook wall will display like this after setting configuration values at the bottom of the page.

The app will be installed by the Admin & then the admin only will be configuring and managing the display settings and design settings of the app;
Admin has full control over the app from the backend. He enables the app and enters all the necessary credentials & Fields required to be filled in the app:

• Admin enters the Facebook ID and Facebook Like ID.
• He selects the Language.
• He Chooses to display the Like or Recommend button.
• Further, admin enters the header text and link.
• The admin enables comments & to display the number of comments.
• Admin configures and selects the Design settings which contains:

-Height & Width, Show Like Button, Show Like Box, Show Faces, Show Guest Entries, Show Group Url, Show Page Url, Show Date, Show Avatar, Show Media Image, Enable Wall Text, Label for More, Label for less, Show Upper Header, Show Comments and many more…

• Admin configures and selects the Display settings which contains:
  • Background Transparent
  • Wall Background Color
  • Wall Post Color
  • Comment Background Color
  • Also, Wall Post Comment Color

• Consumer Key & Access Token is also managed by the Admin.
• Admin can set the location anywhere on the entire page.

So this was the whole process for displaying Facebook Wall feed at your site’s front-end.

Moreover, check out the demo of this app:

Front End Demo: https://social-apps.myshopify.com/pages/fb-wall/

Moreover, check out Webkul Blogs for more!