1. Home
  2. Plugin
  3. How to Spice Up Your WordPress Sidebar with Instagram Photos
wpholic 3 weeks ago

How to Spice Up Your WordPress Sidebar with Instagram Photos

Do you want to add some flair to your WordPress sidebar? Why not display your Instagram photos to keep your website fresh and interesting, while also promoting your Instagram account? In this article, we will show you how to effortlessly display your Instagram photos and videos in a WordPress sidebar widget.

How to display Instagram photos in WordPress sidebar widget

Why Add an Instagram Feed to Your WordPress Site?

Instagram boasts over 2 billion monthly active users, making it a prime platform to showcase your products, services, and blog posts. Depending on your industry, Instagram may even be the best place to promote your website. For instance, it is highly popular among top fashion blogs, cooking, lifestyle, and photography websites. However, if visitors only see your WordPress website, they won’t discover your Instagram posts, which could hinder your Instagram following and engagement. That’s where adding an Instagram feed to your WordPress website comes in.

By integrating an Instagram feed, you can drive more traffic to your Instagram page and encourage visitors to engage with your posts by leaving comments, clicking the “Share” button, and more. Now, let’s dive into how you can easily display your Instagram photos in the WordPress sidebar widget.

How to Install an Instagram Photos Plugin

The best way to display Instagram photos in your WordPress sidebar is by using the Smash Balloon Social Photo Feed plugin. This free plugin allows you to showcase photos from one or more Instagram accounts in a fully customizable feed. You can effortlessly add the feed to your sidebar using a shortcode or block.

Embedded Instagram feed example

After placing the feed on your website, it will automatically update whenever you make new Instagram posts. This enables you to keep your site fresh and interesting without the need for manual updates.

In this guide, we will focus on using the free version of Smash Balloon, which provides all the necessary features for embedding an Instagram feed. However, there is also a Pro version available that offers additional capabilities, such as displaying hashtag feeds and adding Instagram shoppable images in WordPress.

Before getting started, you will need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, you may also want to convert it into a business account. This allows Smash Balloon to display your Instagram bio and header automatically. You can find step-by-step instructions on how to do both of these things in our FAQ section at the end of this post.

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

How to Connect an Instagram Account to WordPress

After activating the plugin, connect your Instagram account to WordPress by navigating to Instagram Feed » Settings and clicking on “Add New.”

How to create a new social media feed using Smash Balloon

If you’re using the free version of Smash Balloon, select “User Timeline” and click “Next.”

Smash Balloon

Next, choose the Instagram account you want to use to create a custom Instagram photo feed in WordPress. Click “Add Source” to proceed.

Connecting Instagram to your WordPress website

On the following screen, select whether you want to display photos from a personal or business Instagram account. If you choose “Personal,” Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can manually add the avatar and bio in the plugin’s settings.

Connecting a personal or business Instagram account to WordPress

After choosing “Personal” or “Business,” click “Login with Facebook.” Proceed to select the Instagram account you wish to use and click “Next.”

READ MORE  WP Rocket :#1 Ultimate Wordpress Caching Plugin

How to display an Instagram feed on your WordPress website

Once done, check the box next to the Facebook page linked to your Instagram account and click “Next.”

Choose a page to connect to WordPress

Smash Balloon will present a popup displaying the information it will have access to and the actions it can perform. You can restrict Smash Balloon’s access by toggling any of the switches from “Yes” to “No.” However, note that this may affect the photos and videos you can embed on your WordPress site. We recommend leaving all the switches enabled.

When you’re ready, click “Done.”

Adding permissions to your Facebook app

You will now see a popup showing the Instagram account you just linked to WordPress. Select the account by checking the box next to it, then click “Add.”

Selecting an Instagram account

Smash Balloon will redirect you to Instagram Feeds » All Feeds automatically. Simply check the box next to your Instagram account to create a social media feed and click “Next.”

How to create an Instagram social media feed

The plugin will now generate an Instagram photo feed for your website and open it in the Smash Balloon editor.

How to Customize Your Instagram Photo Feed

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

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

Smash Balloon

Most of these settings are self-explanatory, but let’s 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. The preview will automatically update as you make changes, allowing you to experiment and find the perfect settings for your Instagram photo feed.

By default, Smash Balloon displays the same number of posts on desktop and mobile devices. You can use the buttons in the upper-right corner to preview how the Instagram feed will look on desktops, tablets, and smartphones. This way, you can ensure your Instagram feed looks great regardless of the device.

Smartphones and tablets have smaller screens and less processing power, so you may want to show fewer photos and videos on mobile devices. Simply enter a different number into the “Mobile” field under “Number of Posts.”

Similarly, you can adjust the number of columns displayed on smartphones and tablets. If you feel the columns don’t look good on smaller screens, change the values in the “Columns” section.

Once you’re satisfied with the changes, click “Customize” to return to the main Smash Balloon editor. Proceed to explore the “Color Scheme” settings.

Adding a different color scheme to an Instagram feed in WordPress

By default, Smash Balloon inherits the color scheme from your WordPress theme, but it also offers light and dark themes. You can even create a custom color scheme by selecting “Custom” and adjusting the background color, button color, text color, and more.

Smash Balloon adds a header to your feed by default, featuring your Instagram profile picture and page name. This provides additional context rather than simply embedding Instagram posts without explanation. To modify the header’s appearance, click on “Header” in the left-hand menu. Here, you can change the size and color of the header and choose whether to show or hide your Instagram bio.

Adding a header to the Instagram feed on your WordPress website

If you want to use a different profile picture, click “Add Image” under “Show custom avatar.” You can choose an image from the WordPress media library or upload one from your computer.

Likewise, you can display a different bio by typing it into the “Add custom bio” box.

Smash Balloon automatically analyzes your Instagram photos and displays them at the optimal resolution. While the default settings should work well for most websites, you can adjust the image size if desired. Navigate to “Posts” in the left-hand menu and select “Images and Videos.” Use the dropdown menu to choose between thumbnail, medium, and full-size. If you’re unhappy with the results, you can always revert to the default “Auto-detect (Recommended)” option.

READ MORE  Spice Up Your WordPress Posts with Click to Tweet Boxes

Changing Smash Balloon

Smash Balloon includes a “Load More” button at the bottom of your Instagram feed, allowing visitors to view more photos and videos. To customize this button, select “Load More Button” from the left-hand menu.

Customizing the social media Load More button

You can modify the button’s background color, text color, hover state, and even change the button’s label by typing into the “Text” field. Alternatively, you can remove the button completely by disabling the toggle. This encourages people to visit your Instagram page by limiting the number of posts they can see on your website.

Moreover, Smash Balloon automatically adds a “Follow on Instagram” button, allowing visitors to follow your Instagram account. To make this button stand out, click on “Follow Button” in the left-hand menu. Here, you can adjust the button’s background color, hover state, and text color. Customize the button’s label by typing into the “Text” field.

Customizing the social media follow button

When you’re satisfied with the appearance of your Instagram feed, be sure to click “Save” to apply the changes. Now, it’s time to add the Instagram feed to your WordPress sidebar widget.

How to Add Your Instagram Photos to a WordPress Sidebar Widget

To embed the Instagram feed in your sidebar or a similar section, you can use the Instagram Feed block. If you have created multiple feeds with Smash Balloon, you’ll need to know the feed’s code.

Go to Instagram » All Feeds and copy the shortcode from the “Shortcode” column. For example, you might need to use instagram-feed feed=1, as shown in the image below.

Adding Instagram photos and videos using a code

Next, navigate to Appearance » Widgets in your WordPress dashboard and click the blue “+” button.

The WordPress widget editor

In the search bar, type “Instagram Feed” and select the widget with the official Instagram logo. Avoid choosing the built-in Instagram widget provided by WordPress.

The Instagram Feed block

Drag the widget to the desired area, such as the sidebar, where you want to display the Instagram feed. It will automatically show one of the feeds you created using Smash Balloon.

To show a different feed, simply enter the feed’s shortcode in the “Shortcode Settings” box and click “Apply Changes.”

Adding an Instagram feed to WordPress using shortcode

After making your desired adjustments, click “Update” to make the widget live. For detailed instructions, refer to our step-by-step guide on how to add and use widgets in WordPress.

If you’re using a block-enabled theme, you can add an Instagram feed to the sidebar using the full-site editor. To begin, go to Appearance » Editor in the WordPress dashboard.

In the editor, select the sidebar section and click the “+” button. Then, type “Instagram Feed” to locate the necessary block.

Adding an Instagram feed using the full-site editor

Once you find the block, add it to the sidebar. By default, the full-site editor will display one of the Instagram feeds created with Smash Balloon. To show a different feed, simply insert the corresponding shortcode as described above.

Once you’re satisfied with the appearance of your Instagram feed, click “Save.”

How to Display a Specific Instagram Photo in WordPress

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

A single Instagram post, embedded in WordPress

In the past, you could easily embed Instagram posts in WordPress using the oEmbed protocol. However, Facebook’s changes to oEmbed have made it more challenging to embed Instagram photos. But don’t worry—Smash Balloon provides a solution by fixing the Facebook and Instagram oEmbed issue. With Smash Balloon, you can effortlessly embed a specific Instagram post in any page, post, or widget-ready area, such as the sidebar. You can even create a custom Facebook feed in WordPress.

READ MORE  How to Easily Convert Classic Blocks to Gutenberg in WordPress

To enable this feature, go to Instagram Feed » oEmbeds and click “Enable” next to “Instagram.”

Enabling the Facebook and Instagram oEmbed feature

Next, go to Appearance » Widgets and click the blue “+” button. In the search bar, enter “Embed” to find the appropriate block.

The WordPress Embed block

Once you see the “Embed” block, drag it to the area where you want to display the photo. In the “Embed” field, paste the URL of the Instagram post you want to embed, then click “Embed.”

Adding an embed block to your WordPress website

WordPress will now display the specific Instagram post. If you’re satisfied with its appearance, click “Update” to make it live.

If you’re using a block-enabled theme, adding specific Instagram posts requires the full-site editor. Enable Smash Balloon’s oEmbed feature and obtain the URL of the Instagram post using the same process described above.

Access the full-site editor by going to Appearance » Editor in the WordPress dashboard. Once inside the full-site editor, click the “+” button in the sidebar section and type “Embed.”

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

When you see the appropriate block, add it to the sidebar. Insert the URL of the desired Instagram post in the “Embed” field and click “Embed.”

Adding an Instagram feed using an Embed block

The full-site editor will now display the Instagram post. If you’re satisfied with how it looks, click “Save” to publish the photo or video to the block-enabled sidebar.

FAQs About Displaying Instagram Posts in WordPress

Smash Balloon simplifies the process of showcasing Instagram posts on your WordPress website. If you have any questions about displaying Instagram posts, check out these frequently asked questions:

How do I create an Instagram business account?
Smash Balloon can display photos from either a personal or business Instagram account. However, Smash Balloon cannot automatically fetch the Instagram avatar and bio from a personal account, so you will need to add the avatar and bio manually in the plugin’s settings. If you have a personal account and wish to switch to a business account, go to your Instagram account, click the lined icon in the side menu, select “Settings,” and choose “Switch to professional account.”

How do I connect a Facebook page to an Instagram account?
Before you can display Instagram photos in WordPress, you must connect your Instagram account to a Facebook page. Visit the Facebook page you want to use, click “Settings” in the left-hand menu, and select “Linked Accounts.” Choose “Instagram” and click “Connect.” Facebook will outline the information it can access and the actions it can perform. Review the permissions and click “Connect.” You may also choose to restrict access to your Instagram messages if desired. Finally, log into your Instagram account and click “Log in” to complete the connection.

How do I display Instagram images on WordPress?
Embedding Instagram images in WordPress has become more complex due to changes in the oEmbed protocol. Previously, you could embed Instagram images effortlessly. However, you now need to register an app and use a client token to fetch data from the Facebook Graph API. Smash Balloon’s Social Photo Feed plugin has resolved this issue, allowing you to easily embed specific Instagram photos on your website. You can add Instagram photos to widget-ready areas, such as your WordPress sidebar, footer, and header, with ease.

We hope this article has helped you learn how to display Instagram photos in a WordPress sidebar widget. For more valuable insights, check out our guide on embedding a Facebook video in WordPress, as well as our expert recommendations for the best social proof plugins for WordPress and WooCommerce. If you enjoyed this article, don’t forget to subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

16 view | 0 comment
Giving is Forever
If you find this article useful, you can support the author with a cup of Coffee
https://wpholic.com
Bitcoin BTC
https://wpholic.com
Ethereum ETH
https://wpholic.com
Tether USDT
https://wpholic.com
Dogecoin DOGE
https://wpholic.com
Solana SOL

Recent Comments

https://wpholic.com
How to Care for Building Materials Taking care of the materials used in your projects is essential to making them endure. Whether you’re using wood, stone, metal, or other materials, knowing how to effectively maintain them can save time and money in the long run. For wood materials, especially outdoors, regular treatment and sealing are essential to preserving them from rain and rot. Coating with a wood cleaner and reapplying sealant every few years will assist the life of decks, fences, or wooden furniture. Keeping away from direct exposure with soil or standing water can also avoid damage over time. Stone elements, like pavers or pathways, may appear durable, but they still need attention. Regular cleaning and washing dirt can help them clean, and sealing the stone can stop cracking or fading from sun exposure. For moss buildup, a mild cleaner and brush can make them looking fresh again. Metal, commonly used in outdoor furniture or fixtures, can rust if not properly cared for. Regularly coating with a protective coating or using rust-proof paint can help metal in great condition. For smaller items, easily wiping them down and storing them during harsh weather can prevent corrosion. By spending a little time to maintain these elements, you can help that your creations remain appealing and functional for years to come. Regular attention, along with using quality materials, will save you from needing to make pricey repairs or replacements down the road. The advantages of using PA hardwood for home furnishings and ground cover. 85c4d61 Trusted hardwood lumber providers with nationwide delivery
https://wpholic.com
Maintaining shopping centers in malls clean and tidy is essential for drawing in shoppers and providing a pleasant customer journey. Regular pressure cleaning guarantees that walkways, and common areas remain clear of dirt, stains, and stains. A tidy and kept up retail complex offers a welcoming setting, inviting visitors to linger and purchase more. Additionally, neat common areas decrease the risk of slips and falls, boosting visitor security for customers. By implementing consistent high-pressure washing, mall operators will maintain a high quality of tidiness and attractiveness, resulting in higher customer satisfaction and return visits. If you're keen, feel free to check out my domestic and corporate high-pressure washing services website to learn more. Residential Building Steam Soft-Wash in Pleasanton for major gas companies Boosting the Look of Parking Lots ab2868a
https://wpholic.com
https://9humantypes.com/what-is-my-spiritual-gift - Ways to apply divine talents to honor God http://www.milneconcretepumping.com.au/ - Directory religious talents Sacred writings ae94148
https://wpholic.com
wpholic 4 months ago
Check mail pls
https://wpholic.com
Muhammad uzair 4 months ago
uzediting123@gmail.com Please add this email