Embed HTML code?
I bet you became a blogger for the joy of writing, not the joy of code embedding.
If you can copy and paste, you can embed HTML code. Embedding HTML code is that simple.
Why would you want to when you can just type your post?
This post will share times when it is necessary to embed HTML code and how to easily and quickly do so.
By the time you’re done reading this post, you’ll know how to embed HTML code for GIFs, memes, YouTube videos, Instagram posts, Google Docs, and Spotify.
What is HTML Code?
HTML stands for Hyper Text Markup Language. The language appears in a set of symbols called code and is used on web pages to tell the web browser how to display the text. Although typing in the Visual mode in WordPress may be easier, sometimes using code is necessary. Fortunately, you can copy the code from other websites (with permission) and paste the code into your blog.
How to Embed HTML Code: GIFs
What are GIFs?
GIF stands for Graphic Interface Format. In other words, a GIF is a type of graphic.
Why do bloggers need GIFs?
There are many reasons for you to use GIFs on your blog. First, your SEO improves when you use GIFs. Google likes a variety of media and incorporating GIFs helps you have a variety of media.
Next, blog readers find GIFs entertaining, so the user experience is enhanced when you use GIFs. This leads to social shares and more exposure and traffic for you.
Finally, by incorporating this extra element in your post, readers will spend more time scrolling through your article which improves your bounce rate.
Three ways exist for you to use GIFs in your blog posts.
- Go to GIPHY.com. When you click this link, you’ll be taken to a place where the GIFs are free to use. This is important since it means you don’t have to worry about breaking any restrictions and getting sued. Make an account. You might wonder why you need to make an account if the GIFs are free to use. By making an account, your GIFs will be public. This could lead to blog traffic for you since your blog URL is listed with your profile. Your social media links are as well. Therefore, making an account could even help you expand your reach on social media sites.
- Using the search bar, find the GIF you want.
- Click Share, click Embed, and copy the code that generates. Your GIF will autoplay on all browsers.
- If you are using the WYSIWYG WordPress Editor: Go to your WordPress dashboard. Click the Text tab. This will allow you to embed the HTML code. Paste the code where you want the GIF. If you are using the WordPress Gutenberg Editor, simply paste the code where you want the GIPHY to appear. [Read additional instructions for using the new WordPress Gutenberg Editor.]
Wouldn’t this be cute to welcome your readers at an online holiday party or to use in a food blogger’s instructions?
GIPHY.com has all sorts of GIFs in the following categories: Animals, Holidays, Food and Drink, Memes, Actions, Emotions, Anime, Gaming, and Cartoons.
Melinda Mitchell from the PurpleSlobinRecovery blog has many GIFs on her blog.
She reports she doesn’t use GIPHY at all.
According to Melinda, “Just go to Google images, then choose GIFs, then copy and paste the URL in your post.”
To bypass GIPHY:
Go to Google Images.
In the search bar type GIFs and the category of GIF you want.
Click, click again. You should be brought to a site where you can click “embed” to bring up the HTML Code.
A WordPress plugin, GIPHYPress, can be installed in your WordPress blog.
Note: Plugins slow your blog’s loading time, thus decreasing your SEO. Google likes to show fast-loading blogs to its users, so I recommend Method 1 or Method 2.
How to Embed HTML Code: Memes
What is a Meme?
A meme is like a GIF; it’s a graphics format but considered humorous. Memes are so humorous they have the potential to go viral.
How to use memes on your blog:
These are three of the sites will allow you to find free memes:
Adobe Spark has a free meme maker.
MemeCenter.com (This site will also allow you to make GIFs.)
Follow the GIF instructions above since memes work the same way:
You can generate the memes for free, but if you make an account they’ll be saved for you.
I went to MemeGenerator.com and searched holiday memes.
I chose Minions/Hello from Florida.
Using the WordPress Classic Editor, I clicked the Text tab and brought up the HTML code. I pasted and BAM! You can quickly and effortlessly embed the HTML code. If you are using the WordPress Gutenberg Editor, simply paste the code where you want the meme to appear.
Wouldn’t this enhance a travel blogger’s site? These memes are adorable, free, and add to the enjoyment people have while reading the information on your blog.
How to Embed HTML Code: YouTube Videos
As indicated above, Google wants you to incorporate a variety of media in your article. This includes videos. Don’t worry; many online video maker tools exist so you don’t need to be in the video. For example, you can use the paid or the free version of Instasize Video.
Once you make a video, you have a choice to put the video straight on your blog or involve a 3rd party site like YouTube.
When you put the video on your blog directly, you “self-host” the video.
Self-hosting the video is a bad idea. Slow-loading time and piracy are just two of the concerns you face when you put the video on your blog without involving a third-party.
As indicated, there are many free tools you can use to make a video. One of my favorites is Lumen 5. Lumen 5 will make the video from your blog post text for you. You do nothing. The company draws from your RSS feed.
Lumen 5 made a video for me about how to boost web traffic which I uploaded to YouTube. As mentioned, putting the video in my post will improve my bounce rate and have the potential to boost my social shares and traffic.
Click the share button.
Click Embed and follow the directions above. Put your post into Text mode if you’re using the WordPress Classic Editor and copy-paste the code. If you’re using the new WordPress Gutenberg Editor, simply copy the code and then paste it into a block where you want the video to appear. Note: If you are using a video from YouTube or Vimeo simply paste the URL and the video will appear.
[Read a longer review of Lumen 5.]
How to Embed HTML Code: Instagram
You might have many reasons to share your Instagram posts on your blog.
For example, when I reviewed 35 Instagram quote making tools, I needed to show pictures of the Instagram quote posts you can make with the tools.
Also, I drafted a post about what it means to be a blogger and thought one of my Instagram posts seemed fitting.
Sharing your Instagram content on your blog is easy.
Go to your Instagram profile and find the post you want to share. Click the post.
Click the three dots. Then, Click Embed. Copy the code you see. Choose whether you want the Instagram post to include your caption.
If you’re using the WordPress Classic Editor, click the Text tab in your WordPress tab and paste the code where you want the Instagram graphic. If you’re using the WordPress Gutenberg Editor, simply paste the code where you want your Instagram post to appear.
View this post on Instagram
This is the Instagram post without the caption.
How to Embed HTML Code: Google Docs
You can share Google Docs in your blog posts. These include Google Docs, Forms, Slides, and Sheets.
You might wonder why you’d want to share a Google Doc in your blog post.
There could be a variety of reasons. For example, I am sharing methods of the Google Slide Show presentation I gave at a recent blogging conference. I thought people would want to see the slideshow themselves if they didn’t attend the conference, so I’m embedding the slideshow in my blog post.
How to Embed HTML Code from Google Docs in your WordPress blog post:
Click File/Publish to the Web.
When the popup appears, click “Ok.”
Copy the embed code. If you’re using the Classic WordPress Editor, put your post in Text mode and copy the HTML code. If you’re using the WordPress Gutenberg Editor, simply paste the code where you want your Google Doc to appear.
How to Embed HTML Code: Spotify
A little holiday music, anyone?
To embed Spotify audio onto your website, right-click any song, album or playlist, click on “Share” button and select “Copy Embed Code”.
If you’re using the Classic WordPress Editor, put your post in Text mode and copy the HTML code. If you’re using the WordPress Gutenberg Editor, simply paste the code where you want your music.
How to Embed HTML Code: Wrapping Up
This post explained how to embed HTML code for GIFs, memes, YouTube videos, Instagram posts, Google Docs and Spotify.
Are there any more ways to embed code in a WordPress blog post? Add your tips to the discussion in the comments section.
Readers, please share so bloggers learn these 6 strategies and the knowledge that you can embed the HTML code from other websites into your WordPress blog.