EDITS.WS

Tag: smash balloon

  • How to Display Instagram Photos in WordPress Sidebar Widget

    Do you want to display your Instagram photos in the WordPress sidebar?

    Your Instagram posts make great content for your website. By creating an Instagram feed, you can keep your site fresh and interesting while also promoting your Instagram account.

    In this article, we’ll show you how to display your Instagram photos and videos in the WordPress sidebar widget.

    How to display Instagram photos in WordPress sidebar widget

    Why Add an Instagram Feed to Your WordPress Site?

    With more than a billion monthly active users, Instagram is a great place to promote your products, services, and blog posts.

    Depending on your industry, Instagram may even be the most important part of your social media strategy. For example, Instagram is particularly popular among top fashion blogs, cooking, lifestyle, and photography websites.

    However, people won’t see your Instagram posts if they only visit your website. This can make it difficult to grow your Instagram following and get engagement on your photos and videos.

    With that being said, it’s a good idea to add an Instagram feed to your WordPress website. By showing your latest posts, you can promote your Instagram account in an engaging and eye-catching way.

    This will get more traffic to your Instagram page and encourage visitors to interact with your posts by leaving comments, clicking on the ‘Share’ button, and more.

    The feed will also update automatically every time you make a new Instagram post, so it’s a great way to keep your website fresh.

    That being said, let’s take a look at how to easily display Instagram photos in the WordPress sidebar widget.

    How to Install an Instagram Photos Plugin

    The best way to display Instagram photos in a WordPress sidebar or similar widget is by using Smash Balloon Social Photo Feed. This free plugin lets you show photos from one or more Instagram accounts in a fully customizable feed.

    After creating a feed, you can add it to the sidebar using either a shortcode or block.

    Embedded Instagram feed example

    In this guide, we’ll be using the free version of Smash Balloon, as it has everything you need to embed an Instagram feed. However, there’s also a Pro version that allows you to display hashtag feeds, add Instagram shoppable images in WordPress, and more.

    Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account, as this allows Smash Balloon to show your Instagram bio and header automatically.

    For step-by-step instructions on how to do both of these things, check out our FAQ section at the end of the post.

    When you’re ready, go ahead and install and activate the Smash Balloon Social Photo Feed plugin. For more details, see our guide on how to install a WordPress plugin.

    How to Connect an Instagram Account to WordPress

    After activating the plugin, it’s time to connect your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

    How to create a new social media feed using Smash Balloon

    With Smash Balloon Pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different websites, including YouTube, Facebook, and Twitter.

    Since we’re using the free version, simply select ‘User Timeline’ and then click on ‘Next.’

    Smash Balloon's Instagram settings

    After that, you’ll need to choose the Instagram account where you’ll get the photos from.

    To get started, click on ‘Add Source.’

    Connecting Instagram to your WordPress website

    On the next screen, choose whether you want to display photos from a personal or business Instagram account.

    If you check the box next to ‘Personal,’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the avatar and bio manually in the plugin’s settings.

    Connecting a personal or business Instagram account to WordPress

    After choosing ‘Personal’ or ‘Business,’ go ahead and click on ‘Login with Facebook.’

    You can now check the Instagram account that you want to use and click on ‘Next.’

    How to display an Instagram feed on your WordPress website

    After that, check the box next to the Facebook page that’s linked to your Instagram account.

    With that done, go ahead and click on ‘Next.’

    Choose a page to connect to WordPress

    Smash Balloon will now show a popup listing all the information it will have access to and the actions it can perform.

    To restrict Smash Balloon’s access to your Instagram account, click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos and videos that you can embed on your WordPress blog or website.

    With that being said, we recommend leaving all the switches enabled.

    When you’re ready, click on ‘Done.’

    Adding permissions to your Facebook app

    You’ll now see a popup with the Instagram account you just linked to WordPress.

    Simply check the box next to the account and then click on ‘Add.’

    Selecting an Instagram account

    Smash Balloon will now take you back to Instagram Feeds » All Feeds automatically.

    To create a feed, simply check the box next to your Instagram account. Then, click on ‘Next.’

    How to create an Instagram social media feed

    The plugin will now create an Instagram photo feed for your website, and then open that feed in the Smash Balloon editor.

    How to Customize Your Instagram Photo Feed

    You can use the editor to fine-tune how Instagram photos look on your website.

    On the right, you’ll see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the photo feed.

    Smash Balloon's Instagram feed editor

    Most of these settings are self-explanatory, but we’ll quickly cover some key areas.

    To start, you can change the feed layout and add padding by selecting ‘Feed Layout’ from the left-hand menu. As you make changes, the preview will update automatically, so you can try different settings to see what works best for your Instagram photo feed.

    Smash Balloon's Instagram feed layout settings

    By default, Smash Balloon shows the same number of posts on desktop computers and mobile devices.

    You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner. By testing different layouts, you can create an Instagram feed that looks great, no matter what device the visitor is using.

    Previewing your social media feed on mobile, tablets, and desktop

    Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer photos and videos on mobile devices.

    To do this, simply type a different number into the ‘Mobile’ field under ‘Number of Posts.’

    Showing a different number of photos on mobile and desktop

    By default, the Facebook feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your photos and videos fit comfortably on smaller screens.

    After testing the mobile version of your WordPress website, you may be unhappy with how the columns look on smartphones and tablets. If this is the case, then you can show fewer columns by changing the numbers in the ‘Columns’ section.

    Showing a different number of Instagram columns on different devices

    When you’re happy with the changes you’ve made, click on the ‘Customize’ link.

    This will take you back to the main Smash Balloon editor, where you can explore the next settings screen, which is ‘Color Scheme.’

    Adding a different color scheme to an Instagram feed in WordPress

    By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you can use.

    Another option is creating your own color scheme by selecting ‘Custom’ and then using the controls to change the background color, edit the button color, change the text color, and more.

    An Instagram feed with a custom color scheme

    By default, Smash Balloon adds a header to your feed, which is your Instagram profile picture and the name of your page. To change how this section looks, click on ‘Header’ in the left-hand menu.

    On this screen, you can change the size and color of the header, and show or hide your Instagram bio.

    Adding a header to the Instagram feed on your WordPress website

    Sometimes, you may want to show a different profile picture. For example, your Instagram avatar may clash with your WordPress theme.

    To do this, simply click on ‘Add Image’ under ‘Show custom avatar.’

    You can then either choose an image from the WordPress media library or upload a new photo from your computer.

    Adding a custom Instagram avatar in WordPress

    Similarly, you can show a different bio. For example, you may want to introduce your Instagram feed or encourage people to follow you for more great content.

    To replace the Instagram bio, simply type into the ‘Add custom bio’ box.

    Creating a custom social media bio for your WordPress website

    Smash Balloon automatically analyzes your Instagram photos and displays them at the best resolution. While we recommend using these default settings, it is possible to make the images bigger or smaller.

    To change the image size, click on ‘Posts’ from the left-hand menu. Then, select the ‘Images and Videos’ option.

    Changing Smash Balloon's image and video resolution settings

    You can now choose between thumbnail, medium, and full-size using the dropdown menu.

    If you’re unhappy with the results, then you can return to this screen at any point and select ‘Auto-detect (Recommended)’ from the dropdown menu.

    Smash Balloon's automatic resolution detection

    By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed, which allows visitors to scroll through more of your photos and videos.

    Since it’s such an important button, you may want to customize it by selecting the ‘Load More Button’ option from the left-hand menu.

    Customizing the social media Load More button

    Here, you can help ‘Load More stand out by changing its background color, text color, and hover state.

    You can also change the button’s label by typing into the ‘Text’ field.

    Adding your own messaging to the Instagram button

    Another option is to remove the button completely by clicking the ‘Enable’ toggle. In this way, you can encourage people to visit your Instagram by limiting the number of posts they can see on your website.

    If visitors like what they see, they may decide to follow you on Instagram using the ‘Follow on Instagram’ button that Smash Balloon adds automatically.

    With that in mind, you may want to help the button stand out by selecting ‘Follow Button’ in the left-hand menu.

    Here, you can change the button’s background color, hover state, and text color.

    Customizing the social media follow button

    By default, the button has a general ‘Follow on Instagram’ label.

    You can replace this with your own messaging by typing into the ‘Text’ field.

    How to create a custom Instagram photo feed for your WordPress website

    When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add the Instagram feed to your WordPress sidebar widget.

    How to Add Your Instagram Photos in WordPress Sidebar Widget

    You can add your feed to the sidebar or similar section using the Instagram Feed block.

    If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code.

    Simply go to Instagram » All Feeds and then copy the value in the ‘Shortcode’ column.

    In the following image, we’ll need to use instagram-feed feed=1.

    Adding Instagram photos and videos using a code

    With that done, go to Appearance » Widgets in the WordPress dashboard.

    Then click on the blue ‘+’ button.

    The WordPress widget editor

    In the search bar, type in ‘Instagram Feed’ and select the right widget when it appears.

    WordPress has a built-in Instagram widget, so make sure you choose the one that shows the official Instagram logo.

    The Instagram Feed block

    After that, simply drag the widget onto the area where you want to show the Instagram feed, such as the sidebar or similar section.

    The widget will automatically show one of the feeds you created using Smash Balloon.

    To show a different feed instead, simply type the feed’s shortcode into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’

    Adding an Instagram feed to WordPress using shortcode

    You can now click on the ‘Update’ button to make the widget live. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

    If you’re using a block-enabled theme, then you can add an Instagram feed to the sidebar using the full-site editor. To get started, simply go to Appearance » Editor.

    Adding an Instagram feed using the full-site editor

    In the editor, simply click to select the sidebar section and then click on the ‘+’ button.

    You can then start typing in ‘Instagram Feed’ and select the right block when it appears.

    Adding an Instagram feed to a block-enabled WordPress theme

    By default, the full-site editor will show one of the Instagram feeds you created using Smash Balloon. To show a different feed, simply add the shortcode following the same process described above.

    When you’re happy with how the Instagram feed looks, click on ‘Save’ to make your changes live.

    How to Display a Specific Instagram Photo in WordPress

    Sometimes you may want to show a specific Instagram post on your website. This might be your most popular photo, an evergreen post, or even a social media contest that you’re currently running.

    A single Instagram post, embedded in WordPress

    In the past, you could easily embed an Instagram post in WordPress using a protocol known as oEmbed. However, Facebook changed the way that oEmbed works, so you can no longer easily embed Instagram photos in WordPress.

    The good news is that Smash Balloon can fix the Facebook and Instagram oEmbed issue. This allows you to easily embed a specific Instagram post in any page, post, or widget-ready area, such as the sidebar.

    To enable this feature, simply go to Instagram Feed » oEmbeds. You can then click on the ‘Enable’ button.

    Enabling the Facebook and Instagram oEmbed feature

    After that, go to Appearance » Widgets and click on the blue ‘+’ button.

    In the search bar, type in ‘Embed’ to find the right block.

    The WordPress Embed block

    When the ‘Embed’ block appears, drag it onto the area where you want to show the photo.

    In the ‘Embed’ field, simply paste the URL of the Instagram post that you want to show on your website. Then, click on ‘Embed.’

    Adding an embed block to your WordPress website

    WordPress will now show the specific Instagram post.

    If you’re happy with how it looks, then click on ‘Update’ to make it live.

    Publishing an Instagram photo in a sidebar widget

    Now, if you visit your website, you’ll see the Instagram post live.

    If you’re using a block-enabled theme, then you’ll need to add specific Instagram posts using the full-site editor.

    To do this, simply enable Smash Balloon’s oEmbed feature and get the Instagram post’s URL by following the same process described above.

    After that, open the full-site editor by going to Appearance » Editor in the WordPress dashboard. Once you’re inside the full-site editor, click on the ‘+’ button in the sidebar section and then type in ‘Embed.’

    Adding an Embed block using the full-site editor (FSE)

    When the right block appears, click to add it to the sidebar.

    You can then add the URL for the post you want to embed and click on the ‘Embed’ button.

    Adding an Instagram feed using an Embed block

    The full-site editor will now show the Instagram post.

    If you’re happy with how it looks, then click on ‘Save’ to publish this photo or video to the block-enabled sidebar.

    Adding a specific Instagram post to a block-enabled sidebar

    FAQs About Displaying Instagram Posts in WordPress

    Smash Balloon makes it easy to create a custom Instagram feed or even display specific Instagram posts on your WordPress website.

    That being said, here are some of the most frequently asked questions about showing Instagram posts on WordPress.

    How Do I Create an Instagram Business Account?

    Smash Balloon can display photos from either a personal or business Instagram account.

    However, Smash Balloon can’t automatically fetch the Instagram avatar and bio from a personal Instagram account. Instead, you’ll need to add the avatar and bio manually in the plugin’s settings.

    With that being said, you may want to check whether you have a personal or business account, and then switch to a business account if necessary.

    To do this, simply visit your Instagram account and click on the lined icon in the side menu.

    Checking whether your Instagram page is a business or personal account

    After that, click on ‘Settings.’

    If you don’t have a business account, then this screen will show ‘Switch to professional account’ as the last option.

    How to switch to a business Instagram account

    If you currently have a personal account and want to switch to a business account, then simply click on this link.

    How Do I Connect a Facebook Page to an Instagram Account?

    Before you can display Instagram photos in WordPress, you’ll first need to connect your Instagram account to a Facebook page.

    To do this, head over to the Facebook page that you want to use and then click on ‘Settings’ in the left-hand menu.

    Once you’ve done that, click on ‘Linked Account.’ You can now select ‘Instagram’ and click on the ‘Connect’ button.

    Linking an Instagram business account to a Facebook page

    Facebook will now show all the actions it can perform, and the information it can access.

    If you’re happy with this, then click on the ‘Connect’ button.

    Linking Instagram and Facebook

    Just be aware that the people who manage your Facebook page may be able to see your Instagram messages and respond to them. If you want to stop this and keep your messages private, then click to disable the slider.

    When you’re ready to move to the next screen, click on ‘Confirm.’

    Restricting access to your Instagram messages

    This opens a popup where you can type in your Instagram username and password.

    After that, click on the ‘Log in’ button.

    Logging into your Instagram account

    After a few moments, you’ll see a message saying that your Instagram and Facebook accounts are now connected.

    We hope this article helped you learn how to display Instagram photos in a WordPress sidebar widget. You may also want to see our guide on how to create a custom Facebook feed in WordPress, or see our expert pick of social proof plugins for WordPress and WooCommerce.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Display Instagram Photos in WordPress Sidebar Widget first appeared on WPBeginner.

  • How to Display Your Facebook Page Reviews in WordPress

    Do you want to display your Facebook page reviews in WordPress?

    Reviews and ratings can help you gain the trust of potential customers and encourage them to buy from your website. If you have a Facebook page, then you may already have lots of reviews that you can easily embed in your WordPress website.

    In this article, we will show how to display Facebook page reviews and ratings on your WordPress website.

    How to display your Facebook page reviews in WordPress

    Why Should You Display Facebook Page Reviews in WordPress?

    Reviews can help you build social proof and gain the trust of your visitors, which means more sales for your business.

    There are lots of ways to collect reviews, including using the best customer review plugins for WordPress or the best customer testimonial plugins.

    However, Facebook has its own built-in review system. If you already have a Facebook page, then followers can review your products and services on that platform.

    It’s also a good idea to show these reviews on your WordPress website. That way, people can see all your positive reviews, even if they don’t visit your Facebook page.

    With that in mind, let’s see how to display your Facebook page reviews in WordPress.

    How to Display Your Facebook Page Reviews in WordPress

    The best way to add Facebook reviews to your WordPress website is by using Smash Balloon’s Reviews Feed Pro.

    Reviews Feed Pro is the best customer review plugin for WordPress, and it lets you show reviews from Facebook, Google, Yelp, and TripAdvisor without having to install any extra WordPress plugins.

    An example of a Facebook page review feed, embedded in WordPress

    Even better, the feed will update automatically as customers post new reviews to your Facebook page. This means potential customers will always see the latest reviews without you needing to add them manually.

    Reviews Feed Pro also copies your site’s design and WordPress theme, so the Facebook reviews look like a natural part of your website rather than content embedded from an external social media platform.

    Displaying Facebook page reviews on an online store

    Set Up the Reviews Feed Pro Plugin

    First, you will need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, click on Reviews Feed in the left-hand menu. You can now add the Reviews Feed Pro license key and click on the ‘Activate’ button.

    Adding a Smash Balloon license to a WordPress website

    You will find the license key in your account on the Smash Balloon website.

    Connect Smash Balloon to Your Facebook Page

    Now, you are ready to connect your Facebook page to your WordPress blog. This may sound complicated, but Reviews Feed Pro will walk you through the process.

    To get started, go to Reviews Feed » All Feeds and click on ‘Add New’.

    Creating a Facebook review feed for WordPress

    Reviews Feed Pro is an advanced plugin that can show reviews from Google, Facebook, Yelp, and more.

    To display your Facebook page reviews, go ahead and click on ‘Facebook’. Then, select ‘Connect with Facebook’.

    Creating a Google, TripAdvisor, Yelp, or Facebook page review feed

    With that done, select the radio button next to ‘Page’.

    Then, just click ‘Connect to Facebook’.

    Connecting a Facebook page to your WordPress website

    This opens a popup where you can log in to your Facebook account and choose one or more pages where you will get the reviews from.

    After that, simply click on ‘Next’.

    Changing the Facebook page permissions

    Facebook will now show all the information that Smash Balloon will have access to and the actions it can perform.

    To restrict Smash Balloon’s access to your Facebook page, just click any switch to turn it from ‘Yes’ to ‘No’.

    Just be aware this may affect the reviews that appear on your WordPress website. That said, it’s a good idea to leave all the switches enabled.

    Changing the Facebook permissions for Smash Balloon

    When you are happy with how the Facebook permissions are set up, select ‘Done’.

    After a few moments, you will see a message confirming that you have connected your WordPress blog to your Facebook page.

    When that’s done, just click on the ‘OK’ button.

    Connecting Facebook to your WordPress website

    Reviews Feed Pro will now take you back to the WordPress dashboard automatically.

    Create a Facebook Review Feed for WordPress

    You are now ready to create a feed showing all the reviews from your Facebook page.

    Simply check the box next to your Facebook page and then click ‘Next’.

    Creating a Facebook page review feed for a WordPress eCommerce store or website

    You can now choose the template you want to use for your page reviews. For example, you may want to highlight a single review or show multiple reviews in a masonry layout.

    After making a decision, click on ‘Next’.

    Choosing a template for an embedded social media feed

    Smash Balloon will now go ahead and create the feed and then open it in the editor, ready for you to customize.

    Customizing Your Facebook Review Feed

    Smash Balloon automatically copies your site’s design, so the feed should already fit perfectly with your WordPress theme. However, you can fine-tune every part of the feed to get exactly the design you want.

    The editor shows a live preview of your review feed to the right. On the left is a menu that shows the different settings you can use to change how the Facebook reviews look.

    Most of these settings are self-explanatory, but we will quickly look at the major areas. To get started, click on ‘Layout’ in the left-hand menu.

    Changing the layout of an embedded Facebook page review feed

    Here, you can choose from a Grid, Masonry, or Carousel layout.

    As you click on the different options, the live preview will automatically update to show the new layout. In this way, you can try different layouts to see what looks the best.

    The Smash Balloon social media feed editor

    You can also change the spacing, how many Facebook reviews to display in the feed, and the number of characters WordPress shows from each review.

    As you make changes, remember the feed may look different on smartphones and tablets compared to desktop computers.

    With that in mind, it’s a good idea to test the mobile version of your review feed using the row of buttons in the right-hand corner. In this way, you can create a Facebook review feed that looks just as good on smartphones and tablets as it does on desktop computers.

    Testing an embedded Facebook page review feed on smartphones and tablets

    If you use the Carousel layout to create a responsive slider, then you can change how the reviews scroll using the ‘Pagination’ settings.

    For example, you can enable autoplay so that the reviews scroll automatically or make the interval longer so that customers have more time to read each Facebook review.

    Changing the social media pagination settings

    When you are happy with these changes, just click on the small arrow next to ‘Customize’.

    This takes you back to the main settings screen.

    Customizing the Facebook reviews on a WordPress blog or website

    The next option is ‘Header’, which controls the text that appears at the top of your Facebook review feed.

    By default, Smash Balloon shows a ‘Review’ headline, your average star rating, the total number of reviews, and a ‘Write a review’ button.

    Adding a header to a social media feed

    To remove a piece of content, simply uncheck any of the Heading, Button, or Average Review Rating boxes.

    Another option is to change the padding and margins using the settings under ‘Element Header Spacing’.

    Customizing the social media header in WordPress

    Do you want to customize the header text? Then simply click on Heading, Button, or Average Review Rating, depending on the content you want to change.

    This takes you to a screen where you can change the text color, size, and more.

    Creating a custom header for an embedded social media feed

    You can also replace the default text with your own custom messaging by typing into the ‘Content’ field.

    After making these changes, simply click on the ‘Header’ link to return to the previous screen.

    Adding your own messaging to a live review feed

    The default Facebook header provides some useful context while also encouraging visitors to write their own reviews.

    For that reason, we recommend leaving the header enabled. However, if you prefer, then you can remove the header by clicking the ‘Enable’ toggle.

    Disabling the header on a social media live feed

    Ready to return to the main editor screen?

    Then simply click on the ‘Customize’ link.

    Returning to the main Smash Balloon settings screen

    The next setting is ‘Reviews’, so give this option a click.

    Here, you can choose between ‘Post Style’ and ‘Edit Individual Elements’.

    Displaying your Facebook page reviews in WordPress

    If you select ‘Post Style’, then you can change how the individual reviews look inside the feed.

    For example, you can switch to a boxed layout, add a box shadow, and change the corner radius to create curved edges.

    Creating a boxed review style in WordPress

    As always, the preview will update automatically, so you can try different settings to see what looks the best.

    When you are happy with how the feed looks, simply click on the ‘Reviews’ link to return to the previous screen.

    The user-friendly Smash Balloon editor

    This time, select ‘Edit Individual Elements’. You will now see all the different content that Reviews Feed Pro includes in each review, such as the rating, author and date, images, and review text.

    You can add and remove this content to show exactly the information that visitors need to see. To do this, simply check and uncheck the different boxes.

    Customizing content inside a Facebook page review

    You can also customize the different content by clicking on it.

    For example, in the following image, we have changed the color and size of the review content, known as the ‘Review Paragraph’. In this way, you can draw the visitor’s attention toward the most important information.

    Customizing embedded Facebook page reviews on an online store or WordPress website

    When you are happy with how the feed looks, click on ‘Customize’ to return to the main Smash Balloon editor.

    You can now select ‘Load More Button’.

    The Smash Balloon Reviews Feed Pro WordPress plugin

    The ‘Load More’ button allows visitors to see more reviews, so Smash Balloon adds it to your feed by default. Since it’s such an important button, you may want to make it stand out by changing the background color, hover state, label, margins, and more.

    You can also replace the default ‘Load More’ text with your own messaging by typing into the ‘Text’ field.

    Customizing the load more button on a social media feed

    If you prefer, then you can remove the button by clicking the ‘Enable’ toggle. In this way, you can encourage people to visit your Facebook page in order to read more reviews.

    Customize the Facebook Page Review Settings

    When you are happy with how the Facebook review feed looks, you may want to change its settings. They allow you to reorganize the reviews that appear on your site and moderate the content using filters. You can even pick individual reviews to show in the Facebook feed.

    To see the available options, select the ‘Settings’ tab.

    Filtering and moderating Facebook page reviews

    First, you may want to reorganize the reviews by selecting ‘Sort’.

    Here, you can organize reviews based on date or rating.

    Organizing Facebook page reviews in WordPress

    After choosing one of these options, you will get access to some additional settings.

    For example, if you enable the ‘By Rating’ slider, then you can choose whether to show the highest or lowest-rated reviews first.

    Showing the highest rated Facebook reviews

    Another option is to show reviews at random by clicking the ‘Randomize’ slider.

    This can be a way to keep the feed interesting, even for regular visitors.

    Randomizing Facebook reviews on a website or blog

    When you are happy with the order, click on the ‘Settings’ link.

    This takes you back to the main ‘Settings’ tab.

    How to display Facebook page reviews in WordPress

    Next, you may want to filter the reviews that appear on your website by selecting ‘Filters’.

    To start, you can choose whether to show reviews that have a certain star rating.

    Moderating Facebook page reviews, embedded on a WordPress website

    In this way, you can show the best reviews to potential customers and get more sales. However, if you only display positive reviews, then some visitors may see you as less trustworthy, which can damage your conversion rates.

    You can also filter reviews based on their content. For example, you may want to hide all reviews that include the name of your biggest competitor or offensive language.

    Another option is to only show reviews that feature a specific word or phrase. For instance, if you are creating a landing page for a particular WooCommerce product, then you might only show reviews that mention the product.

    To set up either of these filters, simply type the blacklisted or whitelisted words into the ‘By Words’ section.

    Filtering social media reviews

    With that done, click on the ‘Settings’ link.

    The final option is ‘Moderation’, which allows you to pick the individual reviews you want to show to visitors. This gives you complete control over the Facebook review feed.

    The Smash Balloon filtering and moderating settings

    After selecting ‘Moderation’, you can choose between ‘Allow List’ or ‘Block List’.

    If you select ‘Allow List,’ then you can check the box next to each review you want to show. If you choose ‘Block List’ instead, then you can check the box for every review you want to hide.

    Adding individual Facebook reviews to a WordPress website

    Are you happy with how the review feed is set up?

    Then go ahead and click on ‘Save’ to store your changes.

    Saving a Facebook page review feed

    With that done, you are ready to add the reviews to your WordPress website.

    How to Add Facebook Page Reviews in WordPress

    You can now add the review feed to your online store, blog, or website using either a block, widget, or shortcode.

    If you have created more than one feed using Reviews Feed Pro, then you will need to know the feed’s shortcode before you can use the widget or block.

    To get this information, head over to Reviews Feed » All Feeds and then look at the value under ‘Shortcode’. You will need to add this code to the block or widget, so make a note of it.

    Adding Facebook page reviews to WordPress using shortcode

    If you want to embed the feed in a post or page, then we recommend using the Smash Balloon Reviews Feed block.

    Just open the page or post where you want to show your Facebook page reviews. Then, click on the ‘+’ icon to add a new block and start typing ‘Reviews Feed’.

    When the right block appears, click to add it to the WordPress block editor.

    Adding the Reviews Feed block to a WordPress page or post

    The block will show one of your review feeds by default. If you want to show a different feed, then find the ‘Shortcode Settings’ in the right-hand menu.

    Here, simply add the shortcode you got earlier, and then click on ‘Apply Changes’.

    Showing different review feeds using shortcode

    If you are happy with how the review feed looks, then you can go ahead and publish or update the page.

    Another option is to add the Reviews Feed widget to your website. This is a great way to show positive customer reviews on every page and post. For example, you might add the widget to the sidebar or WordPress footer.

    To add the Reviews Feed widget to your site, head over to Appearance » Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.

    Adding a review feed to a widget-ready area

    In the panel that appears, type in ‘Reviews Feed’ to find the right widget.

    Then, simply drag the widget onto the area where you want to show the reviews, such as the sidebar or similar section.

    Adding reviews to WordPress using a widget

    The widget will automatically show one of the feeds you created using the Reviews Feed plugin. If this isn’t the feed you want to display, then type the feed’s shortcode into the ‘Shortcode Settings’ box.

    After that, click on ‘Apply Changes.’

    You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our guide on how to add and use widgets in WordPress.

    Another option is adding the Facebook review feed to any page, post, or widget-ready area using the shortcode.

    For help placing the shortcode, please see our guide on how to add a shortcode.

    Are you using a block theme? Then you can use the full site editor to add the Reviews Feed block anywhere on your website. This includes areas you can’t edit using the standard WordPress content editor, such as your site’s 404 page template.

    In the WordPress dashboard, go to Appearance » Editor.

    Opening the full site editor (FSE)

    By default, the full site editor shows your theme’s home template, but you can add the review feed to any template or template part, such as the footer.

    To see all the available options, select either ‘Templates’ or ‘Template Parts’.

    Adding Facebook reviews to your website using the full-site editor (FSE)

    You can now click on the template or template part you want to edit.

    As an example, we will add the review feed to a 404 page template, but the steps will be exactly the same no matter which template you choose.

    Adding social media reviews to any part of your website using FSE and a block-enabled WordPress theme

    After selecting a template, WordPress will show a preview of the template or template part.

    To add your Facebook page reviews to this template, click on the small pencil icon.

    Adding Facebook page reviews to a 404 template

    With that done, click on the blue ‘+’ icon in the top left corner.

    In the search bar, type in ‘Reviews Feed’.

    Adding reviews to WordPress using the full-site editor (FSE)

    When the right block appears, drag and drop it onto the theme template.

    As always, Reviews Feed will show a feed by default. To change this feed, simply add the shortcode following the same process described above.

    Showing different social media feeds using shortcode

    Bonus: How to Add Google, Yelp, and TripAdvisor Reviews

    Displaying your Facebook page reviews in WordPress is a great start. However, there are many different places where customers may review your business online.

    Depending on your industry, you may get more reviews on other platforms besides Facebook. For example, if you have a restaurant website or run a bed and breakfast, then it often makes sense to show reviews from TripAdvisor.

    With Smash Balloon Reviews Feed Pro, you can show reviews from TripAdvisor, Google, and more, without installing any extra plugins.

    Simply create a new feed following the process described above. When you get to the ‘Create a Review Feed’ screen, select ‘Add New’.

    Creating multiple review feeds for a WordPress blog or website

    In the popup that appears, simply select the platform where you want to get reviews from, such as Google or TripAdvisor.

    Then, select the ‘Next’ button.

    Showing reviews from Google, TripAdvisor, Yelp, and more

    After that, Smash Balloon Reviews Feed Pro will guide you through the process of connecting WordPress to your chosen platform.

    We hope this article helped you learn how to display your Facebook page reviews in WordPress. You may also want to see our expert pick of the best Facebook plugins for your blog or learn how to create a custom Instagram photo feed.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Display Your Facebook Page Reviews in WordPress first appeared on WPBeginner.

  • How to Show Google, Facebook, and Yelp Reviews in WordPress

    Do you want to show Google, Facebook, or Yelp reviews in WordPress?

    Customer reviews encourage people to trust your website and buy from your business. There are lots of third-party sites where potential customers can see your reviews, but it’s also a good idea to show this content on your own website.

    In this article, we will show you how to display business reviews from Google, Facebook, and Yelp in your WordPress site.

    How to show Google, Facebook, and Yelp reviews in WordPress

    Why You Should Display Business Reviews in WordPress

    There are lots of different websites where customers can review your company such as Google, Yelp, and Facebook. However, potential customers will need to visit these third-party websites in order to see the reviews.

    With that being said, it’s a good idea to add Google, Yelp, and Facebook reviews to your WordPress website so that everyone can see them. For example, you might show positive reviews on your WooCommerce product pages, or your About Us page.

    An example of a website, showing customer reviews

    These reviews can convince customers to trust your company, even if they haven’t bought from you before.

    You can even use reviews to reduce your cart abandonment rates, by adding them to your custom WooCommerce checkout page.

    A custom checkout review page, with customer reviews

    With that said, let’s see how you can easily add Yelp, Google, and Facebook reviews to WordPress. Simply use the quick links below to jump straight to the platform you want to use.

    How to Show Google, Facebook, and Yelp Reviews in WordPress

    You could simply copy and paste the best reviews into your site, and then show them using a customer review plugin. However, depending on the plugin you use, you may need to add new reviews manually, which can take a lot of time and effort.

    There will also be a delay between customers posting on sites like Yelp and Facebook, and those reviews appearing on your WordPress website.

    With that in mind, it’s a good idea to create a review feed that updates automatically using the Reviews Feed Pro plugin.

    This single plugin allows you to show reviews from all the biggest review platforms.

    Customer reviews, displayed on a WordPress website

    It also comes with pre-designed templates, so you can display your reviews in different layouts including showcases, carousels, grids, and more.

    The Reviews Feed automatically copies your website’s design so the reviews look like a natural part of your website, rather than content embedded from another platform.

    First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, click on Reviews Feed in the left-hand menu. You can then add your Reviews Feed Pro license key and click on the ‘Activate’ button.

    Adding your license to the Reviews Feed WordPress plugin

    You’ll find the license key under your account on the Smash Balloon website.

    After activating the plugin, you’re ready to show reviews from Google, Facebook, or Yelp.

    Method 1. How to Show Yelp Reviews in WordPress

    Yelp is a popular website where visitors can review restaurants, brands, services, products, and more.

    If your business already has some positive Yelp reviews, then adding them to your website can get you more sales, members, appointments, and more.

    An example of a Yelp review feed

    If you don’t already have a Yelp account, then you can claim your Yelp business page.

    Since Yelp is a public site, you can show reviews from any business that has a Yelp listing. For example, if you own a business listing blog or membership site, then you could show Yelp reviews for different local businesses on your website.

    To add reviews to your website, you’ll need to create a Yelp API key. Simply go to the Yelp Developers page and type in your email address.

    The Yelp Developers website

    Then, click on the ‘Send Login Link’ button.

    Note: If you don’t already have an account, then go to the Yelp signup page and follow the onscreen instructions to register.

    After a few moments, Yelp will send a one-time login link to your email address. Simply open the email and use the ‘Click to Log in’ button.

    Logging into the Yelp Developers website

    This takes you to the Yelp Developer Portal.

    In the toolbar, click on Manage API Access.

    Getting access to the Yelp Developers website

    On this screen, type a name for your Yelp app into the ‘App Name’ field. This is just for your reference so you can use anything you want.

    After that, open the ‘Industry’ dropdown and choose the industry that best reflects your website or business.

    Creating a Yelp app in the Developers console

    After that, type in your email address and add a description.

    With that done, read the terms and conditions. If you’re happy to go ahead, then check the terms and conditions box, decide whether you want to get email updates from Yelp, and pass the captcha.

    Finally, click on the ‘Create New App’ button.

    Creating a Yelp add in the Developers console

    After a few moments, you’ll see the following message ‘Great, your app has been created! Check your App ID and API Key below.’

    You’ll need to add this information to your WordPress website.

    How to get a Yelp API key

    Simply go to Reviews Feed » Settings in the WordPress dashboard.

    Then, scroll to Manage API Keys and click on the small pencil icon next to ‘Yelp.’

    How to add a Yelp API key to WordPress

    In the popup, add your Yelp API key.

    Then, click on the ‘Add’ button.

    How to add a Yelp API key to WordPress

    With that setup out of the way, you’re ready to add Yelp reviews to your website.

    Simply go to Reviews Feed » All Feeds. Then, click on the ‘Add New’ button.

    How to show Yelp reviews on your WordPress website

    On the next screen, click on ‘Add New’ again.

    In the popup that appears, select ‘Yelp’ and then click on the ‘Next’ button.

    How to show Yelp reviews on your WordPress blog or online store

    You can now add the URL of the Yelp page that you want to use. This can be a page that you own or any public third-party page.

    After that, click on ‘Finish’.

    Add a Yelp page to your WooCommerce store or WordPress website

    Smash Balloon will now show this Yelp page as a possible source.

    To go ahead and create the feed, simply check the box next to the Yelp page and then click on ‘Next.’

    Creating a Yelp review feed in WordPress

    You can now choose a template to use for the review feed, such as a showcase carousel, grid carousel, or even a single review template.

    After choosing a design, click on the ‘Next’ button.

    Choosing a Smash Balloon template for your Yelp reviews

    Smash Balloon will now show the Yelp review feed in its editor, ready for you to fine-tune.

    For instructions on how to customize the feed and then add it to your site, skip to the end of this guide.

    Method 2. How to Show Google Reviews in WordPress

    Google Reviews is another place where customers can review your business online. Once again, positive reviews are important for building trust and getting conversions, but these reviews can also affect where your site appears in the search results.

    Lots of positive Google reviews and high rankings may improve your business’s search ranking, especially in local search results.

    Google also shows your reviews on relevant search engine result pages.

    Google Reviews, in the Google search engine results

    By adding these reviews to your website, you can encourage people to visit your Google listing and leave you a positive review.

    This may improve your WordPress SEO and the overall star rating that appears in relevant search engine results.

    With that being said, let’s see how you can add Google reviews to your WordPress website.

    An example of Google reviews, added to WordPress using Smash Balloon

    To start, you’ll need to create a Google API key, so head over to the Google Console and sign in using your Google account.

    Once you’re logged into the console, click on ‘Google Home.’

    The Google Cloud Console

    If you’re logging into the Google Console for the first time then you’ll need to accept the terms and conditions.

    With that done, click on ‘New Project.’

    Creating a new project in the Google Cloud Console

    You can now type in a name for the project. This is just for your reference so you can use anything you want.

    Once you’ve done that, click on the ‘Create’ button.

    Creating a new project in the Google Cloud console

    After that, click on the lined icon in the upper-left corner to open the menu.

    In the menu, select ‘APIs and services’ and ‘Credentials.’

    How to create a Google API key in the Cloud Console

    You will now see all your Google projects.

    Simply find the project we just created and give it a click.

    Creating Google credentials in the Cloud console

    In the search field, start typing ‘Places API.’

    When the right API appears, give it a click.

    Enabling the Google Places API

    This takes you to a screen where you can activate the key for making Places API requests.

    To do this, simply click on the ‘Enable’ button.

    Activating the Google Places API

    With that done, press the backwards arrow to return to the main Google Cloud Console dashboard. Here, click on ‘Create Credentials.’

    Go ahead and select ‘API key’ from the dropdown menu.

    Creating an API key in the Google Cloud Console

    After a few moments, you’ll see an ‘API key created’ popup.

    You’ll need to add this information to your WordPress blog or website, so make a note of it.

    An example of a Google API key, created in the Cloud Console

    By default, all of Google’s API keys are unrestricted. To stop other people from using the API key, you’ll need to restrict it by clicking the ‘Edit API Key’ link inside the popup.

    This opens a screen showing all your Google API keys. Simply find the key you just created, and give it a click.

    Editing a Google API key

    Note: If you closed the popup by accident, then don’t worry. You can reach the same screen by selecting ‘Credentials’ in the left-hand menu.

    Under ‘Application restrictions,’ click on ‘HTTP referrers (websites).’

    Restricting access to your Google API key

    Under ‘Website Restrictions,’ click on ‘Add.’

    You can now type in the address of your WooCommerce store or WordPress website, and then click on ‘Done.’

    How to protect your Google API key

    To make sure Smash Balloon can access the Places API, you’ll also need to type in www.googleapis.com and click on ‘Done.’

    Under ‘API restrictions,’ select the button next to ‘Restrict key.’

    Adding restrictions to a Google API key

    With that done, click on the ‘Select APIs’ dropdown menu and check the box next to ‘Google Places API.’

    Now we’re ready to click on ‘OK.’

    Creating a restricted Google API key

    The next step is adding the API key to your site. In the WordPress dashboard, go to Reviews Feed » Settings.

    Under ‘Manage API Keys,’ click on the pencil icon next to ‘Google.’

    Adding a Google API key to your WordPress website

    In the popup, add your Google API key.

    After that, click on the ‘Add’ button.

    How to add a Google API key to your WordPress website

    Now you’ve added an API key, you’re ready to create a feed showing all your Google Reviews.

    To do this, go to Reviews Feed » All Feeds, and click on the ‘Add New’ button.

    How to add Google reviews to your WordPress website

    On the next screen, click on ‘Add New.’

    In the popup that appears, click on ‘Google’ and then select ‘Next.’

    How to create a Google reviews feed for a WooCommerce site or online store

    Now you’ll need to enter the Place ID of the cafe, restaurant, or other venue that you want to use in your feed.

    To get the ID, go to Google’s Place ID page and scroll to ‘Find the ID of a particular place.’

    How to find the place ID for a business or location

    In the Google Maps search bar, start typing the address or name of the place that you want to feature. When the right place appears, give it a click.

    Google will now show the place ID in a small popup.

    Getting a Google place ID

    Go ahead and copy the place ID.

    Now, switch back to the WordPress dashboard and paste the ID into the ‘Enter Place ID’ field.

    How to add a place ID to your WordPress site

    With that done, click on ‘Finish.’

    To go ahead and create the feed, you need to check the box next to the Google place you just added, and then click on ‘Next.’

    Choosing a Google page as a review source

    You can now choose the template you want to use for the review feed, and click on ‘Next.’

    Smash Balloon will now create a feed showing all your Google reviews.

    A Google review feed, created using Smash Balloon

    Do you want to change how the feed looks? Skip to the end of this post for a detailed step-step guide on how to fine-tune the Google Reviews feed, and then add it to your website.

    Method 3. How to Show Facebook Reviews in WordPress

    Many businesses, websites, and online stores use Facebook to connect with their audience. Facebook also has its own built-in review system, so you may want to add these reviews to your website.

    Unlike Yelp and Google, your Facebook page belongs to you, so this is also a way to promote your profile and get more social media followers.

    How to show Facebook reviews on a WordPress website

    To create a Facebook review feed, go to Reviews Feed » All Feeds.

    Then, click on the ‘Add New’ button.

    How to create a Facebook review feed in WordPress

    On the next screen, click on ‘Add New’ again.

    In the popup that appears, click on ‘Facebook’ and then select ‘Connect with Facebook.’

    Selecting a source for your Facebook reviews

    On the next screen, select the radio button next to ‘Page.’

    Once you’re done with that, click on ‘Connect to Facebook.’

    Connecting Smash Balloon's review plugin to WordPress

    This opens a popup where you can log into your Facebook account and choose the pages where you’ll get the reviews from.

    After that, we’re ready to click on ‘Next.’

    Connecting the Smash Balloon review plugin to WordPress

    Facebook will now show all the information that Smash Balloon will have access to and the actions it can perform.

    To restrict Smash Balloon’s access to your Facebook page, just click any of the switches to turn it from ‘Yes’ to ‘No.’ However, be aware that this can affect the content that appears on your website.

    With that in mind, it’s a good idea to leave all the switches enabled.

    Giving the Reviews Feed plugin access to your Facebook page

    When you’re happy with how the Facebook permissions are set up, click on ‘Done.’

    After a few moments, you should see a message confirming that you’ve connected your WordPress website and your Facebook page.

    That done, click on the ‘OK’ button.

    Successfully connecting Reviews Feed and Smash Balloon

    Smash Balloon will automatically take you back to the WordPress dashboard, where you’ll see the Facebook page you just connected to your website.

    Simply select the checkbox next to the Facebook page and then click on the ‘Next’ button.

    How to show Facebook reviews on your WooCommerce store or WordPress website

    You can now choose the template you want to use for the Facebook reviews feed.

    After making the decision, click on ‘Next.’

    Choosing a template for the Facebook feed review

    Smash Balloon will now create a feed showing all your Facebook reviews.

    Customizing Your Google, Facebook, or Yelp Review Feed

    Smash Balloon automatically copies your WordPress theme so any reviews feed you create will fit perfectly with your site’s design. However, Smash Balloon also has an advanced feed editor so you can fine-tune every part of the feed.

    No matter whether you create a feed using Google, Facebook, or Yelp, Smash Balloon will open its feed editor automatically.

    The Smash Ballon review editor

    Note: If you accidentally closed the editor then don’t panic. Simply go to Reviews Feed » All Feeds in the WordPress dashboard, and then click on the ‘Edit’ icon next to the feed.

    Smash Balloon shows a live preview of your review feed to the right. On the left is a menu that shows the different settings that you can use to change how the feed looks.

    To see what changes you can make, start by clicking on ‘Layout’ in the left-hand menu. Here, you can choose from a Grid, Masonry, or Carousel layout.

    As you click on the different layouts, the live preview will automatically update to show the new layout. This makes it easy to try different layouts and find the one you prefer.

    Changing the layout of a review feed

    You can also change the spacing, how many reviews you include in the feed, and the number of characters WordPress shows from each review.

    As you make changes, remember that the feed may look different on smartphones and tablets, compared to desktop computers.

    With that being said, it’s a good idea to test the mobile version of your feed using the row of buttons in the right-hand corner. In this way, you can create a review feed that looks just as good on smartphones and tablets, as it does on desktop computers.

    Previewing the review feed on smartphones, tablets, and desktop computers

    Finally, if you select the Carousel layout then you can change how the reviews scroll using the ‘Pagination’ settings.

    For example, you can enable autoplay so the reviews scroll automatically or increase the interval so visitors have more time to read each review.

    Showing reviews in a carousel layout

    When you’re happy with these changes, click on the small arrow next to ‘Customize.’

    This takes you back to the main Smash Balloon review feed editor.

    Customizing the review feed using Smash Balloon

    The next setting you can explore is ‘Header,’ which controls the text that appears at the top of your feed.

    By default, Smash Balloon shows a ‘Review’ headline, your average star rating, and a ‘Write a review’ button.

    Customizing the review feed header

    This header helps visitors understand the content, while also encouraging them to leave their own review. However, if you prefer then you can remove the header using the ‘Enable’ toggle.

    If you do show the header, then you can add or remove content using the Heading, Button, and Average Review Rating checkboxes.

    Removing content from a Google, Facebook, or Yelp feed

    To change the padding and margins, simply use the settings under ‘Element Header Spacing.’

    If you want to change any of the text that appears in the header, then simply click on either Heading, Button, or Average Review Rating. This takes you to an area where you can change the text color, size, and more.

    You can also replace the standard text with your own custom messaging by typing into the ‘Content’ field.

    Adding a custom header to a Yelp, Facebook or Google review feed

    When you’re ready to return to the main editor screen, just click on the ‘Customize’ link at the top of the left-hand menu.

    The next setting you can look at is ‘Reviews,’ so give this option a click. Here, you can choose between ‘Post Style’ and ‘Edit Individual Elements.’

    Customizing a Facebook, Yelp, or Google review feed

    If you select ‘Post Style,’ then you can change how the individual reviews look inside the feed. For example, you can switch to a boxed layout, add a shadow, and change the corner radius to create curved edges.

    As you make changes, the preview updates automatically so you can try different settings to see what looks the best on your website.

    Adding a boxed layout style to a review feed in WordPress

    If you choose ‘Edit Individual Elements,’ then you’ll see all the different content that Reviews Feed Pro includes in each review such as rating, author and date, and the review text.

    To remove a piece of content, just click to uncheck its box.

    Customizing the content in a review feed

    You can also customize how each type of content looks by clicking on it.

    For example, in the following image, we’ve changed the color and size of the review content, known as the ‘Review Paragraph.’

    Changing the text style in a review feed

    When you’re happy with how the review feed looks, click on ‘Customize’ to return to the main Smash Balloon editor.

    You can now move to the next settings screen by selecting ‘Load More Button.’

    Customizing the 'Load More' button in a WordPress review feed

    The ‘Load More’ button allows visitors to scroll through more reviews, so the plugin adds it by default. Since it’s such an important button, you may want to help it stand out by changing the background color, hover state, label, margins, and more.

    You can also replace the default ‘Load More’ text with your own messaging by typing into the ‘Text’ field.

    A custom Load More button

    If you prefer, then you can remove the button completely by clicking the ‘Enable’ toggle.

    When you’re happy with how the review feed looks, don’t forget to click on ‘Save.’ With that out of the way, you’re ready to add Google, Facebook, or Yelp reviews to your site.

    How to Add Reviews on Your WordPress Website

    Now you can add the review feed to your site using a block, widget, or shortcode.

    If you’ve created more than one feed using Reviews Feed Pro, then you’ll need to know the feed’s shortcode if you’re going to use a widget or block.

    To get this information, go to Reviews Feed » All Feeds and then look at the value under ‘Shortcode.’ You’ll need to add this code to the block or widget, so make a note of it.

    In the following image, we’ll need to use [reviews-feed feed=2]

    Adding a review feed to WordPress using shortcode

    If you want to embed the feed in a page or post, then you can use the Reviews Feed block.

    Just open the page or post where you want to show your Yelp, Google, or Facebook reviews. Then, click on the ‘+’ icon to add a new block and start typing ‘Reviews Feed.’

    When the right block appears, click to add it to the page or post.

    Adding a Reviews Feed block to your WordPress website

    The block will show one of your review feeds by default. If you want to show a different feed, then find ‘Shortcode Settings’ in the right-hand menu.

    Here, simply add the shortcode you got earlier, and then click on ‘Apply Changes.’

    How to add Yelp, Facebook, and Google reviews to your website using shortcode

    If you’re happy with how the review feed looks, then you can go ahead and publish or update the page.

    Another option is to add the Reviews Feed widget to your website. This is a great way to show positive customer reviews on every page of your site. For example, you might add the widget to the sidebar or WordPress footer.

    To add the Reviews Feed widget to your site, head over to Appearance » Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.

    How to add the reviews feed widget to your WordPress theme

    In the panel that appears, type in ‘Reviews Feed’ to find the right widget.

    Then, simply drag the widget onto the area where you want to show the reviews, such as the sidebar or similar section.

    How to add reviews a widget-ready area

    The widget will automatically show one of the feeds you created using the Reviews Feed plugin. If this isn’t the feed you want to display, then type the feed’s shortcode into the ‘Shortcode Settings’ box.

    After that, click on ‘Apply Changes.’

    You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

    Another option is embedding the Google, Facebook, or Yelp reviews on any page, post, or widget-ready area using the shortcode.

    Simply go to Reviews Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block.

    For help placing the shortcode, please see our guide on how to add a shortcode.

    Are you using a block-enabled theme? Then you can use the full-site editor to add the Reviews Feed block anywhere on your website.

    In the WordPress dashboard, go to Appearance » Editor.

    Adding reviews to your website using the full-site editor (FSE)

    By default, the full-site editor will show the theme’s home template. If you want to add the Google, Facebook, or Yelp feed to a different template, then click on the arrow next to ‘Home.’

    You can then choose any design from the dropdown, such as the footer template.

    How to add Facebook, Yelp, or Google reviews to a FSE template

    After choosing a template, simply hover your mouse over the area where you want to show the reviews.

    Then, click on the ‘+’ button.

    How to add a review block using the WordPress full-site editor

    Once you’ve done that, type in ‘Reviews Feed.’

    When the right block appears, click to add it to the template.

    Adding reviews to your website using the full-site editor (FSE)

    As always, Reviews Feed will show a feed by default. You can change this feed by adding a shortcode following the same process described above.

    We hope this article helped you learn how to show Google, Facebook, and Yelp reviews in WordPress. You can also go through our guide on the best email marketing services for small businesses and how to create an email newsletter.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Show Google, Facebook, and Yelp Reviews in WordPress first appeared on WPBeginner.

  • How to Add Instagram Shoppable Images in WordPress

    Do you want to add shoppable Instagram images to your WordPress site?

    Instagram shoppable images have links that people can easily click on to buy your products. This is a powerful way to showcase your products and drive more sales from Instagram.

    In this article, we’ll show you how to easily add Instagram shoppable images in WordPress.

    How to add Instagram shoppable images in WordPress

    What is Instagram Shopping?

    Instagram shopping allows you to tag products in your Instagram photos.

    After tagging one or more products, users who are looking at the post will see a ‘View Products’ icon in the bottom-left corner.

    A shoppable Instagram post

    They can simply click on that icon to see the product’s name, description, and price.

    This makes it easier for shoppers to learn more about the products featured in your social media posts.

    Products in a shoppable Instagram post

    Visitors can tap the screen again to go to your Instagram store, where they can buy the product featured in the social media post.

    This is great user experience, but it isn’t easy to set up.

    You will need to get approval from Instagram to use their shopping features, and some of these requirements are vague. For example, you’ll need to “have demonstrated trustworthiness, including through an authentic, established presence.” You’ll also need to maintain a “sufficient follower base.”

    In addition, you’ll have to set up a  Facebook catalog, a product catalog, and a Facebook business page.

    In other words: it’s a lot.

    Because of that, many Instagram users are looking for an easier way to help shoppers buy products. That’s where shoppable Instagram images come in.

    Why Add Shoppable Instagram Images in WordPress?

    A shoppable Instagram feed is a series of photos that have a link to a product or service on your site. These URLs aren’t clickable when viewed on Instagram, as you can see in the following image.

    Adding a shoppable link to an Instagram post

    However, when you embed the shoppable feed on your WordPress website, these links do become clickable. In this way, an Instagram shoppable feed encourages the people who visit your website to look at specific products.

    Any likes and comments you get on those posts can also act as social proof, and encourage people to click on the product’s link.

    As you post new shoppable images to Instagram, they’ll appear on your site automatically, so visitors will always see the latest posts without you having to add them manually.

    If visitors like what they see, they may even decide to follow you on Instagram. This can get you more followers, and gives you another way to promote directly to that person.

    Even better, since these shoppable links appear on your website, you have complete control over them. This means you don’t have to follow Instagram’s strict shoppable policies, or set up a Facebook product catalog.

    With that being said, let’s see how you can easily add Instagram shoppable images to your WordPress website using Smash Balloon Instagram Pro.

    Creating a Shoppable Feed on Instagram

    First, you need to upload the images that you want to use on your Instagram account.

    Smash Balloon has a shoppable feature that allows you to link each image to a URL inside the plugin settings. With this feature enabled, visitors can click on a shoppable image on your website, and its link will open in a new tab.

    These links won’t appear on Instagram.

    Another option is adding the link to your Instagram captions. These links will show up on Instagram, but they won’t be clickable.

    Smash Balloon's lightbox popup

    However, these links will be clickable on your WordPress website. If you want to use this method, then you’ll need to spend some time adding a URL to each shoppable image on your Instagram account.

    If you’re planning to use Smash Balloon’s shoppable feature, then you can skip this step as we’ll be adding each link inside the plugin’s settings.

    How to Install an Instagram Photos Plugin With Shoppable Support

    The best way to add Instagram shoppable images in WordPress is by using Smash Balloon Instagram Pro.

    A shoppable Instagram feed, created using Smash Balloon

    In this guide, we’ll be using the premium version of Smash Balloon as it has the advanced features you need to add shoppable images in WordPress. However, there’s also a free version that allows you to embed Instagram in WordPress.

    Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account as this allows Smash Balloon to show your Instagram bio and header automatically.

    When you’re ready, go ahead and install and activate the Smash Balloon Instagram Pro plugin. For more details, see our guide on how to install a WordPress plugin.

    Upon activation, head over to Instagram Feed » Settings and enter your license key into the ‘License Key’ field.

    Activating the Instagram Feed Pro plugin for WordPress

    You’ll find this information under your account on the Smash Balloon website.

    After entering the key, click on the ‘Activate’ button.

    How to Connect an Instagram Account to WordPress

    After activating the plugin, your first task is connecting your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

    How to create a new shoppable Instagram feed

    With Instagram Feed pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different social media websites.

    We want to show shoppable images from our Instagram timeline, so simply select ‘User Timeline’ and then click on ‘Next.’

    Creating a shoppable Instagram feed in WordPress

    Now, choose the Instagram account where you’ll get the shoppable images from.

    To get started, click on the ‘Add Source’ button.

    Adding a source for a shoppable Instagram feed

    After that, choose whether you want to show shoppable images from a personal or business Instagram account.

    If you check the box next to ‘Personal’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the Instagram avatar and bio manually in the plugin’s settings.

    Linking a persona or business Instagram account to WordPress

    After choosing ‘Personal’ or ‘Business,’ click on ‘Login with Facebook.’

    You can now select the Instagram account that you want to feature on your WordPress website, and click on ‘Next.’

    Selecting the shoppable Instagram source

    After that, check the box next to the Facebook page that’s linked to the Instagram account with your shoppable images.

    Once you’ve done that, click on the ‘Next’ button.

    Selecting the Facebook page you want to use

    You’ll now see a popup with all the information Instagram Feed Pro will have access to and the actions it can perform.

    To restrict the plugin’s access to your Instagram account, simply click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos that you can show on your WordPress blog or website.

    With that in mind, we recommend leaving all the switches enabled. When you’re happy with the settings, click on ‘Done.’

    Changing the information that Smash Balloon can access

    You’ll now see a popup with the Instagram account you just added to your website.

    Simply check the box next to that account and then click on ‘Add.’

    Adding a shoppable image source to a WordPress website

    Instagram Feed Pro will now take you back to the Instagram Feeds » All Feeds screen.

    To create a feed, just check the box next to the Instagram account that you want to use. Then, click on ‘Next.’

    How to create a shoppable Instagram feed

    The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.

    However, before you can show shoppable images there are a few extra settings to configure.

    How to Enable Smash Balloon’s Shoppable Feature (Optional)

    As we already mentioned, there are two ways to make your Instagram photo feed shoppable. If you’ve added the URLs to your captions on Instagram, then simply skip to the next step.

    Another option is to open shoppable links in a new tab as soon as the visitor clicks on a post. To do this, you’ll need to enable Smash Balloon’s shoppable feature.

    To start, select the ‘Settings’ tab and then click on ‘Shoppable Feed.’

    How to create a shoppable Instagram feed for your online store

    On this screen, go ahead and toggle the ‘Enable’ slider so that it turns blue.

    Smash Balloon will now show an ‘Add’ button on every photo or video in your Instagram feed.

    How to add shoppable links to a WooCommerce site or e-commerce store

    Simply find the first post that you want to make shoppable, and click on its ‘Add’ button.

    You can now type the product or service’s URL into the ‘Product Link’ field and click on ‘Add.’

    How to add a shoppable link to an Instagram post

    Now, clicking on this photo will open the linked URL in a new tab.

    Simply repeat these steps to make every image shoppable.

    If you need to change a post’s URL at any point, then just hover your mouse over it and click on ‘Update.’

    Changing the shoppable links in an Instagram feed

    Once you’ve added all your links, don’t forget to click on the ‘Save’ button.

    How to Filter Your Shoppable Instagram Feed

    By default, Smash Balloon shows all the images and videos from your Instagram account. However, since we’re creating a shoppable feed you may want to filter your posts, and only show photos that link to a product or service.

    This can help shoppers find products to buy, without getting distracted by other photos and videos in your Instagram feed.

    With Smash Balloon, it’s easy to filter Instagram posts based on their captions. You can simply add a keyword or hashtag to your shoppable images on Instagram, and then create a matching filter in Smash Balloon.

    For example, in the following image we’re using the #ordernow hashtag for all the images we want to make shoppable.

    Filtering a shoppable Instagram feed by hashtag

    To create a filter in Smash Balloon, select the ‘Settings’ tab.

    Then, go ahead and click on ‘Filters and Moderation.’

    Filtering shoppable Instagram photos and videos using a hashtag

    In the ‘Only show posts containing’ box, type in the hashtags or keywords that you want to use in the filter.

    If you want to use multiple words in the filter, then simply separate each hashtag or keyword with a comma.

    Adding a filter to a shoppable Instagram feed

    When you’re happy with how the filter is set up, click on the ‘Save’ button.

    Just be aware that the preview won’t update straight away, so you’ll need to refresh the page to see the filter in action.

    A filtered shoppable Instagram feed

    How to Customize Your Shoppable Instagram Feed

    When you’re happy with the photos and videos that appear in your shoppable feed, you may want to change how the feed looks.

    To customize your shoppable Instagram feed, simply click on the ‘Customize’ tab. On the left-hand side are all the settings you can use to change how the shoppable feed looks.

    How to customize your shoppable Instagram feed

    Most of these settings are self-explanatory, but we’ll quickly cover some key areas that can help you get more sales.

    Let’s start at the top, by selecting ‘Feed Layout.’ Here, you can choose different layouts for your shoppable feed, such as carousel and highlight.

    Adding Instagram shoppable images to WordPress

    As you make changes, the preview will update automatically so you can try different settings to see what looks the best.

    Depending on the layout, you’ll get some extra settings that you can use to fine-tune your feed. For example if you choose ‘Highlight’ then you can tell Smash Balloon to highlight posts based on a pattern, post ID, or a specific hashtag. This is great for highlighting your most popular products.

    Showing Instagram shoppable images in a highlighted layout with Smash Balloon

    By 2025, it’s estimated that US consumers will spend $710 billion every year shopping on their mobile devices. With that in mind, you’ll want to make sure the shoppable Instagram feed looks just as good on smartphones and tablets, as it does on desktops.

    By default, Smash Balloon will show the same number of photos on desktop computers and mobile devices.

    You can preview how the shoppable feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

    Creating a mobile-friendly layout for an e-Commerce site

    You can show fewer shoppable photos on mobile devices by changing the settings in the ‘Number of Posts’ and ‘Columns’ sections.

    After making any changes, click on the ‘Customize’ link. This will take you back to the main Smash Balloon editor, ready for you to explore the next option, which is ‘Color Scheme.’

    Changing the color scheme of a shoppable Instagram feed

    By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you may want to use for the shoppable feed instead.

    Another option is creating your own color scheme by selecting ‘Custom.’ Then, simply use the controls to change the background color, change the text color in WordPress, and more.

    Changing the color scheme for your Instagram shoppable feed

    By default, Smash Balloon adds a header to the shoppable feed, which is your profile picture and the name of your page.

    To change how this section looks, click on ‘Header’ in the left-hand menu and then use the settings to change the size of your header, add Instagram bio text, and more.

    Customizing the header for an embedded Instagram feed

    You can also add a different bio. For example, you might encourage people to buy your products, or offer visitors an exclusive coupon code.

    For more information on creating these codes, please see our expert pick of the best WordPress coupon code plugins for your online store.

    To create a unique Instagram bio, simply type into the ‘Add custom bio’ box.

    How to add Instagram shoppable images in WordPress

    With that done, click on ‘Customize’ to return to the main Smash Balloon editor.

    Then, select ‘Posts.’

    How to customize individual Instagram posts in WordPress

    This takes you to a screen that has a few different options.

    You can look through these settings and make any changes you want, but we’re going to focus on ‘Caption.’

    Customizing the Instagram captions

    If you added shoppable links to your captions, then it’s important to make the text stand out. For example, you might make the caption bigger.

    You might even use a different color for the caption.

    Adding a style to a shoppable Instagram caption

    With that done, click on ‘Posts’ to go back to the previous screen.

    Here, you’ll also see a ‘Hover State’ option, which is the overlay that Smash Balloon adds to a post when you hover over it.

    Adding a hover state to a shoppable Instagram feed

    This allows visitors to see any links in your captions without opening that Instagram post first.

    On this screen, you can use the settings to create an eye-catching colored overlay.

    How to create a custom hover state for an Instagram photo and video feed

    After selecting ‘Hover State’ you’ll be able to change the background color and text color that appears when you hover over each post.

    Under ‘Information to display,’ you’ll see all the different information that Smash Balloon can show as part of the overlay. Simply check the box next to each piece of information that you want to show.

    Smash Balloon's hover state settings

    If the caption contains shoppable links, then make sure you leave ‘Caption’ enabled.

    When you’re happy with your changes, click on ‘Customize’ to return to the main Smash Balloon editor screen. You can now select the next option, which is ‘Load More Button.’

    Smash Ballon's Load More button settings

    By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed so visitors can scroll through your shoppable posts.

    Here, you can change the button’s background color, text color, and hover state.

    You can also add your own messaging to the button by typing into the ‘Text’ field.

    How to add a load more button to a shoppable Instagram feed

    While we recommend leaving the ‘Load More’ button enabled to get more sales, you can remove it. For example, you might encourage people to visit your Instagram page by limiting the number of photos they can see on your site.

    To remove the button, simply click on the ‘Enable’ slider to turn it from blue to grey.

    How to remove the Load More button from a social media photo feed in WordPress

    If shoppers like what they see, they may decide to follow you on Instagram using the ‘Follow on Instagram’ button that appears below the shoppable feed.

    Since it’s such an important button, you may want to help it stand out by selecting ‘Follow Button’ from the main Smash Balloon editor screen.

    Adding a follow button to a shoppable Instagram feed

    Here, you can change the button’s background color, hover state, and text color.

    You may also replace the default ‘Follow on Instagram’ text with your own messaging.

    How to get more followers with a Follow button

    As always, when you’re finished with these settings, click on ‘Customize’ to return to the main editor screen.

    If you’ve enabled the Smash Balloon shoppable feature, then clicking on any post in the Instagram feed will open a new tab and take them straight to the linked product page.

    However, if you haven’t enabled the shoppable feature then you may want to take a look at Smash Balloon’s lightbox feature.

    This feature allows visitors to open the image or video in a lightbox popup, without leaving your WordPress website. They can then click on any shoppable links in the captions.

    Smash Ballon's Instagram lightbox popup

    To enable or disable the lightbox, simply select ‘Lightbox’ from the left-hand menu.

    Here, you can remove or add this feature using the ‘Enable’ slider.

    How to enable or disable the Instagram lightbox popup

    You can also change how many comments Smash Balloon will show in the lightbox. Lots of positive comments can be a powerful form of social proof, which will often help you sell more products and services.

    However, they can also be distracting so you may want to type a maximum number into the ‘No. of comments’ box.

    How to limit the number of comments in a shoppable Instagram feed

    Another option is to hide comments completely, by clicking on the ‘Comments’ toggle.

    When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add the shoppable Instagram feed to your website.

    How to Embed Instagram Feed in WordPress

    You can add the shoppable feed to your website using a block, widget, or shortcode.

    If you’ve created more than one feed using the Smash Balloon plugin, then you’ll need to know the feed’s code if you’re going to use a widget or block.

    To get this code, go to Instagram Feed » All Feeds and then copy the value in the ‘Shortcode’ column.

    The code for a shoppable Instagram feed

    If you want to embed the Instagram feed in a page or post, then we recommend using the Instagram Feed block.

    Just open the page or post where you want to embed your shoppable photo and video feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Instagram Feed.’

    When the right block appears, click to add it to the page or post.

    The Instagram Feed WordPress block

    The block will show one of your Smash Balloon feeds by default. If you want to show a different Instagram feed instead, then find ‘Shortcode Settings’ in the right-hand menu.

    Here, simply add the shortcode and then click on ‘Apply Changes.’

    Adding a shoppable Instagram feed to a page or post

    The block will now show all the photos and videos from your Instagram feed. Just publish or update the page to make the feed live on your website.

    Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to shop using your Instagram feed from any page of your site.

    Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

    Adding a shoppable feed to any widget-ready area

    In the search bar, type in ‘Instagram Feed’ and select the right widget when it appears.

    Just be aware that WordPress has a built-in Instagram widget, so make sure you choose the one that shows the official Instagram logo.

    Adding a shoppable Instagram widget to WordPress

    Next, simply drag the widget onto the area where you want to show the shoppable Instagram feed, such as the sidebar or similar section.

    The widget will automatically show one of the feeds you created using Smash Balloon. If this isn’t the shoppable Instagram feed you just created, then type the feed’s code into the ‘Shortcode Settings’ box.

    After that, click on ‘Apply Changes.’

    You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

    Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.

    For help placing the shortcode, please see our guide on how to add a shortcode.

    Finally, if you’re using a block-enabled theme, then you can use the full-site editor to add the Instagram Feed block anywhere on your website.

    In your dashboard, simply go to Appearance » Editor.

    How to add a shoppable Instagram feed to your WordPress theme

    By default, the full-site editor will show the theme’s home template. If you want to add the shoppable feed to a different template, then click on the arrow next to ‘Home.’

    You can then choose any design from the dropdown, such as the footer template.

    Selecting a different template in the WordPress FSE full-site editor

    If you don’t see the template in the list, select ‘Browse all templates.’

    The full-site editor will now show a list of all the templates you can edit. Simply click on the template where you want to show the shoppable Instagram feed.

    Choosing a WordPress template in the full-site editor (FSE)

    After choosing a template, just hover your mouse over the area where you want to add the shoppable Instagram feed.

    Then, click on the ‘+’ button.

    Adding a block to your WordPress theme using full-site editing (FSE)

    After that, start typing in ‘Instagram Feed.’

    When the right block appears, click to add it to the template.

    Adding a Smash Balloon instagram block to a WordPress theme

    As always, Smash Balloon will show a feed by default. You can change this feed by adding a shortcode following the same process described above.

    We hope this article helped you learn how to add Instagram shoppable images in WordPress. You may also want to see our guide on how to create a free business email address, or see our expert pick of the best WooCommerce plugins for your store.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Instagram Shoppable Images in WordPress first appeared on WPBeginner.

  • How to Embed Facebook Status Posts in WordPress

    Are you looking for a way to embed Facebook status posts in WordPress?

    Facebook statuses are an easy way to share important updates and time-sensitive information with your audience. By embedding your Facebook timeline in WordPress, you can get more engagement, let people know what’s happening on your Facebook page or group, and grow your followers.

    In this article, we will show you how to embed Facebook status posts in WordPress.

    How to embed Facebook status posts in WordPress

    Why Embed Facebook Status in WordPress?

    Facebook is the most popular social media platform in the world and has billions of active users. For website owners, Facebook is a powerful way to connect with a new audience and engage with the people who already know about your brand.

    Facebook is also perfect for sharing time-sensitive information in real time. In this way, you can use FOMO to create a sense of urgency.

    For example, you might post a status about how visitors are running out of time to enter your giveaway in WordPress, or take advantage of your flash sale.

    However, people won’t see your Facebook status if they just visit your website. This makes it difficult to grow your Facebook following and build a relationship with your audience.

    By embedding your Facebook status posts in WordPress, you can promote your social media page and encourage more people to follow you on Facebook.

    As you post new statuses, they’ll appear on your site automatically, so it’s also a great way to keep your website fresh, even for regular visitors.

    That being said, let’s see how to embed Facebook status posts in WordPress.

    Adding a Facebook Status Plugin to WordPress

    The easiest way to embed your Facebook status feed in WordPress is by using the free Smash Balloon Social Post Feed.

    This plugin lets you display text and links from your Facebook page or group.

    A Facebook post timeline, embedded on a WordPress website.

    In this guide, we’ll be using the free version of Smash Balloon as it allows you to embed Facebook statuses no matter what your budget. However, there’s Smash Balloon Facebook Feed that lets you embed different kinds of content. For example, you can embed a Facebook video in WordPress, and show images and videos in a lightbox popup on your site.

    The first thing you need to do is install and activate the Smash Balloon Social Post Feed plugin. For more details, see our guide on how to install a WordPress plugin.

    After that, you’ll need to connect Smash Balloon to your Facebook page or group, by going to Facebook Feed » All Feeds. Here, click on ‘Add New.’

    How to create a custom Facebook feed

    Smash Balloon pro lets you show posts from your photo albums, timeline, events, and more.

    However, the free version only allows you to embed your Facebook statuses so click on ‘Timeline’ and then select ‘Next.’

    The free Smash Balloon WordPress plugin

    Now, you need to select the page or group which you’ll get the Facebook statuses from.

    To get started, click on ‘Add New.’

    Adding a Facebook page or group to your WordPress website

    On the next screen, choose whether you want to embed the feed from a Facebook group or Facebook page.

    After that, go ahead and click on ‘Connect to Facebook.’

    How to connect a Facebook page or group to a WordPress website

    This opens a popup where you can log into your Facebook account and choose the pages or groups which you want to get the status updates from.

    As soon as you’ve done that, click on ‘Next.’

    Giving Smash Balloon access to your Facebook posts

    Facebook will then show all the information that Smash Balloon will have access to and the actions it can perform.

    To restrict Smash Balloon’s access to your Facebook account, just click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the content that you can embed on your WordPress blog or website.

    With that in mind, it’s a good idea to leave all the switches enabled.

    Connecting Facebook and WordPress using a free plugin

    When you’re happy with how your Facebook permissions are set up, click on ‘Done.’

    After a few moments, you should see a message confirming that you’ve connected your WordPress website to Facebook. With that done, click on the ‘OK’ button.

    Connecting Smash Balloon and Facebook successfully

    Smash Balloon will now take you back to the WordPress dashboard automatically.

    How to Embed Facebook Status Posts in WordPress

    You will now see a popup with the source you just linked to your website. Simply select the radio button next to your Facebook page or group and then click on the ‘Add’ button.

    Selecting a page or group as your Facebook source

    If you accidentally closed the popup, then don’t worry. You can simply refresh the tab to reopen the popup.

    After that, Smash Balloon will take you back to the Facebook Feed » All Feeds page automatically. Just like before, click on the ‘Add New’ button, select ‘Timeline,’ and then click on the ‘Next’ button.

    Now, select your Facebook page or group, and click on ‘Next.’

    Embedding Facebook status posts in WordPress

    Smash Balloon will now go ahead and create a timeline feed from the Facebook page or group you’ve chosen.

    This is a good start, but Smash Balloon has lots of settings that you can use to customize your embedded timeline.

    How to Customize Your Embedded Facebook Status Posts

    To fine-tune your timeline, go to Facebook Feed » All Feeds in the WordPress dashboard.

    Here, find the timeline feed you just created and click on the ‘Edit’ button next to it.

    Customizing the Facebook status timeline feed

    This opens the Smash Balloon feed editor, which shows a preview of your timeline to the right.

    On the left-hand side, you’ll see all the different settings you can use to customize how the timeline looks on your site. Most of these settings are self-explanatory, but we’ll quickly cover all the main areas.

    Customizing Facebook status posts in WordPress

    To start, you can change how the statuses are displayed by clicking on ‘Feed Layout.’

    On this screen, you can switch between list and masonry layouts, as well as change the feed height. As you make changes, the preview will update automatically so you can try different settings to see what looks the best for your website.

    Smash Balloon's Feed Layout settings

    You can preview how your status feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

    Mobile devices usually have smaller screens and less processing power, so if you’re not happy with how the feed looks then it’s smart to show fewer statuses on tablets and smartphones.

    Testing your Facebook post status on mobile devices

    To make this change, just type a different number into the ‘Mobile’ field in the ‘Number of Posts’ section.

    By trying out different layouts you can create a Facebook status feed that looks great across all devices.

    How to create a responsive social media layout for mobile

    By default, Smash Balloon feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your Facebook statuses fit comfortably on smaller screens.

    After testing the mobile version of your WordPress website, you may want to show fewer columns on smartphones and tablets.

    To do this, simply change the numbers under ‘Columns.’

    Adding and removing columns in a Facebook status feed

    When you’re happy with how the feed looks, click on the ‘Customize’ link.

    This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme.’

    Changing the color scheme in your Facebook status feed

    Smash Balloon uses a color scheme inherited from your WordPress theme by default, but on this screen, you can switch to a ‘Light’ or ‘Dark’ look.

    You can also create your own color scheme by selecting ‘Custom’ and then using the controls to change the text color in WordPress, change the background color, and more.

    Creating a custom color scheme using Smash Balloon

    By default, Smash Balloon adds a header to your feed, which is your Facebook profile picture and the name of the group or page.

    To customize this section, click on ‘Header’ in the left-hand menu.

    Changing the Facebook custom feed header

    Here, you can change the header size and color, hide your Facebook profile picture, and more.

    If you would prefer to remove the header entirely, then click to turn off the ‘Enable’ toggle.

    Adding a header to the Facebook status feed

    Next, you can change how the individual posts look inside your feed by selecting ‘Post Style’ from the left-hand menu.

    After that, click on ‘Post Style’ again.

    Customizing a Facebook status feed with Smash Balloon

    On this screen, you can choose between a regular and boxed layout.

    If you select ‘Boxed’ then you can create a colored background for each Facebook post.

    Adding colored box backgrounds to your embedded Facebook post statuses

    If you choose ‘Regular’ then you can change the thickness and color of the line that separates your different social media posts.

    In the following image, we’ve added a thicker line to our Facebook status feed.

    Adding borders to a Smash Balloon Facebook feed

    You can also customize the individual parts within each status by going back to the main settings screen.

    Once again, select ‘Post Style’ but this time choose ‘Edit Individual Elements’ instead.

    Customizing the posts inside a Facebook status feed

    You will now see a list of all the different content that Smash Balloon includes in each post, such as the date, post author, and event title.

    To remove a piece of content from your feed, simply click to uncheck its box.

    How to remove content from a live Facebook feed

    You can also customize how each type of content looks by clicking on it.

    For example, in the following image, you can see settings to change the size and color of the author text.

    Customizing how the post author is displayed in WordPress

    By default, Smash Balloon doesn’t include the Facebook ‘like’ button in your feed.

    This button makes it easier for visitors to follow you on Facebook, so you may want to add it to your status feed by selecting the ‘Like Box’ settings.

    Adding a like button to the Facebook status feed

    After that, simply click on the ‘Enable’ button so that it turns blue.

    You can now use the settings to change where the link box appears and the kind of content included in the box, such as your Facebook cover photo and total number of followers.

    Adding a like button to an embedded Facebook status page

    If you upgrade to Smash Balloon premium, then there are some more settings to explore. This includes a lightbox feature that allows visitors to explore your content in a popup.

    Since you’re using the free version of Smash Balloon for now, you can go ahead and click on ‘Save’ to store your changes.

    The next step is adding the Facebook status feed to your WordPress website.

    How to Embed Facebook Status Posts in WordPress

    You can add your Facebook status feed to WordPress using a block, widget, or shortcode.

    If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code if you’re going to add it using a block or widget.

    To get this information, simply go to Facebook Feed » All Feeds and then look at the feed="" part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.

    In the following example, we’ll need to use feed="8".

    Adding Facebook content to WordPress using a shortcode

    If you want to embed your Facebook statuses in a page or post, then we recommend using the ‘Custom Facebook Feed’ block.

    Simply open the page or post where you want to embed the status feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Custom Facebook Feed.’

    When the right block appears, click to add it to the post or page.

    Adding a Facebook timeline to your website using a WordPress block

    The block will show one of your Smash Balloon feeds by default. If you want to use a different feed instead, then simply find ‘Shortcode Settings’ in the right-hand menu.

    You can now add the feed="" code to this box. Once you’ve done that, click on the ‘Apply Changes’ button.

    Showing different Facebook feeds using shortcode

    The block will now show all the status updates from your Facebook page or group. Just publish or update the page to make the feed live.

    Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to see your latest Facebook updates across your entire website.

    Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

    The Smash Balloon Custom Facebook Feed widget

    Now, start typing ‘Custom Facebook Feed’ into the search bar to find the right widget.

    You can now drag it onto the area where you want to show your Facebook status updates. By default, the widget will show one of the feeds you created using Smash Balloon.

    Adding a social media widget to your WordPress website

    To show a different feed instead, type the feed’s code into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’

    You can now click on the ‘Update’ button to make the widget live.

    How to publish a Facebook feed to your website

    For more information, please see our step-by-step guide on how to add and use widgets.

    Finally, you can embed your status on any page, post, or widget-ready area using a shortcode. To get the shortcode, simply go to Facebook Feed » All Feeds and copy the value in the ‘Shortcode’ column.

    You can now add this code to your site. For more information, please see our detailed guide on how to add a shortcode in WordPress.

    We hope this article helped you learn how to embed Facebook status posts in WordPress. You may also want to see our guide on how to create an email newsletter and the best WordPress Facebook plugins to grow your blog.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Embed Facebook Status Posts in WordPress first appeared on WPBeginner.

  • How to Add Your Social Media Feeds to WordPress (Step by Step)

    Do you want to add your social media feeds to a WordPress website?

    Showing Facebook, Twitter, YouTube, and Instagram feeds on WordPress can get you more followers and engagement on social media. It’s also a great way to keep your website fresh and interesting.

    In this guide, we’ll show you how to add custom social media feeds to WordPress and even create a social wall that brings all your social content together in one place.

    How to add your social media feeds to WordPress (Step by step)

    Why Add Social Media Feeds to Your WordPress Site?

    Billions of people use social media every day to connect with family, friends, and even brands. According to our marketing statistics research, people spend around 2 hours and 29 minutes on social media every day. That’s plenty of time to promote your content to existing followers and connect with new people.

    If you have one or more social media accounts, then you’re already off to a good start. However, it’s also smart to add these social feeds to your WordPress website.

    By embedding social media posts in WordPress, you can promote your different accounts to the people who visit your website. This can get you more likes, shares, and engagement.

    Adding a Facebook social media feed in WordPress

    If visitors like what they see, they might even decide to start following you on different social networks.

    Once you’ve embedded a social feed, new posts will appear on your website automatically. This can be a great way to keep your website fresh and interesting, even for regular visitors.

    If you run an online store, then a social media feed can even help you get more sales. In fact, 43% of people use social media to make purchasing decisions.

    With the right plugin, you can display your Facebook page reviews in WordPress, or add shoppable Instagram images to your website.

    Adding a shoppable link to an Instagram post

    With that being said, let’s see how you can add different social media feeds to WordPress.

    How to Add Social Media Feeds to WordPress

    The best way to add social media feeds to your WordPress blog is by using Smash Balloon.

    It’s the best social media feed plugin for WordPress and it’s trusted by over 1.5 million users. With this plugin, you don’t have to spend time dealing with jQuery code, APIs, or trying to arrange your social posts in a nice layout. Everything just works.

    Smash Balloon has separate plugins for all the major social networks including YouTube, Twitter, and Facebook. It even allows you to combine multiple social networks and show all of your posts in a single feed.

    With that being said, let’s see how you can add different social feeds to your WordPress website. Simply use the quick links below to jump straight to the social network that you want to add.

    Adding a Facebook Social Media Feed in WordPress

    Facebook is the most popular social media platform in the world, with 2.9 billion monthly active users. No matter whether you have a small business website, a personal blog, a WordPress membership website, or something else, it’s very likely that your target audience are familiar with Facebook.

    When you add a Facebook feed to WordPress, new posts will appear on your website in real-time. Visitors can also like, share, and comment on your WordPress posts, so this is a great way to get more engagement on Facebook.

    An example of an embedded Facebook feed, created using Smash Balloon

    The Smash Balloon Custom Facebook Feed plugin allows you to embed Facebook videos in WordPress, show photos and videos, and more.

    You can even create a custom lightbox popup so visitors can see your full-sized images and watch your Facebook videos, without having to leave your WordPress website.

    An embedded Facebook video, seen in a lightbox on a WordPress website

    If you host regular in-person or online events, then it’s a good idea to create them as Facebook events on your page or group. Visitors can then mark themselves as interested or going to the event, invite other people, and share the event on their own Facebook page.

    Once you’ve added these events to Facebook, you can easily promote them to the people who visit your website. Simply create a feed of your upcoming Facebook events and then add it to your WordPress website.

    To learn more, please see our guide on how to add a Facebook event calendar in WordPress.

    Adding a Facebook event calendar to your WordPress website

    No matter what kind of Facebook feed you create, you can fine-tune how that feed looks and acts using the intuitive Smash Balloon editor.

    Here, you can change the feed’s color scheme, design a custom header, add ‘like’ and ‘load more’ buttons, and much more.

    The Smash Balloon Facebook feed editor

    For detailed step-by-step instructions, please see our guide on how to create a custom Facebook feed in WordPress.

    Adding an Instagram Social Media Feed in WordPress

    With more than 2 billion monthly active users, Instagram is a great place to promote your website, products, and services.

    Depending on your industry, Instagram may even be the most important part of your social media strategy. For example, Instagram is particularly popular among top fashion blogs, lifestyle, cooking, and photography websites.

    If you’re posting beautiful photos and engaging videos to Instagram, then it makes sense to post that content to WordPress too.

    An Instagram photo feed, created using Smash Balloon

    By adding your Instagram social feed to WordPress, you can offer visitors a highly engaging and visual experience directly on your website. This can increase pageviews and reduce bounce rate in WordPress.

    You can add images in WordPress manually, but you’ll need to keep adding new photos as you post them to Instagram. This can take a lot of time and effort.

    Since there’s no link between your WordPress website and your Instagram account, visitors can’t easily like or share these photos on Instagram. As a result, you may miss out on lots of social media engagement.

    The easiest way to add an Instagram feed to WordPress is by using the Smash Balloon Instagram Feed plugin. This plugin allows you to embed a beautiful and professionally-designed Instagram feed on your website.

    An example of an Instagram feed, created using Smash Balloon

    The feed updates automatically every time you post to Instagram, so visitors always see the latest photos.

    You can even show other people’s photos on your site by creating a hashtag feed or displaying the posts that other people have tagged your account in. This can be a powerful form of social proof that encourages people to trust your website or business.

    In the following image you can see an example of an online store that uses a custom Instagram feed to show user-generated content.

    An example of Instagram user-generated content

    In this way, you can use a custom Instagram feed to create customer trust and make more money online.

    For detailed step-by-step instructions, please see our guide on how to create a custom Instagram feed in WordPress.

    Adding a Twitter Social Media Feed in WordPress

    WordPress lets you manually embed tweets in WordPress blog posts and pages using the built-in Twitter block.

    A single tweet, embedded using the WordPress Twitter block

    However, this block only lets you embed a single tweet at a time. This is a quick and easy method if you just want to show a small number of tweets. However, if you want to embed multiple tweets then we recommend using Smash Balloon Twitter Feed.

    This plugin allows you to create a Twitter feed that updates automatically as you post new tweets. You can then add this feed to any page, post, or widget-ready area.

    Adding a Twitter feed to your WordPress website

    Smash Balloon Twitter Feed also lets you create hashtag feeds.

    This is useful for adding context and third-party content to your blog posts. For example, if you’re starting a fashion blog then you might create feeds for popular fashion-related hashtags such as #lookbook or #OOTD.

    Creating a hashtag Twitter feed in WordPress

    You can even use Smash Balloon to show the Twitter feed from a third-party account. This is perfect if you have a relationship with an influencer or affiliate marketer, and want to show their tweets on your website.

    For more instructions on adding a Twitter feed to WordPress, see our guide on how to embed tweets in WordPress.

    Adding a YouTube Social Media Feed in WordPress

    Blog posts with videos get 83% more traffic than those without videos. With that in mind, we recommend adding your YouTube videos to WordPress, too.

    If you run an online store using a plugin such as WooCommerce, then videos can even get you more sales. In fact, 88% of people have bought a product or service after watching a video.

    If you’ve created any YouTube videos showing your products or services, then adding them to your website could boost your profits.

    If you only want to add a small number of videos to your site, then it’s easy to embed YouTube videos in WordPress blog posts. However, if you want to show more than one video, then it’s difficult to create a nice gallery layout using the built-in blocks and tools alone.

    That’s why we recommend embedding your YouTube channel feed using Feeds for YouTube by Smash Balloon.

    Embedding a YouTube feed in WordPress using a free plugin

    For step-by-step instructions, please see our guide on how to show the latest videos from your YouTube channel in WordPress.

    After connecting WordPress to your YouTube channel, you can customize how the videos look with Smash Balloon’s user-friendly editor.

    Customizing the YouTube video feed using Smash Balloon

    When you’re happy with how the feed looks, you can easily add it to any page, post, or widget-ready area using shortcode.

    The Smash Balloon plugin also comes with a ready-made Feeds for YouTube block.

    The Feeds for YouTube WordPress block

    The free plugin has everything you need to create a YouTube video gallery in WordPress, but if you want more advanced features, then there’s also a premium Smash Balloon YouTube Feed plugin that you can use.

    This plugin allows you to show videos from your favorites list, embed live streams, and more.

    Adding a Combined Social Wall in WordPress

    So far, you’ve seen how to add individual feeds from different social media platforms. However, many websites have multiple social media accounts, such as a Facebook page, a YouTube channel, and a Twitter profile.

    If you create unique content for each platform, then you may want to combine all of that content into a single social media feed. This kind of social wall can convince visitors that you have a big presence on social media, and that you’re creating all kinds of interesting and varied content across the different platforms.

    This single feed can get you followers and engagement across multiple platforms. It’s also a good choice if you have limited space, and don’t want to fill up your website with lots of separate social media feeds.

    If you want to combine several social media accounts into a single feed, then we recommend the Smash Balloon Social Wall plugin.

    It’s the best social stream plugin for WordPress and allows you to combine Instagram, Facebook, Twitter, and YouTube social content into a single feed.

    A social wall, created using Smash Balloon

    Already used the Smash Balloon plugins to create separate Facebook, Instagram, Twitter, or YouTube feeds? Then you can add these feeds to your social wall with a few clicks.

    Social Wall will then take your settings and automatically create a shortcode that you can add to any page, post, or widget-ready area. Simply publish your changes, and the social wall will appear on your website.

    Note: To use this plugin, you’ll need to install and activate at least one of the Pro Smash Balloon plugins mentioned above. For example, if you wanted to show Facebook and Instagram content on your social wall, then you’ll need both the Social Post Feed and the Social Photo Feed plugins.

    To get started, you’ll need to install and activate the Smash Balloon Social Wall plugin. For more information, please see our guide on how to install a WordPress plugin.

    Once the plugin is installed and activated, go to Social Feeds » Create a Social Wall.

    Creating a social wall in WordPress

    Simply select each feed that you want to add to the social wall.

    For example, you can combine posts from your Instagram and Facebook accounts.

    Adding multiple social feeds to a social wall

    On this screen you can also connect any extra social accounts that you want to use.

    Simply click on a ‘Connect…’ button and then follow the onscreen instructions to connect the social media account.

    Adding a Facebook feed to a social wall

    After that, click on the ‘Customize’ tab.

    Here, you can change the number of posts to show in the social wall, the feed layout, how often it updates, and more.

    How to customize a social wall in WordPress

    There are other settings you can use to change the wall’s color scheme, background color, button text, and more. Most of these settings are fairly self-explanatory, so it’s worth looking through them to see what changes you want to make.

    When you’re finished, click on ‘Save Changes’ to store your settings.

    Once you’ve done that, click on the ‘Configure Wall’ tab. Here, you’ll see a shortcode that allows you to add the social wall to any page, post, or widget-ready area.

    Configuring the social wall in WordPress

    For more information about working with shortcodes, please see our guide on how to add a shortcode in WordPress.

    After that, simply publish the page or post, or update the widget-ready area to make your social wall live.

    We hope this article has helped you add social media feeds to WordPress. You may want to see our guide on how to create an email newsletter, or our expert pick of the best live chat software for small businesses.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Your Social Media Feeds to WordPress (Step by Step) first appeared on WPBeginner.

  • How to Easily Embed Instagram in WordPress (Step by Step)

    Do you want to embed Instagram feeds in WordPress?

    Showing Instagram photos and videos on your website helps keep your content fresh, increases user engagement, and builds trust. It’s also a great way to promote your Instagram account and get more followers.

    In this article, we will show you how to embed Instagram in WordPress, step-by-step.

    How to easily embed Instagram in WordPress (Step by step)

    Why Embed Instagram on Your WordPress Site?

    With over 1.21 billion monthly active users, Instagram is a great place to promote your products and services, build brand awareness, and grow your audience.

    However, people won’t see your Instagram content if they just visit your website. With that in mind, it’s smart to embed your Instagram feed in WordPress, so everyone can see it.

    This is an easy way to promote your social media page and encourage more people to follow you on Instagram. It can also keep your WordPress website fresh, since new Instagram posts will appear on your site automatically.

    All of this new content can improve the search engine optimization (SEO) of your site, and encourage visitors to keep coming back to check the latest posts.

    You can even display reviews in WordPress, show hashtag feeds, and embed any posts you’ve been tagged in. All of this is powerful social proof that can build trust and get you more sales.

    With that being said, let’s see how you can embed an Instagram feed in WordPress.

    How to Install an Instagram Photos Plugin

    The best way to embed Instagram in WordPress is by using the Smash Balloon Social Photo Feed.

    This free plugin lets you show photos from one or more Instagram accounts, in a fully customizable feed.

    An example of an embedded Instagram feed, created using Feeds for Instagram

    In this guide, we’ll be using the free version of Smash Balloon as it has everything you need to add an Instagram feed to your WordPress website. However, there’s also a pro version that allows you to display hashtag feeds, add Instagram shoppable images, and more.

    Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account as this allows Smash Balloon to show your Instagram bio and header automatically.

    For step-by-step instructions on how to do both of these things, see the FAQ section at the end of this guide.

    When you’re ready, go ahead and install and activate the Smash Balloon Social Photo Feed plugin. For more details, see our guide on how to install a WordPress plugin.

    How to Connect an Instagram Account to WordPress

    After activating the plugin, your first task is connecting your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

    How to create a new Instagram feed in WordPress

    With Smash Balloon pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different social media websites.

    Since we’re using the free plugin, simply select ‘User Timeline’ and then click on ‘Next.’

    How to add an Instagram timeline to your WordPress account

    Now, simply choose the Instagram account where you’ll get the photo feed from.

    To get started, click on the ‘Add Source’ button.

    Adding an Instagram account as a Smash Balloon source

    On the next screen, choose whether you want to show photos from a personal or business Instagram account.

    If you check the box next to ‘Personal’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the Instagram avatar and bio later in the plugin’s settings.

    Adding a personal or business Instagram account to WordPress

    After choosing ‘Personal’ or ‘Business,’ go ahead and click on ‘Login with Facebook.’

    You can now select the Instagram account that you want to feature on your WordPress website, and click on ‘Next.’

    Choose an Instagram account to use with Smash Balloon

    After that, check the box next to the Facebook page that’s linked to your Instagram account.

    When you’ve done that, click on the ‘Next’ button.

    How to add a Facebook page to your WordPress website

    You’ll now see a popup with all the information Smash Balloon will have access to and the actions it can perform.

    To restrict Smash Balloon’s access to your Instagram account, just click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos and videos that you can show on your WordPress blog or website.

    With that in mind, we recommend leaving all the switches enabled.

    When you’re happy with the settings, click on ‘Done.’

    How to change the Instagram permissions with Smash Balloon

    You’ll now see a popup with the Instagram account you just added to your website.

    Simply check the box next to that account and then click on ‘Add.’

    Choosing an Instagram account to add to your WordPress website

    Smash Balloon will now take you back to the Instagram Feeds » All Feeds screen.

    To create a feed, simply check the box next to the Instagram account that you want to use. Then, click on ‘Next.’

    How to create an Instagram feed using Smash Balloon

    The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.

    However, before embedding the Instagram feed you may want to customize how it looks and add any missing information.

    How to Customize Your Instagram Photo Feed

    By default, Smash Balloon will open your feed in its editor ready for you to customize.

    On the right, you’ll see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the photo feed.

    The Smash Balloon instagram editor

    Most of these settings are self-explanatory, but we’ll quickly cover some key areas.

    To start, you can change the Instagram photo layout and add padding by selecting ‘Feed Layout’ from the left-hand menu.

    As you make changes, the preview will update automatically so you can try different settings to see what looks the best.

    Changing the layout of an Instagram feed in WordPress

    By default, Smash Balloon shows the same number of photos whether the users are on desktop computers or mobile devices.

    You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

    Previewing how the Instagram feed layout looks on smartphone and mobile

    Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer Instagram photos and videos on mobile devices.

    To do this, just type a different number into the ‘Mobile’ field under ‘Number of Posts.’

    Showing a different number of posts on desktop and mobile

    By creating different layouts for smartphones, tablets, and desktop computers you can make sure the feed looks great, no matter what device the visitor is using.

    By default, the plugin feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your photos and videos fit comfortably on smaller screens.

    To change these default settings, simply type new numbers into the ‘Columns’ settings.

    Showing a different number of Instagram columns on desktop, smartphone, and tablet

    After making your changes, click on the ‘Customize’ link.

    This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme.’

    Smash Balloon's color scheme settings

    By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you may want to use instead.

    Another option is creating your own color scheme by selecting ‘Custom.’ Once that’s done, simply use the controls to change the background color, change the text color in WordPress, and more.

    Changing the Instagram column scheme using Smash Balloon

    By default, Smash Balloon adds a header to the Instagram feed, which is your profile picture and the name of your page. To change how this section looks, click on ‘Header’ in the left-hand menu.

    On this screen, you can change the size of the header, add a new color, or show your Instagram bio.

    Customize the Instagram header on your WordPress website

    Sometimes, you may want to show a different profile picture. For example, your Instagram avatar may not stand out from your theme so you want to show a custom logo instead.

    To change the profile picture, click on ‘Add Image’ under ‘Show custom avatar.’ You can then either choose an image from the WordPress media library or upload a new photo.

    Adding a custom avatar to an Instagram embed in WordPress

    You can also add a different bio. For example, you might encourage people to visit your profile on Instagram or to simply follow your account.

    To create a unique Instagram bio, simply type into the ‘Add custom bio’ box.

    Adding a custom Instagram bio to your WordPress website

    Smash Balloon automatically analyzes your Instagram photos and shows them at the best resolution. We recommend using these default settings, but you can make the Instagram images bigger or smaller if you need to.

    To change the image size, click on ‘Posts’ from the left-hand menu. Then, select the ‘Images and Videos’ option.

    Changing the resolution of embedded Instagram photos and videos

    You can now choose between thumbnail, medium, and full-size images using the dropdown menu that appears.

    If you’re unhappy with how the feed looks, then you can go back to this screen at any point and select ‘Auto-detect (Recommended)’ from the dropdown.

    How to auto-detect the resolution of your Instagram feed

    By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed so visitors can scroll through your photos and videos.

    You can change how this button looks by selecting ‘Load More Button.’

    Customize the Instagram Load More button in WordPress

    Here, you can help the ‘Load More’ button stand out by changing its background color, text color, and hover state.

    You can also try adding your own messaging to the button, by typing into the ‘Text’ field. This way your visitors will be more inclined to click.

    Adding custom messaging to the Load More button

    While we do recommend leaving this button enabled, you can remove it. For example, you might encourage people to visit your Instagram by limiting the number of photos they can see on your site.

    To remove the button, simply toggle the ‘Enable’ slider to turn grey.

    How to easily embed Instagram in WordPress

    If visitors like what they see, they may decide to subscribe using the ‘Follow on Instagram’ button that appears below the embedded feed.

    Since it’s such an important button, you may want to add some custom styling to help it stand out.

    You can do this by selecting ‘Follow Button’ in the left-hand menu. Here, you can change the button’s background color, hover state, and text color.

    Customizing the social media Follow button

    By default, the button shows a ‘Follow on Instagram’ label.

    You can replace this with your own call to action by typing into the ‘Text’ field.

    Customizing the Follow Us On Instagram button

    When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes.

    You’re now ready to add the Instagram feed to your WordPress website.

    How to Embed Instagram Feed in WordPress

    You can add the Instagram feed to your website using a block, widget, or shortcode.

    If you’ve created more than one feed using Smash Balloon Social Photo feed, then you’ll need to know the feed’s code if you’re going to use a widget or block.

    To get this code, go to Instagram Feed »All Feeds and then look at thefeed=""part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.

    In the following image, we’ll need to usefeed="1"

    Getting the code for a custom Instagram feed

    If you want to embed the Instagram feed in a page or post, then we recommend using the Instagram Feed block.

    Note: If you’re using a block-enabled theme, you can follow the instructions below to add the block anywhere on your site using the full-site editor.

    Just open the page or post where you want to embed your Instagram photo and video feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Instagram Feed.’

    When the right block appears, click to add it to the page or post.

    The Feeds for Instagram block

    The block will show one of your Smash Balloon feeds by default. If you want to show a different Instagram feed instead, then find ‘Shortcode Settings’ in the right-hand menu.

    Here, simply add thefeed=""code and then click on ‘Apply Changes.’

    Adding an Instagram feed code to WordPress

    The block will now show the photos and videos from your Instagram account. Just publish or update the page to make the feed live on your website.

    If you’re using a theme that does not use full-site editing, you can add the Smashballoon Instagram Feed to any widget-ready area, such as the sidebar or similar section so visitors can see it anywhere they go on your site.

    Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

    Adding an Instagram feed to a WordPress widget

    In the search bar, type in ‘Instagram Feed’ and select the correct widget when it appears.

    WordPress has a built-in ‘Instagram Feed’ block, so make sure you choose the one that shows the official Instagram logo.

    How to add an Instagram Feed to a widget-ready area

    After that, simply drag the widget onto the area where you want to show the Instagram feed, such as the sidebar or similar section.

    The widget will automatically show one of the feeds you created using Smash Balloon. If you want to show a different Instagram feed, then just type the feed’s shortcode into the ‘Shortcode Settings’ box.

    As long as you are adding the shortcode to the ‘Shortcode Settings’ box, you do not need to include the brackets around it.

    After that, click on ‘Apply Changes.’

    Adding the Instagram Feed block to a sidebar or other widget-ready area

    You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

    Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.

    Simply go to Instagram Feed »All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block.

    For help placing the shortcode, please see our guide on how to add a shortcode.

    Finally, if you have a block-enabled theme, then you can use the full-site editor to add the Instagram Feed block anywhere on your site.

    In the WordPress dashboard, simply go to Appearance » Editor.

    Opening the full-site editor (FSE)

    By default, the full-site editor will show the theme’s home template. If you want to add the Instagram feed to a different template, then click on the arrow next to ‘Home.’

    You can then choose any design from the dropdown, such as the footer template.

    Choosing a template in the WordPress FSE (full-site editor)

    If you don’t see the template in the list, then click on ‘Browse all templates.’

    The full-site editor will now show a list of all the templates you can edit. Simply click on the template where you want to show the Instagram feed.

    How to add an Instagram feed to your WordPress website

    After choosing a template, just hover your mouse over the area where you want to add the Instagram photo feed.

    Then, click on the blue ‘+’ button.

    How to add an Instagram block using the full-site editor and a block-enabled theme

    After that, start typing in ‘Instagram Feed.’

    When the right block appears, click to add it to the template. This will be the one with the official Instagram logo.

    Adding a social media feed using the WordPress full-site editor (FSE)

    As always, Smash Balloon will show a feed by default if you do not add a specific shortcode. You can change this feed by adding a shortcode following the same process described above.

    FAQs About Embedding Instagram in WordPress

    Smash Balloon makes it easy to show Instagram photos and videos on your website. That being said, here are some of the most frequently asked questions about adding an Instagram feed in WordPress.

    How Do I Create an Instagram Business Account?

    Smash Balloon Social Photo Feed can display photos from either a personal or business Instagram account.

    However, Smash Balloon can’t automatically fetch the Instagram avatar and bio from a personal Instagram account. With that in mind, you may want to check whether you have a personal or business account, and then switch to a business account so Smash Balloon can fetch your avatar and bio automatically.

    To check, just visit your Instagram account and click on the three-lined icon in the side menu.

    How to check whether you have a personal or business Instagram account

    After that, select ‘Settings.’

    If you don’t have a business account, then this screen will show ‘Switch to professional account’ in the left-hand menu.

    How to switch to a personal Instagram account

    If you currently have a personal account and want to switch to a business account, then simply give this link a click.

    How Do I Connect a Facebook Page to an Instagram Account?

    Before you can add an Instagram feed to WordPress, you’ll need to connect your Instagram account to a Facebook page.

    To do this, head over to the Facebook page that you want to use and then click on ‘Settings’ in the left-hand menu.

    After that, click on ‘Linked Account.’ You can now select ‘Instagram’ and click on the ‘Connect’ button.

    How to connect Facebook and Instagram

    Facebook will now show all the information it will be able to access, and the actions it can perform on Instagram.

    If you’re happy to go ahead, then click on the ‘Connect’ button.

    Giving Smash Balloon access to your Instagram account

    Just be aware that anyone else who manages your Facebook page will be able to see your Instagram messages, and respond to them. If you want to keep your Instagram messages private, then click to disable the option.

    When you’re happy and ready to move on, click ‘Confirm.’

    How to configure your Instagram permissions using Smash Balloon

    This opens a popup where you can type in your Instagram username and password.

    After that, go ahead and click on ‘Log In.’

    Logging into your Instagram account

    After a few moments, you’ll see a message saying that your Instagram and Facebook accounts are now connected.

    We hope this article helped you learn how to easily embed Instagram in WordPress. You may also want to see our guide on how to create a custom Facebook feed in WordPress, or see our expert pick of the best social media plugins for WordPress.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Easily Embed Instagram in WordPress (Step by Step) first appeared on WPBeginner.