Tag - Embed

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