Tag - Embed

How to Embed PDF, Spreadsheet, and others in WordPress Blog Posts


Do you want to embed PDF, spreadsheet, and other types of documents in your WordPress blog posts?

WordPress comes with a powerful content editor and allows you to easily embed videos, tweets, audio, and other media formats using the embed blocks.

You can also upload other type of files that users can download. However, it is not possible to embed files like PDF, spreadsheet, and other documents in your blog posts.

In this article, we’ll show you how to embed PDF, spreadsheet, powerpoint, and other documents in your WordPress blog posts.

Embedding PDF, Spreadsheet and Others in WordPress Blog Posts

To help you navigate this guide, we have created the table of contents here.

  1. Adding PDF in WordPress Blog Posts without Plugin
  2. Embedding PDF in WordPress Posts Using the PDF Viewer Plugin
  3. Embedding Spreadsheets, and Other Types of Documents in WordPress
  4. How to Embed SlideShare Presentations in WordPress Posts
  5. Embedding Google Docs, Sheets, and Others in WordPress Posts

Now, let’s get started with the guide.

Adding PDF in WordPress Blog Posts without Plugin

By default, WordPress doesn’t offer full embed option for PDF documents; however, you can add them as links in your blog posts.

This option is useful if you don’t want to add a plugin to your website.

Simply add the File block to your WordPress post or page and then upload your PDF file.

Add file block

Once you have uploaded the PDF file, WordPress will display the file name with a download button. You can edit the file name and download button text.

Download PDF link

You also have the option to show or hide the download button and choose whether it links to the file itself or the attachment page.

You can use this method to upload Microsoft Word documents, Excel spreadsheets, and PowerPoint presentations to your website.

While this method is easier and straight-forward, it does not embed the documents which means users have to download the file to view it, and this may not be very user friendly depending on the use-case.

Let’s take a look at some other ways to embed documents in WordPress.

Embedding PDF in WordPress Posts Using Embed PDF Viewer Plugin

As shown above, displaying the PDF files as links will lead your website visitors away from your site.

In this method, we will cover how to easily embed the document in your WordPress posts and pages.

First, you need to install and activate the Embed PDF Viewer plugin. For detailed instructions, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, simply create a new post or edit an existing one to embed a PDF document.

In the WordPress post edit screen, click on the Add New Block icon, and select the PDF block under Embeds section.

Choose PDF Embed Block in WordPress Post Editor

After that, you can upload a new PDF file to your post, select one from your media library or insert from URL.

PDF Block Added in WordPress Editor

Once you select the file, you can see the PDF file embedded in your blog post. You can also resize the embed area and add additional CSS from the block options on the left side.

PDF Embedded in WordPress Post Editor

Once you’re done with customization, simply save your post and preview it on your live website. Here’s how it appeared on our demo website.

PDF Embedded in WordPress Post Preview

Embedding Microsoft Word, Spreadsheet, and Other Documents in WordPress

The plugin mentioned above only lets you embed PDF files into your WordPress site.

If you want to embed more document types like Microsoft Word, Excel spreadsheet, PowerPoint presentation, etc, then you need to use another plugin.

First, you need to install and activate the Embed Any Document plugin on your website.

Next, create a new post or open an existing one to embed a document. Once done, add the Document block under the Embeds section.

Add Document Block in WordPress Editor

After that, you need to click on the Add Document button.

Add Document Option in WordPress Post Editor

Next, you can upload a document or add from a URL. The paid plugin users can also attach documents from Google Drive, Dropbox, and Box.

Add Document Options

Once you choose the document to embed, you will see the options to customize the embed. You need to review them and click the Insert button.

Add Spreadsheet Advanced Options

Once done, you can see the document embedded in your post. You can also review the document display options again from the block options panel on the left side.

Spreadsheet Embedded in WordPress Editor

Save your post and preview it on your live website. Here’s how the embedded spreadsheet looked on our demo website.

Spreadsheet Embedded in WordPress Preview

Embedding SlideShare Presentations in WordPress Posts

Unlike PDF and other documents, WordPress allows you to easily embed content from third-party services into your website.

It has built-in embed options for YouTube videos, Tweets, Facebook updates, SlideShare presentations, and many more.

Best of all, the new WordPress block editor includes separate embed blocks for them.

To embed a SlideShare presentation in your WordPress blog post, create a new post, or edit an existing one. Next, click on the Add New Block icon and add the SlideShare block in your post edit area.

Add SlideShare Embed Block in WordPress Post Editor

Next, you need to visit the SlideShare website and copy the link of a SlideShare presentation that you want to embed.

Once done, paste the link in the embed SlideShare block and click on the Embed button.

Embed SlideShare URL in WordPress Post

After that, you can see the SlideShare presentation embedded in your blog post. You can review the block options on the left side, and save your post.

SlideShare Presentation Added in WordPress Editor

Once done, you can preview the embedded SlideShare presentation live on your website. Here’s how it looked on our demo website.

SlideShare Presentation Added in WordPress - Preview

How to Embed Google Docs, Sheets, and Others in WordPress

In the above examples, we have covered how to add PDF and other documents from your local computer. However many users nowadays use Google Drive to create and store documents (specially small business owners).

Similar to Microsoft Word, Excel Sheets, and PowerPoint presentations, Google Drive also lets you create Docs, Sheets, Presentations, and other online documents.

If you have created documents in Google Drive, then you can easily embed these files in your WordPress posts by using the iFrame method.

To embed a Google doc in WordPress, you need to open the document in your browser first. After that, go to the File menu and click on the “Publish to the web” option.

Publish to the Web Option in Google Doc

After that, a new popup window will appear. You need to select the Embed option and then click on the Publish button.

Click Publish to Find the Embed Code for Google Doc

Once done, it will provide you an iFrame embed code. Go ahead and copy the code.

Embed a Google Doc Code

Next, you need to create a new post or edit an existing one to embed the Google doc. In your post editor, add the Custom HTML block to insert the embed code.

Add Custom HTML Block in WordPress Post

Once the Custom HTML block is added in your post edit area, paste the embed code that you copied before.

Google Doc Embed Code Added in WordPress Post

You may need to add height and width parameters to the embed code. Simply add the parameters to the iframe code like this:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQXyRM7bAOY2Em38yYkFKDlFwMp7tlofsdfdgeGDFg4lVkv_9HB_5WbGLwfMScaGQmDf34mIH/pub?embedded=true" width="550" height="600"></iframe>

After that, you can save your post and then preview it on your live website. Here is how it appeared on our demo website.

Google Doc Embedded in WordPress Post -preview

You can now use this method to embed other documents from your Google Drive account to WordPress.

We hope this article helped you to learn how to embed PDF, spreadsheet, and other documents in WordPress posts. You may also want to see our guide on how to manage, track, and control file downloads in WordPress.

If you want to restrict files and content to logged in users only, then you need to use a WordPress membership plugin to create a membership website.

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 PDF, Spreadsheet, and others in WordPress Blog Posts appeared first on WPBeginner.



Source link

How to Embed Bing Maps in WordPress (Step by Step)


Do you want to embed Bing Maps on your WordPress website? If you are looking for a Google Maps alternative, then Bing Maps is the right candidate for you.

Similar to Google Maps, you can use Bing Maps to show directions, traffic, routes, and navigation instructions on your WordPress site. Since it is owned by Microsoft, it is a great map application with a ton of useful data.

In this article, we will show you how to easily embed Bing Maps in WordPress, step by step.

How to embed Bing Maps in WordPress

Adding Bing Maps in WordPress (No Plugin Required)

First thing you need to do is go to Bing Maps website and search for the location or map you want to embed.

Once you have found the location, click on the ‘More’ option with three-dots icon, and select ‘Embed a map’ option.

Embed a Map option in Bing Maps

After that, it will open a new tab where you can customize the map to embed in your website.

Customize Bing Map to Embed in WordPress site

You can choose map size, map type (static or draggable map), map style (road or aerial), and map links. Review the customization options and then click on the Generate Code.

After that, it will provide you a code snippet. Go ahead and copy the code because you’ll need it in the next step.

generated Embed Code for Bing Maps

Now, switch back to your WordPress site and create a new page or edit an existing one where you want to add the map.

On the page edit screen, click on the Add New Block icon and select the Custom HTML block.

Add Custom HTML block in WordPress Page Editor

After that, paste the Bing Map embed code that you copied earlier in the HTML field.

Bing Map Embed Code Added in WordPress Editor

You can now save or publish your page and click on the preview button to see the map embedded in your page. Here is how the Bing Map appeared on our demo website.

Bing Map Embedded in WordPress Manually -preview

Adding Bing Maps Using a Plugin

If you need to embed only one map on your website, then the manual method shown above is the best option.

However if you run a website where you often need to add maps, then using a plugin to add Bing Maps would be easier.

First thing you need to do is install and activate the Ultimate Maps by Supsystic plugin. For detailed instructions, you can see our step by step guide on how to install a WordPress plugin.

It is a free WordPress map plugin that lets you embed Bing maps, Leaflet maps, and other Google Maps alternatives in your WordPress blog.

To use this plugin with Bing maps, you will need to have a Bing Map API Key.

Simply create an account on Bing Maps Dev Center website. If you already have a Microsoft account, then you can simply sign in with your account credentials.

Sign in to Bing Dev Center

Once you have signed into your account, you need to click on the ‘My Account’ menu and select ‘My Keys’ option.

Bing Maps Dev Center My keys Option

On the next screen, you need to fill out your website information to create a key.

Create Bing Map API key to Embed in WordPress

After that, you can see a message ‘Key created successfully’ and the key details in a box.

Bing Maps API Key Created

You can simply click on the ‘Copy key’ link or ‘Show key’ link and copy the Bing Maps API key.

After that, you need to paste the key in your plugin settings.

Visit Ultimate Maps by Supsystic » Settings from your dashboard and select ‘Bing Microsoft’ as your maps engine. After that, paste the API key you copied earlier in the Bing Maps API key field.

Paste your Bing Maps API key in Ultimate Maps by Supsystic plugin settings

Don’t forget to save your plugin settings.

After that, you need to add marker categories by visiting Ultimate Maps by Supsystic » Marker Categories » Add Category.

Add Marker Categories for Bing Maps

Create as many marker categories as you need.

Next, click on the Add Map menu to create a new map. Enter a name for your map, define the width and height of the map, choose navigation bar mode, etc.

Add Bing map using a plugin

You can also configure options to make the map draggable, use double click to zoom, and more. Most important of all, enter the location to display in the map center.

Next, scroll down and configure more options below. Once done, click on the ‘Save Map’ button below the map preview box.

After that, you can add markers to show the main location points in your map. Click on the Markers tab, and then add a name for your maker.

Add new Marker for Bing Map in WordPress

You can use the name of the place or organization as a marker name.

For example, we used ‘University of Florida’ as a marker name because we want to show some of the best colleges in Florida in our demo map.

After that, you can add marker description text as well as image.

Scroll down and choose an icon for your new marker. Next, you need to enter the address to point the marker. And, also select the marker category.

Save Marker for Bing Maps

Review all the other options, and then click the ‘Save Marker’ button.

You can add more markers by following the same steps.

As you add the markers, you can preview them live on the preview box. Once you are happy with your map, navigate to the ‘Map shortcode’ option at the top, and copy the shortcode.

Copy Bing Map Shortcode to embed in WordPress

After that, create a new page or edit an existing one to embed your new Bing map.

Once in the page editor, click on the Add New Block icon and choose the Shortcode block under Widgets section.

Add Shortcode Block in WordPress

Now you need to paste the Bing map shortcode that you copied before.

Paste BIng Map Embed Shortcode in WordPress Page Editor

Once done, save or publish your page, and preview how the Bing map looks on your website.

Here is how the embedded Bing map appeared on our demo website.

Bing Map Embedded in WordPress using a Plugin

We hope this article helped you to learn how to embed Bing Maps in WordPress easily. You may also want to see our guide on how to embed actual tweets in WordPress blog posts.

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.



Source link

How to Embed Actual Tweets in WordPress Blog Posts


Do you want to embed individual tweets in your WordPress blog posts? Embedding Tweets in your blog posts allows you to easily quote tweets inside your posts as well as make them more engaging.

You may have seen many popular blogs and news websites embedding tweets from organizations and individuals in their articles.

It makes the quotes more authentic while allowing your users to follow the full conversations for more information.

In this article, we will show you how to easily embed tweets in WordPress blog posts and pages.

How to Easily Embed Tweets in WordPress Blog Posts

Embedding Actual Tweets in WordPress Posts – Step by Step

WordPress makes it easy to embed third-party services in your blog posts. This includes YouTube videos, Facebook updates, Tweets, and many more items.

This feature uses a method called oEmbed. Basically, you can just add the URL of a third-party website, and WordPress will request an embed code from them.

You can only add whitelisted oEmbed services in WordPress, and Twitter is one of those services.

The new WordPress block editor has added even more user-friendly options to embed tweets in WordPress.

It comes with a built-in Twitter embed block to let you easily insert tweets in your posts and pages.

Let’s take a look at how to embed tweets in WordPress blog posts.

First, you need to go to Twitter and find the tweet that you want to embed.

Next, click on the down arrow icon on the right, and then select ‘Copy link to Tweet’ option.

Copy Link to Tweet

After that, you will see ‘Link copied.’ message on the top. Now you need to paste the link in your WordPress editor.

Tweet Link Copied

Create a new post or open an existing post from your WordPress dashboard, and then click ‘Add New Block’ button. Next, you will need to choose the ‘Twitter’ block under ‘Embeds’ section.

Add Twitter Embed Block in WordPress Editor

You’ll now see the Twitter Embed block added into the post edit area. You need to paste the Twitter URL that you copied earlier in the block settings.

Embed Twitter in WordPress Post Editor

WordPress will now automatically fetch and display the actual tweet in your post content.

Actual Tweet Embedded in WordPress Post

You can save your post or publish it to see a live preview.

This is how it looked on our demo website.

Actual Tweet Embedded in WordPress Blog Post Preview

Pro Tip: You can also paste the Tweet URL in a paragraph block and WordPress will automatically convert it into a Twitter embed block.

Auto embed tweets by just pasting the URL

How to Embed Tweets in Classic WordPress Editor

If you are still using the old WordPress classic editor, then you will need to copy and paste the tweet link directly in the post editor.

Unlike the block editor, the classic editor is a single text box for your whole content.

That’s why you need to paste the tweet URL in a separate line in the editor.

Add Twitter URL in Classic WordPress Editor

Once done, it will immediately load the actual tweet in your post editor.

Tweet Embedded in Classic WordPress Editor

Now you can save and preview your post.

That’s it! It’s pretty simple and quick.

We hope this article helped you to learn how to embed actual tweet in WordPress blog posts. You may also want to see our guide on how to easily embed videos in WordPress blog posts.

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.



Source link

How to Easily Embed Videos in WordPress Blog Posts


Do you want to embed videos in your WordPress blog posts? Videos bring life to your website, and they are a great way to increase user engagement.

WordPress makes it super easy to embed videos from video hosting sites like YouTube, Vimeo, Facebook, Twitter, and many others.

In this beginner’s guide, we will show you how to easily embed videos in WordPress blog posts, pages, and sidebar widgets.

How to easily embed videos in WordPress

How to Embed Videos in WordPress Blog Posts and Pages

WordPress comes with a great feature called auto-embeds which allows your website to automatically get the embed code from popular video hosting services like YouTube, Vimeo, etc.

All you need to do is paste the video URL into the WordPress editor.

For example, you can copy the YouTube URL for a video that you want to embed.

Next, edit the WordPress post or page where you want to add the video, and simply paste the URL in the content area.

Embedding video in WordPress post editor

As soon as you paste the video URL, WordPress will fetch the embed code and display the YouTube video inside the content editor.

You can now save your post and click on the preview button to see the embedded video in your blog post.

Video embedded in a WordPress blog post

Wasn’t that easy?

After you have added the video, you can change its settings from the block toolbar and settings column on the right.

Video block toolbar and settings

You can adjust the video width, make it full-width, change alignment, and more. You can also add a caption and preserve the video’s aspect ratio on mobile devices.

WordPress can only do auto-embeds for white-listed video services. For other websites, you will still have to obtain the embed code and then paste it in your blog posts.

Here is a list of white-listed video services for auto embeds in WordPress:

  • Amazon
  • Animoto
  • Cloudup
  • CollegeHumor
  • Crowdsignal
  • Dailymotion
  • Facebook
  • Flickr
  • Hulu
  • Imgur
  • Instagram
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Someecards
  • SoundCloud
  • Speaker Deck
  • Spotify
  • TED
  • Tumblr
  • Twitter
  • VideoPress
  • Vimeo
  • WordPress.tv
  • YouTube

If you want to add a video from a website outside this list, then you will need the full HTML embed code for the video.

Simply copy the HTML code provided by the video website and paste it inside a ‘Custom HTML’ block in the editor.

Add a custom embed code in WordPress

Embed Videos in WordPress Using Old Classic Editor

If you are still using the old WordPress classic editor, then you can embed the videos the same way.

Simply copy the URL from a video hosting service like YouTube, and paste it in the editor. If you are using the visual editor, then you will see a preview of the video.

Emedding video in old WordPress editor

However, you will not be able to use the width adjustment and other options that you can use in the new WordPress block editor.

How to Embed Videos in WordPress Sidebar Widgets

Just like a WordPress page or post, you can also embed videos in WordPress sidebar widgets.

Simply go to Appearance » Widgets page and add the ‘Text’ widget to a sidebar. See our article on how to add and use widgets in WordPress.

Inside the widget settings, you need to paste the video URL in the content area. WordPress will automatically fetch the embed code and display the video preview.

Embed videos in WordPress sidebar widget

Don’t forget to click on the ‘Save’ button to store your widget settings.

You can now visit your website to see the video embed in the WordPress sidebar widget.

Why can’t I upload the videos to WordPress?

Well you can, but we do not recommend you to do so.

Most small blogs use shared WordPress hosting accounts, and videos can take up a lot of server resources. If your video got tons of traffic, then your website is more likely to crash.

Secondly, you are missing out the traffic from YouTube users.

YouTube is not only the biggest video hosting site, but it is also the world’s second most popular search engine, and the second most popular social network right after Facebook.

If you don’t want to upload your videos to YouTube, then you can try Vimeo or DailyMotion. See our comparison of YouTube vs Vimeo to see which platform is better for your needs.

For more on this topic, take a look at our article on why you should never upload a video to WordPress.

WordPress Video Embed Plugins

By default, you don’t need to use a plugin to embed videos in WordPress. However, you may want to use plugins to improve video viewing experience on your website.

Following are a few plugins that you may want to try.

1. YouTube Subscribe Bar

YouTube Subscribe Bar in action

YouTube Subscribe Bar shows a YouTube subscribe button below your YouTube video embeds in WordPress. It also fetches your YouTube subscriber count to add social proof and encourage more users to subscribe.

We first created it to promote WPBeginner’s YouTube channel on this website. Many of our users asked us to share how we did this, so we decided to release it as a free plugin.

2. Envira Gallery

A video gallery in WordPress

By default, WordPress does not come with embedded video gallery feature. If you wanted to show a video gallery on a page, then you’ll need a plugin to do that.

Envira Gallery is one of the best photo gallery plugins for WordPress. It also comes with a videos addon which allows you to create beautiful video galleries with lightbox popup support.

3. Lazy Load for Videos

Lazy load videos in WordPress

Video embeds load scripts from external websites, which has a small impact on page load speed and performance.

Lazy Load for Videos solves this problem by only loading the video image on page load. It loads embed code only when the user clicks on the play button. See our tutorial on how to add lazy load for videos in WordPress.

We hope this article helped you learn how to easily embed videos in WordPress blog posts. You may also want to see our list of the must have WordPress plugins for all websites.

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



Source link