https://panoraven.com/ – Free for personal, paid for business/commercial, full screen, multiple pictures https://momento360.com/ – Free and paid plans, full screen won’t work, annotations are great

https://maps.google.com/ – Always free. Photos need to be uploaded to places

Embed Responsively – https://embedresponsively.com/

Full Video Transcript

What’s going on, guys, Jason here and today’s video, I’m going to show you how to embed a 360 photo on your WordPress Web site.

OK, and some of this will actually apply to non WordPress websites as well, because we’re going to be messing with embed codes. So, yeah, you can use it on any kind of website. All right. So let’s hop in here. This question actually came from one of my subscribers. His name was Brock Daly.

He was asking, you know, because I had a video on how to embed a 360 video, but he wanted to 360 photos and the 360 videos is actually a little bit different.

So this one actually took me a little bit of time to figure out because there’s not a whole lot of things out there that really show you how to do it the right way. And the freeway, I guess you could say as well, because there’s a lot of paid options, but this is how I do it. OK, so first off, I have my test website here and you’ll see I have this photo embedded.

Now, this is a 360 photo, but this is just put on the website without being on like being hosted by anything, OK? And you’ll notice, yeah, it’s just a picture, but it looks all distorted because this is actually a 360 photo and it’s not right. OK, 360 photos have to be hosted inside of, like, a viewer. OK, now WordPress does have a shortcode for it, but in my experience and everybody else’s that I’ve read, nobody can get it to work.

OK, so we’re not even going to talk about that here. So the first option that we have that I found is a service called Pano Raven.

OK, now they have a free and they have a paid service. OK, the free service. This is their website here. Very nice and neat, but the free service is for personal use only.

OK, and they don’t even require that you create an account which is pretty cool. So no login required.

They have a paid service as well. That is strictly for like commercial and business use. OK, so let’s hop in here real quick. All right. Because after all you do is you try it now, actually, you do quickly upload or try it now and then it prompts you to upload your 360 photo and that’s it once you are done. I’m not going to go through that process because it’s very simple. Once it’s done, you get on to this.

They come up with this for you. Now, this is pretty cool. You do have some options here. You do have like a social share option. So it gives you the link for that. You can copy the direct link, you can get the edit link, and then here is your embed code, OK? And you can see. This is my 360 photo back when I was in Canada last year. All right. And. Once you get the embed code, which it copy straight to it, all right, I have my website over here and I’m using Debe, you don’t have to use Debe.

You can just drop this in your editor into the tech section. You’ll see here, like right here. All right. So you don’t drop it in the visual. Drop it in the text, OK, and it gives you this code here, all right, but once that is rendered, all right, you’ll notice. That it looks beautiful on the website. OK, you can look around. All right, everything works perfectly fine, even full screen works.

So all of that is gravy and the cool thing about Panel Raven. Is they allow. Where to go, they allow you to add extra photos into it, so I added a second photo here. All right, and you can create kind of like a. A gallery so you can switch in between the 360 photos, I’m not sure how many they allow you to do, but it didn’t look like it was a little. So you can do quite a few and you can make like a gallery of your 360 photos and share that with people, which is pretty awesome.

I really like the panel, Raven, quite a bit.

Downsides to it, I didn’t find too many, except if you are going to be using it for business use, you are supposed to they say legally you need to pay for a pro account, but I don’t see what would be stopping you from using it on the free account. They don’t really try to stop you. OK, but you do what you want with that. All right.

The second option is more of a popular option that I’ve seen because there’s actually a WordPress plugin for this and that is momento. 360 now. When I was testing it, I didn’t like using the plug in. I try to use it as few as plug ins as possible on my WordPress sites because it slows down the the site.

So I’m just using the code here. I didn’t even install the plug in.

OK, well actually I did, but then I deleted it. All right. But this is just using the code now. Momentum 360.

They have a free plan as well. They have a storage limit on it and then they have a paid plan. For most people, I’m guessing the free plan would work perfectly fine.

I was very concerned about the watermark here. All right. Because some people’s watermarks can be huge and annoying. But when I did it. It’s very small, and I’ll show that to you in a second. Now, when you create an account, it’s a free account. You just sign up for it, upload your picture. All right. Here is the photo that I uploaded. And it pops it into a screen like this. All right, and you have different options in here.

OK, let me just play around here real quick. You can turn annotations off and on. I’ll show you that in a second and then auto play. I’m not exactly sure what the auto play does. All right, you have full screen mode, which does not work in my experience, I did not get it to work for me. But you have all the share options you can post to social media. Give you those links and whatnot, share or embed link.

And then you can enter in like comments like if people if you share this, people can write a comment on it. I don’t know the share or embed link. This is what was kind of annoying to me. When you click on it, it gives you a link. All right. Which takes you directly to the. The photo. All right, but it does not give you like an embed code, like an iFrame embed code, I’ve clicked everywhere on here.

It does not give it to you.

That’s actually what the plug in is for on WordPress, I believe.

But I like to use the embed code myself, and this is how I’m doing it. This is something that you will love. OK, once I show this to you, this is a website called Embed Responsively. OK, not responsibly, but responsively. All right. This is an awesome, awesome website. All right, where you can embed YouTube videos, Vimeo, Dailymotion, Google Maps, and this is a generic iFrame that we’re doing, which is just a picture I have put the.

The code in there that they gave me and then you click embed right in, it gives you. All right, irresponsive embed code, so when you use this on a website, it is going to adapt to the containers of your website. So it’s always responsive whether people are using a very large screen or if they’re using like a mobile device, it’s going to always be responsive and look good. I use I use this for a ton of different things because you’ll notice when you start building a website embedding different things like a PDF or a picture or something, sometimes it’ll break out of the container of your website, you know, just look stupid.

So this really, really helps. So when we did this.

As you can see, if you if you just put the momento 360 code that they gave you with just a generic iFrame code, not a responsive one, this is what you get right here. You get this little bitty thing and then you’re going to have to go in there and figure out some HTML code to make the make it bigger.

You’re going to have to play around with different code. All right. Which is not fun when you use the embed responsively code.

All right. It looks perfect. OK, now one thing that is cool about in bed excuse me, about Momento 360 is they allow annotations. OK, so as you can see, I put this annotation on my face here. This guy likes to hunt waterfowl and then they let you put in attachment so you can do like a document, a PDF, you know, whatever you want to have them download if you do or don’t. I just put another picture in here just for fun, just to see what it does.

So lots of cool things you can do with the annotations, especially if you’re, you know, depending on your usage, you know, you can have a lot of things that you want to point out to people and you can put annotations on all these different things and they allow you to do the box as you saw. When you’re in here, you just right click so you can do a square. A pushpin. Up or not? All right, so that that is very cool and that’s really going to depend on what you’re needing to do with your 360 videos.

And also, like I was saying, that water mark very, very small, not big at all. I’ve seen some of these free companies. They’ll put a watermark over the entire picture and it’s like, dude, I can’t even use this, you know, so this doesn’t really bother me at all. It is so small. I like momentum 360. I did notice that this does not work. It does not make it full screen. That is that’s actually a big bummer to me because I do like to make it full screen and play around with it.

I mean, that’s really the whole point of the 360 photo, right?

So that doesn’t work. At least I couldn’t get it to work. But the annotations are very, very cool, especially depending on your usage for it.

Now, the other way of embedding one, OK, is with Google Maps. OK, now this is a picture that I uploaded at Wal-Mart. It’s a 360 photo that I took at Wal-Mart. And when you do that, OK, you know, you go you go find someone on Google Maps and you upload the 360 photo under their listing, OK? And then if you try to find it, like if you come down here and look at their photos, you’ll see 360 views if you click on that.

This is my picture right here, you can see uploaded by Jason Moss, OK, and you click on these three dots, you hit share or embed image in bed a map, and then you just copy this HTML. All right. You can switch between what you want, of course, copy HTML. And then you just throw that on your website. So as you can see, I named it all back in here. But you just put it right in here, put it in the text editor, OK, and very, very simple, that’s three different ways that you can do it.

You can do it with Panel Raven Momento, 360 or Google Maps. There’s, you know, three options there. Like I said, they are all free. They all have paid options. But it really depends on what you need. Panel, Raven is great. If you’re doing free stuff, you don’t care about the annotations. I personally like how the panel raven player excuse me, the viewer looks. It’s a very small watermark that they put on here.

OK, and the full screen works, I’m very into the full screen because that’s what a 360 video excuse me photo is all about, is seeing everything right. So I personally like panel vision and the panel Raven, but the Momentum 360 is very cool with the annotations and Google Maps.

You know that that works just as fine as well, you know, but that’s only if you’re uploading to like a business. A lot of times you might just be taking some photos and it’s not at a business, so you don’t want to upload it to that. So Google Maps wouldn’t even be a viable option, but hopefully that is helpful. That’s three different ways that you can embed a 360 image on your website and remember those embed codes. You can put those straight into an HTML site so you can put them on Wick’s you can put them on Squarespace WordPress, just a raw HTML website, deeann in site.

I mean, anything just with that basic embed code.

So if you have questions or comments, drop them below and happy to help. But I will see you guys in the next video.

Thanks.