embed | The Blog Pros

June 16, 2022

How to Embed Medium Blog Posts in WordPress

Do you want to embed Medium article posts on WordPress?

Medium is a popular blogging platform that allows you to easily publish articles on the internet. However, you may want to display those posts on your WordPress website as well.

In this article, we’ll show how to easily embed Medium article posts in WordPress.

Why Embed Medium Article Posts in WordPress?

Medium is a popular blogging platform that allows you to easily publish articles on the internet.

However, one downside of using Medium is that it doesn’t give you the same flexibility as a WordPress website.

For this reason, you may want to embed your Medium articles on WordPress.

WordPress is more flexible, you can use it to make any type of website and monetize your content any way you see fit.

How to Embed Medium Articles in WordPress

Normally, WordPress uses the oEmbed format to embed third party content from supported websites like YouTube, Twitter, and more.

Unfortunately, Medium doesn’t support oEmbed format, which makes it difficult to embed Medium articles in WordPress. There used to be plugins that allowed users to display their Medium articles on a WordPress blog, but they either don’t work, or they’re no longer maintained due to low demand.

So now, the only way to embed your Medium articles in WordPress is by using the RSS block or widget.

First, you need to find your Medium publication’s RSS feed. Usually, it is located at a URL like this:

https://medium.com/feed/your-publiction-name

If you are using a custom domain for your Medium publication, then your RSS feed would be located at:

https://your-domain.com/feed

Next, you need to edit the WordPress post or page where you want to embed Medium posts and add the RSS block to the content area.

After that, add your Medium RSS feed URL in the block settings.

WordPress will then fetch your recent Medium articles and display them. Under the block settings, you can choose to show excerpt, featured image, author, and date options.

The problem with this method is that you can’t embed a specific Medium article by itself. The block will automatically show you the latest Medium posts only.

If you would like more flexibility and freedom, then perhaps you should consider migrating your Medium articles to WordPress.

How to Migrate Medium Articles to WordPress

Migrating your Medium articles to WordPress would allow you to take advantage of all the flexibility and features of WordPress.

WordPress is the most popular website builder on the market. It powers more than 43% of all websites on the internet.

For more details, see our article on why you should use WordPress to make your website.

Step 1. Set Up Your WordPress Website

If you haven’t already done so, then you’ll need to set up a WordPress website first.

There are two types of WordPress websites: WordPress.com which is a blogging platform, and WordPress. org which is also called self-hosted WordPress. For more details, see our article on the difference between WordPress.com vs WordPress.org.

We recommend using self-hosted WordPress as it gives you complete freedom to build your website however you choose.

To get started, you’ll need a domain name and a WordPress hosting account.

Fortunately, Bluehost has agreed to offer WPBeginner users a free domain name and a generous discount on hosting. Basically, you can get started for $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

After signup, Bluehost will send login details to your email address which will allow you to login to your Bluehost dashboard.

Bluehost Dashboard - log in to WordPress

You’ll notice that Bluehost has already installed WordPress for you.

You can now go ahead and simply login to your new WordPress website.

Step 2. Import Your Medium Articles to WordPress

Before you can import your Medium articles to WordPress, you’ll need them in the format supported by WordPress.

Medium doesn’t provide a tool to do that by default. But it does allow you to export your content in an unsupported format.

Simply login to your Medium account and click on your profile photo. From here, click on the Settings link.

This will take you to the settings page where you need to scroll down to the ‘Download Your Information’ section.

Click on the ‘Download zip’ button to export your Medium data.

On the next page, you need to click on the export button. Medium will then prepare your download and send a link to you via email.

After you have downloaded the export file, you need to visit the Medium to WordPress Importer tool. It is a free online tool that converts your medium export file into a WordPress-compatible format.

First, you need to provide your Medium profile URL, your name, and email address.

If your blog is using a custom domain on Medium, then you need to enter your custom domain URL.

Now, if you are using your Medium profile URL, then you’ll be asked to upload the Medium export file you downloaded in the earlier step.

Next, click on the ‘Export My Medium Website’ button to continue.

The Medium to WordPress Importer will now prepare your export file. Once finished, it will show you a success message with a button to download your WordPress-ready Medium export file.

Download your WordPress compatible import file

You can now download the file to your computer.

After that, switch to your WordPress website and go to the Tools » Import page.

You will see a list of importers available for different platforms. You need to scroll down to WordPress and then click on the ‘Install Now’ link.

WordPress will now fetch and install the importer plugin.

Once finished, you need to click on ‘Run Importer’ to launch it.

On the next screen, click on the ‘Upload file and import’ button to continue.

The WordPress importer will now upload your Medium export file and analyze it.

On the next screen, it will ask you to assign authors.

You can import the author from your Medium website, create a new author, or assign all content to your existing WordPress user.

Don’t forget to check the box next to ‘Download and import file attachments’ option. It will attempt to get images from your Medium website into your WordPress media library.

You can now click on the Submit button to run the importer. Upon completion, you will see a success message.

Congratulations, you have successfully imported content from Medium to WordPress!

You can now go to the posts page in your WordPress admin area to double check if all your content is there.

Step 3. Import Images from Medium to WordPress

The WordPress importer tries to import images from your Medium articles to the WordPress media library. However, it may fail due to the way Medium displays images in your articles.

To see all the images that have been imported successfully, simply go to the Media » Library page.

If some or all of your images failed to import, then you will need to import them again.

To do that, you first need to install and activate the Auto Upload Images plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to update the posts containing the external images. This update will trigger the plugin to fetch and store the external images in the article.

You can also bulk update all articles at once to quickly import all images. For detailed instructions, see our step by step tutorial on how to import external images in WordPress.

Step 4. Setting up Redirects for Medium Articles

If your Medium publication uses a medium.com URL, then you cannot setup redirects.

However, if you were using a custom domain for your Medium publication, then you can set up custom redirects in WordPress.

First, you will need to get all URLs of your Medium articles and save them in a text file. After that, you need to start setting up redirects for all your articles.

There are multiple ways to set up redirects in WordPress. You can follow the instructions in our beginner’s guide to creating redirects in WordPress for detailed instructions.

Step 5. Deciding What to Do With Your Medium Articles

Now, having the same articles on two different websites will affect their search engine optimization (SEO) since Google will consider them duplicate content. That means that your new WordPress site may not get any search engine traffic.

To avoid this, you can simply deactivate your Medium account. Deactivating an account keeps all your data on Medium, but it becomes publicly unavailable.

Simply click on your Profile icon under your Medium account and then select Settings.

From settings page, scroll down to the Security section.

Then, click on the Deactivate Account link at the bottom of the page.

Bonus Step: Promoting Your Medium Articles on WordPress

Now that you have migrated your articles from Medium to WordPress, here are a few tools to promote your articles.

1. All in One SEO – The best WordPress SEO plugin to easily optimize your blog posts for search engines.

2. SeedProd – Enjoy the endless design options with the best WordPress page builder. It allows you to easily create beautiful landing pages for your website.

3. WPForms – Make your website interactive by adding beautiful contact forms. WPForms is the best WordPress contact form plugin with a drag and drop interface to create any kind of form you need.

4. OptinMonster – The best conversion optimization software on the market. OptinMonster allows you to easily convert website visitors into subscribers and customers.

5. MonsterInsights – Start tracking your website visitors from day one. MonsterInsights is the best Google Analytics plugin for WordPress. It allows you to see your most popular content and where your users are coming from.

For more, see our expert pick of the must have WordPress plugins for all websites.

We hope this article helped you learn how to embed Medium article posts on WordPress. You may also want to see our guide on how to get a free email domain, or our expert pick of the best business phone services for small business.

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 Medium Blog Posts in WordPress first appeared on WPBeginner.

February 23, 2022

How to Embed a YouTube Playlist in WordPress (Best Method)

Are you looking to embed YouTube playlists on your WordPress website?

Adding YouTube playlists to your blog posts and landing pages can increase user engagement and improve your search engine optimization (SEO). It also helps get more subscribers and grow your channel.

In this article, we’ll show you how to embed a YouTube playlist in WordPress.

Why Embed YouTube Playlists in WordPress?

If you want to make your content more engaging, then adding YouTube videos is a great way to grab your visitor’s attention.

There are a lot of benefits to embedding YouTube content:

You can keep people engaged and get them to spend more time on your website.
Video content helps boost your WordPress SEO, because the high engagement and low bounce rate send a positive signal to search engines.
It helps you to promote your YouTube channel and get more subscribers.

There are a few different ways to add YouTube content to your site. You could embed a single YouTube video, show the latest videos from your YouTube channel, or even create a video gallery.

So, why choose a playlist?

Embedding a playlist lets you keep the videos focused on a single topic.

A playlist also helps you to guide your visitors from one video to the next one in order, helping them to stay even more engaged on your website.

That said, let’s look at how you can embed YouTube playlists on your WordPress site.

Embedding YouTube Playlists in WordPress

WordPress by default does not allow you to embed a playlist. The easiest way to embed a YouTube playlist in WordPress is by using the YouTube Feed Pro by SmashBalloon plugin.

It’s the best WordPress plugin for YouTube and helps you create custom YouTube feeds for your website. It lets you add your YouTube playlists and offers lots of customization features.

The plugin automatically updates the playlist when you add more videos to it on YouTube. You can even embed live YouTube streams in WordPress.

For this tutorial, we’ll be using the premium version of YouTube Feed Pro because it offers more features. There is also a free version that you can use to try it out.

First, you’ll need to install and activate the YouTube Feed Pro by SmashBalloon plugin. Please see our guide on how to install a WordPress plugin for more details.

Upon activation, you can head over to Feeds for YouTube from your WordPress dashboard and then go to the ‘License’ tab.

Simply enter your license key and then click the ‘Activate License’ button. You can find the key in your account.

Next, you’ll need to go to the ‘Configure’ tab and connect your YouTube account.

To do that, go ahead and click the ‘Connect to YouTube to Create a Feed’ button.

A popup will now appear informing you that the plugin will require read-only access to your YouTube account to retrieve the API key.

Simply click the ‘Continue’ button to move on to the next step.

Next, you’ll need to select your Google account.

On the next screen, the plugin will require access to your Google account.

Simply click the ‘Continue’ button.

You’ll now be redirected back to your WordPress website, and a popup will appear showing that you’ve successfully connected your account.

Go ahead and click the ‘Dismiss’ button to continue.

Next to the ‘YouTube Accounts’ section, you can see that you’ve successfully connected your Google account.

Now, you’ll need to create an API key so that the plugin automatically fetches your playlists and displays them in WordPress.

Let’s see how you can get an API Key.

Creating a YouTube API Key

You’ll first need to visit the Google Cloud Platform website and then login to your Google account.

After that, click on the ‘My First Project’ option at the top.

Now, you’ll see a popup window appear where you can select your projects.

Simply click the ‘New Project’ button to get started. You can also select an existing project if you want.

After that, you’ll need to enter a name for your project under the ‘Project Name’ field. We’ve called ours ‘YouTube Playlist’.

Then click the ‘Create’ button.

Once your project is created, you can click the menu option in the top left corner (3 horizontal lines) next to Google Cloud Platform and go to ‘API & Services’ from the menu.

Then click the ‘+ Enable APIs and Services’ option at the top.

This will open the API library page. Go ahead and enter YouTube in the search box to find the YouTube API.

Next, you’ll need to select the ‘YouTube Data API v3’ option.

After that, simply click the ‘Enable’ button to activate the YouTube API key.

Now, you’ll need to go to the Credentials menu in the left menu, and then click the ‘+ Create Credentials’ at the top.

From the options that appear in the dropdown, go ahead and select ‘API key.’

A popup window will now appear with the YouTube API key.

Simply copy the API key or store it on a notepad file.

Next, you can head back to your WordPress website and then navigate back to Feeds for YouTube from your dashboard.

Now, go to the ‘Configure’ tab and enter your API key.

When you enter the API key, you’ll notice more options will be unlocked in Feeds for YouTube, including the ‘Select a Feed Type’ options.

You can now choose ‘Playlist’ as the feed type and enter the YouTube playlist ID. There is also an option to change the frequency that your site will check for new posts in your YouTube playlist.

You can find the playlist ID by visiting your YouTube channel and then going to the playlist you’d like to display on your website.

The string of letters and numbers after the ‘=’ symbol in the URL is your playlist ID. Simply copy the ID and enter it in the Feeds for YouTube plugin.

Now that you’ve created an API key and added the YouTube playlist ID, let’s see how you can customize the feed and embed it on your website.

Customize and Embed Your YouTube Playlist

To customize your YouTube playlist feed, simply head over to the ‘Customize’ tab in the Feeds for YouTube plugin.

Here you can edit the width, height, and background color of your YouTube feed.

Next, you can scroll down and change the layout of the feed. The plugin offers multiple layout options, including a grid, gallery, list, or carousel type.

Besides that, there are also options for selecting the number of columns (for mobile and desktop), the number of videos, and spacing between the videos.

The plugin also offers more optional options to customize your YouTube feed. For instance, you can choose what info to display, like the play icon, title, views, date, and more.

There are also options for entering translations for info text, edit header options, changing the Load More and Subscribe button settings, adding moderation, and other advanced settings.

Don’t forget to click the ‘Save Changes’ button when you’re done.

Next, you can now display your YouTube playlist on any WordPress page or post.

To start, simply create a new page or edit an existing one. Once you’re in the WordPress content editor, simply click the ‘+’ button and add the ‘Feeds for YouTube’ block.

Your YouTube playlist will now appear on your page.

Go ahead and publish your article to see the YouTube playlist feed in action.

We hope this article helped you learn how to embed a YouTube playlist in WordPress. You may also want to check out our guide on how to start an online store and the best live chat software.

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 a YouTube Playlist in WordPress (Best Method) first appeared on WPBeginner.

September 24, 2021

Deploying the Adobe PDF Embed API with Adobe Experience Platform Launch

Many organizations have PDF documents on their web properties. While PDFs are a reliable format for storing and distributing content, when left up to the browser to determine, the consumption experience is unfortunately inconsistent.

Depending on the type of device, browser, and a user’s software preferences, a PDF may:

April 29, 2021January 2, 2023

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.

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.’

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.

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

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.

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.’

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.

March 23, 2021

Maps Scroll Wheel Fix

This blog post by Steve Fenton came across my feeds the other day. I’d never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and and out of HERE maps with the scrollwheel. So imagine you’re scrolling down a page, your cursor (or finger) ends up on the HERE map, and now you can’t continue scrolling down the page because that scrolling event is captured by the map and turns into map zooming.

Steve’s solution: put a “coverer” <div> over the map when a scroll event starts on the window, and remove it after a short delay (when scrolling “stops”). That solution resonates with me, as not only have I coded solutions like that in the past for embedded maps, we have a solution like that in place on CodePen today. On CodePen, you can resize the “preview” window, which is an <iframe> of the code you write. If you drag too swiftly, your mouse cursor (or touch event) might trigger movement off of the draggable element, possible onto the <iframe> itself. If that happens, the <iframe> will swallow the event, and the resizing you are trying to do stops working correctly. To prevent this, we put a “covered” <div> over top the <iframe> while you are dragging, and remove it when you stop dragging.

Thinking of maps though, it reminds me Brad Frost’s Adaptive Maps idea documented back in 2012. The idea is that embedding a map on a small screen mobile device just isn’t a good idea. Space is cramped, they can slow down page load, and, like Steve experienced nearly a decade later, they can mess with users scrolling through the page. Brads solution is to serve an image of a map (which can still be API-driven) conditionally for small screens with a “View Map” link that takes them to a full-screen map experience, probably within the map native app itself. Large screens can still have the interactive map, although, I might argue that having the image-that-links-to-map-service might be a smart pattern for any browser with less technical debt.

The post Maps Scroll Wheel Fix appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

March 10, 2021

How to Create a Web-Based Viewer in Java

A web-based viewer is essentially a basic visual display window for documents you want users to be able to explore on your website or application. Document viewers are a great way to get a quick look at a document without worrying if you have the correct applications to view it on your device. With these tools, customers can simply click on a PDF or Word document on a website and peruse it as they would in its native format.

Web-based or HTML viewers are also known as ‘zero footprint’ viewers as they do not require a separate client install or download, which allows for the viewing of documents within the browser itself. These installations are less of a hassle if you are dealing with just one format on one device, but considering the ever-changing array of file types and machines that we utilize every day, they have become inefficient and cumbersome. In addition to the absence of software installation, the ‘zero footprint’ name also signifies that the viewer does not store data on the user’s device, and there are no storage parameters that need to be met.

October 12, 2020February 16, 2023

How to Fix the Facebook and Instagram oEmbed Issue in WordPress

Do you want to learn how to fix the Facebook and Instagram oEmbed issue in WordPress?

If you’ve previously added Facebook or Instagram content to WordPress using the default oEmbed or Embed block, then this feature no longer works. This can cause errors and missing content on your WordPress website.

In this guide, we’ll show you how to fix the Facebook and Instagram embed issue, so visitors can enjoy social content on your WordPress website.

How to fix the Facebook and Instagram oEmbed issue in WordPress

What is the Facebook and Instagram oEmbed Issue in WordPress?

In the past, you could easily embed Instagram and Facebook posts in WordPress using a protocol known as oEmbed.

However, Facebook changed the way that oEmbed works so you can no longer easily embed videos, pictures, updates, and other content from Facebook or Instagram.

Instead, you now need to register an app and use a client token to get data from the Facebook Graph API, before you can embed Facebook or Instagram content on your WordPress blog.

This would take a lot of time and effort, especially if you want to show lots of different social posts across your website. With that in mind, the people behind WordPress decided to remove the Facebook and Instagram embed feature.

If you previously added any Facebook content to your website using oEmbed, it’ll now look something like the following image.

An example of an oEmbed error in WordPress

If you embedded any Instagram posts using oEmbed, then you’ll get a similar error.

This is a bad user experience, and some visitors may assume that your website is broken, no longer maintained, or that you’re not a trustworthy or reliable business.

There are ways to fix the problem manually. For example, you might go through each page and post and delete the embedded content. However, this would take a lot of time and effort, and there’s no guarantee you’ll manage to find every broken embed.

With that being said, let’s see how you can easily fix the Facebook and Instagram oEmbed issue on WordPress.

How to Fix the Facebook & Instagram oEmbed Issue

The easiest way to fix the oEmbed issue is by using one of the free Smash Balloon plugins.

If you want to embed Instagram posts in WordPress, then you’ll need the Smash Balloon Social Photo Feed plugin.

An instagram post, embedded in a WordPress website

Want to embed a Facebook post in WordPress? Then you can use the free Smash Balloon Social Post Feed plugin instead.

First, you need to install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After installing either plugin, simply head over to Instagram Feed » oEmbeds or Facebook Feed » oEmbeds, depending on the plugin you’re using.

We’re using the Social Photo Feed plugin in all our images, but the steps will be exactly the same no matter what plugin you’re using.

Enabling the oEmbed feature for Instagram and Facebook

On this screen, simply click on the ‘Enable’ button.

That’s it. You can now embed Facebook and Instagram posts on your WordPress website.

How to Embed Instagram or Facebook Posts in WordPress

Whether you’re using Facebook or Instagram, you can embed a specific post in any page, post, or widget-ready area, such as the sidebar.

One option is to open the page or post where you want to show the social content. Then, click on the ‘+’ icon and type in ‘Embed.’

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

Adding the Embed block to a WordPress page or post

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

Then, click on ‘Embed.’

Embedding an Instagram post in WordPress

WordPress will now show that specific post. When you’re ready to make the post live, simply click on ‘Update’ or ‘Publish.’

Now when you visit the page, you’ll see the social media post live.

An example of an Instagram post in WordPress

Another option is adding the Instagram or Facebook post to a widget-ready area such as the sidebar. That way, you can promote the same post across every page of your website.

For example, you might embed your most popular Instagram post or a post promoting a sale or social media contest you’re using to grow your site.

Adding an Instagram post to a widget-ready area such as the WordPress sidebar

To add a Facebook or Instagram post to a widget-ready area, simply go to Appearance » Widgets and click on the blue ‘+’ button.

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

When the ‘Embed’ block appears, drag it onto the area where you want to show the Facebook or Instagram post.

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

WordPress will now show that specific post.

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

Now, when you visit your website, you’ll see the Instagram or Facebook post live.

How to Add an Instagram or Facebook Feed to WordPress

With the free Smash Balloon plugins, it’s easy to fix the oEmbed issue so you can add Facebook and Instagram posts to your website.

This is great if you only want to embed a small number of posts or you want to control exactly where each social post appears on WordPress. However, you may also want to embed a Facebook or Instagram feed on your website.

By creating a feed, you can show all your latest posts in a nice layout. Even better, the feed will update automatically so visitors will always see the newest posts without you having to update your site manually.

This can keep your site fresh and interesting, even for regular visitors.

If you want to embed Instagram content in WordPress, then you can use the Smash Balloon Instagram Feed plugin.

An Instagram feed, created using Smash Balloon

Want to create a feed showing your latest Facebook status posts, videos, reviews, and more?

Then you can use the Smash Balloon Facebook Feed plugin.

Facebook reviews, embedded using Smash Balloon

Want to add both Facebook and Instagram feeds to your WordPress website? Then you may want to look at Smash Balloon Social Wall.

This powerful plugin lets you combine any feeds you’ve created using the Smash Balloon plugins, including Facebook, Twitter, YouTube feeds, and more.

Creating a social media wall using Facebook and Instagram

For example, if you’ve set up the Facebook Feed and Instagram Feed plugins, then you can simply go to Social Feeds » Create a Social Wall in your WordPress dashboard.

Here, you’ll see all the different feeds you’ve created so far.

How to create a social media wall using multiple feeds

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.

Combining Facebook and Instagram into a social wall

Small Balloon Social Wall will then create a shortcode that allows you to add the social wall to any page, post, or widget-ready area.

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

Social media shortcode, created using the Smash Balloon plugin

After placing the shortcode, simply save or publish your changes to make them live.

Now, if you visit your website, you’ll see a social wall featuring all the latest posts from your different accounts and platforms.

We hope this article helped you learn how to fix the Facebook and Instagram oEmbed issue in WordPress. You may also want to see our expert pick of the best social media plugins for WordPress, and our guide on 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 Fix the Facebook and Instagram oEmbed Issue in WordPress first appeared on WPBeginner.

June 14, 2020

How to Embed Google Slides Like a Pro!

It takes 2 easy steps to embed any Google Slides deck in your website. Open Google Slides, go to the File Menu and choose Publish to web. Your presentation becomes public and you are presented with an IFRAME HTML tag that you can copy-paste in any web page.

<iframe
  src="https://docs.google.com/presentation/d/e/xxxx/embed"
  frameborder="0"
  width="800"
  height="600"
></iframe>

Customize your Google Slide Embeds

The embedded Google Slides player can be easily customized by modifying the src attribute of the IFRAME tag.

Auto Start the Embedded Slideshow

Append start=true to the URL and the slideshow will auto-play as soon as someone opens your webpage. Or set start=false and the slideshow will only play when the visitor click the play icon in the slides player.

Change the duration of slides

With start set to true, you can add delayms=1000 to the URL to specify the time (in milliseconds) for which each slide should display before auto-advancing to the next one. For instance, start=true&delayms=6000, the slideshow will autoplay and the slides will auto-advance every 6 seconds (6000 ms).

Play the slideshow in Loop

Add restart=true to the slideshow URL and it will play in a loop, meaning it will auto-advance to the first slide after the last one.

Start from a Specific Slide

Your embedded Google Slides presentation will always start from the first slide in the deck. You can however customize the URL to start the slideshow from a specific slide by adding slide=id.p# to the URL, where # is the slide number.

For instance, if you wish to embed a slideshow with 8 seconds gap and starting from the 4th slide, your URL would be:

https://docs.google.com/presentation/d/e/xxxx/embed?start=true&delayms=8000&slide=id.p4

Remove the Google Branding and Player Control

The Google Slides player displays the controls and Google branding in the bottom bar. However, if you wish to play the slideshow in kiosk mode without any player controls or Google Branding, just adding rm=minimal to the IFRAME link (rm = Render Mode)

Make the Google Slides player Responsive

The embed code provided by Google Slides has a fixed height and width and will thus display at the same size on both desktops and mobile screens. You can however make the player responsive with a little bit of CSS as detailed below.

Remove the height, width and other parameters from the IFRAME tag:

<iframe src="https://docs.google.com/presentation/d/e/xxxx/embed"></iframe>`

Add this CSS to your HTML page. The padding-bottom is set to 56.25% for 16x9 ratio (9/16*100) so the height of the player would be 56.25% of the player’s width. Set the value to 75% for a 4:3 ratio.

<style>
  .responsive-google-slides {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Ratio */
    height: 0;
    overflow: hidden;
  }
  .responsive-google-slides iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

Wrap the original IFRAME inside the responsive class and you are good to go. Here’s a live demo.

<div class="responsive-google-slides">
  <iframe src="https://docs.google.com/presentation/d/e/xxxx/embed"></iframe>
</div>

Also see: 🦋 Secret Google Docs URL Tricks

May 10, 2020

How to Embed Images from Google Photos into your Website

Google Photos is the best service for backing up your digital photos to the cloud. They have no storage restrictions, you can upload images as well as videos, and the built-in visual search engine helps you find photos by faces or objects in the picture. There’s one feature though that’s still missing in Google Photos.

You can easily share your photos with anyone using a simple link but Google Photos offers no option for you to embed an existing image into a website. That is, if you have already uploaded an image onto Google Photos, you can’t directly embed it into your website through Google Photos.

I wrote an app to help you embed #GooglePhotos in your website https://t.co/cDt4NorvWi pic.twitter.com/mq7J4h4qzj
— Amit Agarwal (@labnol) October 25, 2016

Google Photos as an Image Host

Embed Google Photos is a new web app that, as the name suggests, makes it extremely easy for you to pick any image hosted on Google Photos and place it on a web page using simple HTML code.

Here’re the steps involved:

Go to photos.google.com and open any image that you wish to embed in your website.
Tap the Share Icon (video tutorial) and then click the Get Link button to generate a shareable link of that image.
Go to j.mp/EmbedGooglePhotos, paste that link and it will instantly generate the embed code for your selected picture.

That’s it. Open your website template, paste the generated code and save (see sample). The image will now serve directly from your Google Photos account. This technique can also be used for embedding images in HTML Mail without having to use an external image hosting service.

Embed Google Photos - How it works?

When you share any single photo in Google Photos, it creates an unlisted link that is accessible to anyone including those who are not logged into their Google Accounts. Internally, the embed app downloads the page behind this link and extracts the Open Graph tags to determine the direct link of the image and the underlying photo album.

Change Height and Width of the Image

All images hosted inside Google Photos have a URL in a particular format:

https://lh3.googleusercontent.com/xyz=w2400

The w2400 in the URL indicates that the maximum width of the image will be 2400 pixels. However, if you have a higher resolution image, you can change the width parameter to something like w8000 meaning 8000 px wide. The height will be adjusted automatically to preserve the original aspect ratio.

You can also specify the height and width values in the URL and Google Photos will fit the image to the specified size.

https://lh3.googleusercontent.com/xyz=w1415-h944

The embed app only works for single images and not albums. One more thing. I am not aware of any bandwidth limitations for images shared via Google Photos.

Also see: Google Photos - The Good Parts

February 7, 2020

A Better Way to Embed PDF Documents in Web Pages

How do you embed a PDF document into your website for inline viewing? One popular option is that you upload the PDF file to an online storage service, something like Google Drive or Microsoft’s OneDrive, make the file public and then copy-paste the IFRAME code provided by these services to quickly embed the document in any website.

Here’s a sample PDF embed code for Google Drive that works across all browsers.

  <iframe frameborder="0" scrolling="no"
     width="640" height="480"
     src="https://drive.google.com/file/d/<<FILE_ID>>/preview">
  </iframe>

This is the most common method for embedding PDFs - it is simple, it just works but the downside is that you have no control over how the PDF files are presented in your web pages.

If you prefer to offer a more customized and immersive reading experience for PDFs in your website, check out the new Adobe View SDK. This is part of the Adobe Document Cloud platform but doesn’t cost a penny.

Here are some unique features that make this PDF embed solution stand out:

You can add annotation tools inside the PDF viewer. Anyone can annotate the embedded PDF and download the modified file.
If you have embedded a lengthy document with multiple pages, readers can use the thumbnail view to quickly jump to any page.
The PDF viewer can be customized to hide options for downloading and printing PDF files.
There’s built-in analytics so you know how many people saw your PDF file and how they interacted with the document.
And my favorite feature of ViewSDK is the inline embed mode. Let me explain that in detail.

Display PDF Pages Inline like Images and Videos

In Inline Mode, and this is unique to Adobe View SDK, all pages of the embedded PDF document are displayed at once so your site visitors do not have to scroll another document with the parent web page. The PDF controls are hidden from the user and the PDF pages blend with images and other HTML content on your web page.

To learn more, check this live demo - here the PDF document contains 7 pages but all are displayed at once like one long web page thus offering smooth navigation.

How to Embed PDFs with the Adobe View SDK

It does take a few extra steps to use the View SDK. Go to adobe.io and create a new set of credentials for your website. Please note that credentials are valid for one domain only so if you have multiple websites, you’d need a different set of credentials for them.

Next, open the playground and generate the embed code. You need to replace the clientId with your set of credentials. The url in the sample code should point to the location of your PDF file.

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<<YOUR_CLIENT_ID>>",
            divId: "adobe-dc-view"
        });
        adobeDCView.previewFile({
            content: { location: { url: "<<PDF Location>>" } },
            metaData: { fileName: "<<PDF File Name>>" }
        }, {
            embedMode: "IN_LINE",
            showDownloadPDF: false,
            showPrintPDF: false
        });
    });
</script>

Check out the official docs and the code repository for more samples.

November 25, 2019

Playing Sounds with CSS

CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?

This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS, so it’s not really a hack. But… let’s be honest, it’s still kind of a hack. I wouldn’t recommend necessarily using it in production, where audio should probably be controlled with native <audio> elements and/or JavaScript.

The trick

There are a few alternatives to playing sounds with CSS, but the underlying idea is the same: inserting the audio file as a hidden object/document within the web page, and displaying it whenever an action happens. Something like this:

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>

<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />

View Demo

This code uses an <embed> tag, but we could also use <object> with similar results:

<object data="path-to-audio-file.mp3"></object>

A quick note on the demo and this technique. I developed a small piano on CodePen just with HTML and CSS using this technique about a year ago. It worked great, but since then, some things have changed and the demo doesn’t work on CodePen anymore.

The biggest change was related to security. As it uses embed or object instead of audio, the imported file is subject to stricter security checks. Cross-origin access control policies (CORS) force the audio file to be on the same protocol and domain as the page it is imported into. Even putting the sound in base64 will not work anymore. Also, you (and users) may need to activate autoplay on their browser settings for this trick to work. It is often enabled behind a flag.

Another change is that browsers now only play the sounds once. I could have sworn that past browsers played the sound every time that it was shown. But that doesn’t appear to be the case anymore, which considerably limits the scope of the trick (and bares the piano demo almost useless).

The CORS issue can be worked around if you have control over the servers and files, but the disabled autoplay is a per-user thing that is out of our control.

View Demo

Why it works

The theory behind this behavior can be found buried in the definition of the embed tag:

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must queue a task using the embed task source to run the embed element setup steps for that element.

Same goes for the definition of the object tag:

Whenever one of the following conditions occur:

[...]

the element changes from being rendered to not being rendered, or vice versa,

[...] the user agent must queue a task to run the following steps to (re)determine what the object element represents. [and eventually process and run it]

While it is clearer for object (the file is processed and run on render), we have this concept of “potentially active” for embed that may seem a bit more complicated. And while there are some additional conditions, it will run on initial render similarly as how it does with object.

As you can see, technically this is not a trick at all, but how all browsers should behave... although they don’t.

Browser support

As with many of these hacks and tricks, the support of this feature is not great and varies considerably from browser to browser.

It works like a charm on Opera and Chrome, which means a big percentage of the browser market. However, the support is spotty for other Chromium-based browsers. For example, Edge on Mac will play the audio correctly, while the Brave browser won't unless you have the latest version.

Safari was a non-starter, and the same can be said for Internet Explorer or Edge on Windows. Nothing close to working on any of these browsers.

Firefox will play all the sounds at once on page load, but then won’t play them after they are hidden and shown again. It will trigger a security warning in the console as the sounds attempt to be play “without user interaction,” blocking them unless the user approves the site first.

Overall, this is a fun trick with CSS but one of those “don’t do this at home” kind of things… which in software development, means this is the perfect thing to do at home. 🙂

The post Playing Sounds with CSS appeared first on CSS-Tricks.