Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Facebook wall feed app for Shopify

    Facebook wall feed app for Shopify is an awesome application which 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. FB 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 store end and you will be able to market your store in a unique yet very familiar way.

    Features

    • Displays the Facebook 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.

    Installation

    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:

    Workflow

    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.

    Facebook Wall Feed for Shopify Configuration

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

    Setting the configuration values of your FB Wall

    Go to Shopify and click on 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 Save button.

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

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

    Admin Configuration

    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 Like or Recommend button.
    • 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.

    Facebook Wall Feed for Shopify: Demo Details

    Moreover, check out the demo of this app:

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

    Support

    Also, for any kind of technical assistance, just raise a ticket at http://webkul.uvdesk.com/ and for any doubt contact us at support@webkul.com

    Current Product Version - 1.0.0

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index