Facebook Reviews Widget Tutorial

Intro

Elementor Facebook Reviews widget gives you the ability to embed Facebook reviews into your page through Elementor Page Builder.

Facebook is one of the major social media networks with many influential people and organizations use it as a way to communicate, and share their ideas and opinions on a wide variety of topics, from science to humor, from politics to entertainment.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Click here to check Premium Facebook Reviews Widget demo.

Key Features

Content

• Access Credentials
• Display Options
• Page Settings
• Review Settings

1. Access Credentials

Here we go with the initial setup, connect the widget to your Facebook account or Facebook page.

• Log in with Facebook: You have to log in with Facebook to fetch automatically the ID and Access Token Fields.
• Clear Cached Data: Clear cached reviews in Premium Facebook Widget.

2. Display Options

In the Display Options tab, you can set how to display the content of Elementor Facebook Reviews Widget on your site.

• Skin: There are three 3 skins available to show your reviews.
  • Classic: Show reviewer image, name, date of review, rating then reviewer text.
  • Cards: Show reviewer text, reviewer image, rating, name then date of review.
  • Bubble: Show your reviews in a kind of bubble view.
• Facebook Icon: Show/hide Facebook icons in with each review.
  • Horizontal Position (%): Set horizontal position for Facebook icon in percentage.
  • Vertical Position (%): Set vertical position for Facebook icon in percentage.

PAGE

• Place Info Next to Reviews: Enable this option to place info (image, name, rating and rating stars) beside reviews. So, they will be in one row.
  • Reviews Width (%): Set reviews column width in percentage.
  • Vertical Alignment: Align page info to top, center and bottom.
• Replace Page Image: This option will allow you to enable/disable replacing the original image that comes from your page on Facebook with another one of your choices.
  • Upload Image: Upload a different image for the page.
  • Image Size: Set image size for the uploaded image.
• Display: Select how to display your page logo, name and average rating starts from block or inline.
• Image Alignment: Align image to top, center and bottom. (available with inline display)
• Text Horizontal Alignment: Align page name to left, center or right. (available with inline display)
• Text Vertical Alignment: Align page name to top, center and bottom. (available with inline display)
• Direction: Set the direction for your page LTR or RTL which is very helpful for Right to Left websites. (available with inline display)
• Page Alignment: Align page logo, name and average rating stars to left, center and right.

REVIEWS

• Reviews/Row: Select the number of reviews per row in Elementor Facebook Reviews Widget.
• Image Position: Set reviewer image position: above name (reviewer), left of name (reviewer) and left of all content.
  • Text Alignment: Align review text to top, center and bottom. (available with left of name).
  • Image Alignment: Algin image to top, center and bottom. (available with left of all content).
• Layout: Select the grid layout style even or masonry.
  • Even: Show reviews beside each other but the height isn’t the same.
  • Masonry: An adaptable grid that adjusts the height depending on the reviews.
• Content Alignment: Align review content to left, center, right and justify. (available with Above name).
• Direction: Set direction of Review image, text and stars RTL or LTR.
• Carousel: Enable/disable carousel for Elementor Facebook reviews.
  • Infinite Autoplay: Enable/disable infinite liner carousel autoplay.
    • Rows/Column: Set how many rows to show per column.
    • Autoplay Speed: Set the autoplay speed for the infinite autoplay carousel in ms.
  • Auto Play: Enable or disable autoplay.
    • Autoplay Speed: Set the autoplay speed for the carousel in ms.
  • Navigation: Select navigation type for carousel none, arrows, dots and dots & arrows.
  • Arrows Position: Set the arrows’ position in pixels or em.
  • Dots Position: Set the dots’ position in pixels or em.
  • RTL Mode: Enable or disable RTL mode. This option is recommended for the right to left languages.

3. Page Settings

Page Settings, in this tab you can show or hide Facebook Page elements.

• Page Info: Show/hide all page info elements.
• Page Image: Show/hide page image.
• Page Name: Show/hide page name.
• Page Rate: Show/hide page rate.
• Number of Reviews: Show/hide the number of reviews that have been submitted to this page on Facebook.
• Rating Stars: Show/hide page rating stars.

4. Review Settings

Review Settings, in this tab you can show or hide Facebook reviews elements.

• Show Reviewer Image: Show/hide reviewer image.
• Show Stars: Show/hide review stars rating.
• Show Date: Show/hide review date.
  • Date Position: Set date position above rating stars or below them. (available with Show Stars)
  • Date Format: Set review date format: DD/MM/YYYY, MM/DD/YYYY or Full Date.
• Show Review Text: Show/hide review text.
  • Hide Reviews With Empty Text: Show/hide empty text reviews.
  • Review Words Length: Set how many words to show per review.
  • Read More Text: Change read more button link text.
• Filter by Rate: Enable/Disable “Filter By Rate” option, which will allow you to display Facebook Page Reviews based on specified customers’ rating stars.
  • Min Stars: (If “Filter by Rate” option is Enabled) you can set the minimum Star rating for reviews from Facebook Page.
  • Max Stars: (If “Filter by Rate” option is Enabled) you can set the maximum Star rating for reviews from Facebook Page.
• Reviews Limit: Set how many reviews to show per widget.
• Rating Schema: Enable/disable “Rating Schema”. This option improves SEO as it helps search engines to understand your website better, in addition, it improves website chance for ranking position within search engine results.
  • Schema Type: Select the type of schema for your rating:
    • Place
    • Organization
    • Service
• Reload Reviews Once Every: Set how often to reload Facebook Page Reviews (to get latest reviews), so you can set it to Reload once every: Hour, Day, Week, Month or Year. [Week or Month is recommended]

Style

• Images
• Page Info
• Review
• Reviewer Name
• Date
• Review Text
• Review Container
• Readmore Text
• Container
• Carousel Arrows
• Carousel Dots

Images

Customize and style Page and Reviewer images.

PAGE

• Size: Set the size of the page image or you can keep the default value as it is.
• Border Type: Set a border type for the page image. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius using pixels, percentage, or em. A higher border radius means more circular border.
• Shadow: Set a shadow for the page image.
• Margin: Creates space around the page image, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).

Review

• Size: Set the size of the reviewer image or you can keep the default value as it is.
• Border Type: Set a border type for the reviewer image. Choose from the following border types:
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius using pixels, percentage, or em. A higher border radius means more circular border.
• Shadow: Set a shadow for the reviewer image.
• Margin: Creates space around the reviewer image, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).

Page Info

Style Page Info elements such as (Reviews Number, Container, Name, and Rate).

Reviews Number

• Text Color: Pick a color for review number in page info container.
• Typography: Customize rate number font.
  • Family
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
  • Line-Height
  • Letter-Spacing

Container

• Background Type: Set background for the page info container.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set background using gradient colors.
• Border Type: Set Border Type for page Info Container.
  • Width: Set border width.
  • Color: Set color for Border Type.
• Border Radius: Set Border Radius using pixels, percentage, or em. A higher border radius means more circular border.
• Box Shadow: Set Box Shadow Styling for page info Container. The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
• Margin: Creates space around the Container’s content, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).
• Padding: Creates space around Container’s content, inside of any defined margins and/or borders. You can set page Info Container Padding in Pixel (px), Em (em), or Percentage(%)

Name

• Text Color: Select Text Color for page info Name.
• Hover Color: Select Hover Color for page info Name.
• Typography: Set font styling for page Name.
  • Family
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
  • Line-Height
  • Letter-Spacing
• Text Shadow: Set page Info Text Shadow Styling.
  • Color
  • Blur
  • Horizontal
  • Vertical
• Margin: Creates space around the page name, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).

Rate

Label

• Text Color: Pick a color for stars rate label.
• Typography: Customize stars rate label font.
  • Family
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
  • Line-Height
  • Letter-Spacing

Stars

• Star Size: Set the size of the Overall Star Rating in Page Info Rating.
• Star Color: Set the Filled (rated) Star Color.
• Empty Star Color: Set the Empty Star Color.
• Text Color: Pick a color for rate text.
• Typography: Customize rate font.
  • Family
  • Size
  • Weight
  • Transform
  • Style
  • Decoration
  • Line-Height
  • Letter-Spacing
• Text Shadow: Set Page Rate Text Shadow Styling.
  • Color
  • Blur
  • Horizontal
  • Vertical
• Margin: Creates space around the page rate, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).

Review

Style reviewers star ratings.

• Star Size: Set reviewer’s rating star size.
• Star Color: Pick a color for the reviewer’s rating star.
• Empty Star Color: Set a color for the reviewer’s rating empty star.
• Background Type: Set background for review container.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set background using gradient colors.
• Border Type: Set Border Type for review container.
• Advanced Border Radius: Apply custom radius values for Elementor Facebook Reviews widget review container. Get the radius value from here.
• Border Radius: Insert border radius values.
• Width: Set border width.
• Color: Set color for Border Type.
• Border Radius: Set Border Radius using pixels, percentage, or em.
• Box Shadow: Set Box Shadow Styling for review container. The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
• Margin: Creates space around the review container, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).
• Padding: Creates space around review container, inside of any defined margins and/or borders. You can set page Info Container Padding in Pixel (px), Em (em), or Percentage(%).

Reviewer Name

Style Facebook Reviewer name.

• Color: Pick a color for Facebook Reviewer Name.
• Hover Color: Pick a hover color for Facebook Reviewer Name.
• Typography: Customize Facebook Reviewer Name text.
• Margin: Creates space around the reviewer name.

Date

Style Review Date for Elementor Facebook Reviews Widget.

• Color: Pick a color for review date.
• Hover color: Set on hover color for review date.
• Typography: Customizer review date text.
• Margin: Creates space around the review date.

Review Container

Style Review Container for Elementor Facebook Reviews Widget.

• Background Color: Pick a background color for review text.
• Border Type: Set Border Type for review text.
• Border Width: Set border width.
• Color: Set color for Border Type.
• Border Radius: Set Border Radius using pixels, percentage, or em.
• Margin: Creates space around the review text, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).
• Padding: Creates space around review text, inside of any defined margins and/or borders. You can set page Info Container Padding in Pixel (px), Em (em), or Percentage(%).

Review Text

Style Facebook Review Text for Facebook Reviews Widget for Elementor.

• Color: Pick a color for review text.
• Typography: Customizer review text.
• Margin: Creates space around the review text.

Readmore Text

Style Read more text for Elementor Facebook Reviews Widget.

• Color: Pick a color for read more link.
• Hover Color: Set on hover color for read more link.
• Typography: Customize read more link.
• Margin: Creates space around the read more link.

Container

Style Reviews Container of Elementor Facebook Reviews Widget.

• Max Width: Set the max-width for Facebook Reviews Widget Container.
• Alignment: Align Reviews in Facebook Reviews Container to Right, Center, or Left.
• Background Type: Set background for review container.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set background using gradient colors.
• Border Type: Set Border Type for review container.
• Width: Set border width.
• Color: Set color for Border Type.
• Border Radius: Set Border Radius using pixels, percentage, or em.
• Box Shadow: Set Box Shadow Styling for container. The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
• Margin: Creates space around container, outside of any defined borders. You can set the margin in Pixels (px), Em (em), or Percentage (%).
• Padding: Creates space around container, inside of any defined margins and/or borders. You can set page Info Container Padding in Pixel (px), Em (em), or Percentage(%).

Carousel Arrows

Customize carousel navigation arrows for Facebook Reviews Widget for Elementor.

• Color: Pick a color for carousel navigation arrows.
• Background Color: Set background color for carousel navigation arrows.
• Size: Set a size for carousel navigation arrows.
• Border Radius: Set border radius for carousel navigation arrows.
• Padding: Creates space around arrows.

Carousel Dots

Customize carousel navigation dots for Facebook Reviews Widget for Elementor.

• Color: Pick a color for carousel navigation dots.
• Active Color: Set color for active carousel navigation dots.