Facebook recently rolled out the ability for anyone to upload a 360 panorama or photosphere that can be clicked through on desktop, viewed with certain VR headsets, or viewed by moving your device around on mobile. Flickr introduced a similar feature last December when it launched Flickr VR. I’ve been using that to upload 360 panoramic screenshots from ActiveWorlds, so I was looking forward to doing the same on Facebook.
Unfortunately I quickly discovered Facebook wasn’t automatically recognizing the screenshots from AW. Some googling revealed that Facebook requires images to have this meta tag to work:
<GPano:ProjectionType>equirectangular</GPano:ProjectionType>
I can view that this is missing from the raw metadata in Photoshop, but Photoshop doesn’t let you directly edit the raw meta data. There are some software tools to do this, but I found a simpler method. By extracting the raw metadata from properly formatted panoramas, I was able to create an XMP template I can now import in Photoshop to make Facebook read any photo as a 360 photosphere.
How to add missing equirectangular photosphere metadata in Photoshop (CC 2015/2017/2018)
- Download the XMP template with required projection meta tag and unzip it.
- Open the photo you wish to make into a panorama in Photoshop. 6000 x 3000 pixel images work well (this is what AW produces)
- Go to File > File Info and select the Raw Data tab
- Click “Template” and choose “Import…”
- Navigate to where you saved the XMP file in step 1 and click “Open.” In the dialog that opens, choose “Keep original metadata, but append matching properties from template”
- The new metadata with the equirectangular tag should now be added.
- Click OK. You can now save the photo and upload it to Facebook. If everything worked, your post dialog will say “Say something about this 360 photo…” and a globe icon will appear on the thumbnail.
- Congrats! You’ve now manually created a 360 photo.
As a sidenote, if you’re interested in capturing 360 photos in the real world, new versions of the Android camera app have the feature built in. If you’re on iOS, you can download Google’s Street View app, which has a 360 capture mode. Street View has supported uploading photospheres for a few years now.
If you’re looking for a simple app for uploading and viewing photospheres using a headset like Google Cardboard, I recommend Round.me.
Update: 08/14/16
If you’re having trouble getting iOS panoramas to upload as photospheres to Facebook, I’ve found Facebook often requires the panorama to be the full width, meaning you can’t stop early. If you have a differently sized image, you can try working from an image template instead.
- Download this image.
- Copy the image you’re trying to get to work as a panorama into a new layer in this document.
- Save the image as a jpg.
Update: 09/21/16
I’ve uploaded a basic template for full 360 photospheres. Add your images on top, keep the document the same size, and save as JPG, making sure to retain metadata.
Facebook’s published some extensive documentation for editing 360 photos and injecting metadata, but I think my solutions’s simpler. Using Facebook’s own templates can be much simpler than the method described above.
Sidenote: if you’re working with 360 video and trying to upload to YouTube, read this help page on uploading 360-degree videos.
Hei there,
Just wanna ask a favor can the zip file be capable for window.
Cheers~
Hey there,
It’s a small file, so you can try downloading it directly, unzipped from this link (just right click and choose “Save as…” / “Download as…” or similar.)
Any idea why, text is so badly pixelated once uploaded to facebook?
Facebook’s image compression is pretty terrible. Best you can do is upload as big a photo as possible. You can turn on HD uploads in specific instances by following these instructions.
This works like a charm and is incredibly helpful. I can’t thank you enough for posting it.
I followed these directions, and the first one that I put up a couple days ago worked perfect. I have now uploaded another one following the same steps on 9/19/2016, but it only works on desktop.
Does this work around no longer work? I noticed that the first image I successfully got working has also stopped doing anything on the mobile site.
I don’t think any photospheres work on the mobile site sadly. They are working for me if you’re in the app, just not on web.
Hi, we tried it but it does not upload to fb as a 360 degree image. We followed the steps exactly.
Do you have any ideas?
What image size are you using? Different sizes seem to arbitrarily not work.
If you’re making a 360 photosphere, download this template and save your image (scaling to this size) on top as a jpg:
https://tophermcculloch.com/wp-content/uploads/2016/09/facebook-photosphere-template.jpg
If you’re making a panorama, use this instead:
https://tophermcculloch.com/wp-content/uploads/2016/06/facebook-panorama-template.jpg
If you’re using Save for Web, make sure you’re NOT removing metadata. Facebook needs to see the equirectangular metatag embedded in these templates to work. Also, the image must be a jpg.
hi it worked now, i changed the size from 6000 x 3336 to 6000 x 3000 and it worked tks!
I think it works only with a 2:1 ratio. I have a Gear 360, and in full resolution photos are 7200×3600.
Thank you! you save mi live!
Thanks alot,
This solution just worked like a charm. I have tried all other options but they are so hectic and require a lot of changing to the document.
Stay Blessed
how do you save it? you can no longer save as a jpg
You should be able to do a simple “File” > “Save As…” and choose JPEG. It’ll be a copy since you likely have a layered file.
“File” > “Export” > “Save for Web” works too, but make sure the dropdown for Metadata says “All” otherwise you’ll remove the information you need.
Hi. Thanks for the tips here. I am having an unexpected hiccup. The XMP file I downloaded in your zip appears fine in my downloads. But whether I leave it there or place next to the photo I want to import into the Import template file selection window shows the XMP file grayed out. Any ideas? Adobe Photoshop CC 2015 latest greatest on MacOS version before Sierra.
Regards
Imran
This may be a silly question, but have you unzipped the file so it’s .XMP and not .ZIP? You can also try downloading it from here, or else copy and paste that into a TextEdit document (make sure format is Plain Text) and save as a .XMP file.
Hi, thank you so much for your help! Works perfectly. I was wondering if you know how to create a cylindrical panorama, like in this image: https://www.facebook.com/photo.php?fbid=10102994512539661&set=a.612287952871.2204760.4&type=3&theater. What metadata do I need to set to restrict the viewer so it only pans side-to-side, not up and down as well? Do you think the ratio would have to change? Thanks!
You can make a cylindrical version by downloading this template and adding your image on top. You do need to keep it this exact size for it to work, and make sure not to remove metadata if you use “Save for Web…”
Wow, thank you so so so much! I really appreciate it. I noticed that the Mark Zuckerberg 360 and the template that you sent will allow you to pan sideways but stop once you’ve reached either end of the design. Do you know how to do it so that it stays cylindrical but will continue to spin around, like this example? https://www.facebook.com/handmaidenmovie/photos/a.1216432035067878.1073741828.1118917171486032/1277496478961433/?type=3&theater
Again, thank you so much for your help. I’ve been trying to figure this out all day!
Hey there,
It looks like Facebook’s provided a number of their own templates.. You should be able to achieve that effect using any of the templates that say cylindrical panorama template with 360 FOV, which are this or this.
This is very useful.
Any advice for doing this in Lightroom ?
thanks.
-MP
Is there a way to make the main part swivel round but not distort all the text and images you want to put in?
Hi Topher,
Thanks to share it with us !!!
Since I am starting with 360 assets and I am interested in publishhing them into Facebookj. I am shotting them with Gopro Hero and Heros360 case, for it, Could you advice me about how I would have to create my own Panoramas? ( I am using Autopano Giga/Video Pro/Panotour or Pano2VR). Thanks for your time
Alejandro Castan
Hey,
Can you please check the links, all of them seems to be broken. Thanks for that!
Everything seems to be working for me. Is there a specific link that’s broken?
Hi Topher, everything is working just fine now, I dont know why yesterday every link was down.
Thank you so much I was looking for this kind of information everywhere. You rock!
Hey
Thanks for this. Can I ask this? Can you recommend a 360 viewer app for iPad? I am into virtual reality and I need a paronamic app for my clients. All apps I’ve seen can’t open image files from the local gallery. Or is there a way I can present my 3D images to clients as a standalone paronamic image on their devices? Thanks.
I do like Round.me and the Google Streeview app which let you load photos from your device, but that might not be exactly the solution you’re looking for.
Thanks for the FB template …. perfect, a new way of recyling my panos.
Hello Topher,
Thank you so much for going about this in a way that is more practical for the layman. That being said, I feel as if I’m almost there in getting a 360 photosphere to show on facebook. I downloaded your template, I copied my image over yours and saved it. I made sure the size was not altered as well. When I go to upload the photo on facebook, it initially recognizes it as a 360 photo. During the upload process something happens to where it is no longer recognized by facebook as a 360 photo.
Can you direct me in the right path? I’m using an old version of Photoshop ( 7.0 ). Do you suppose that could be the culprit?
Thanks in advance.
I assume you’re saving as a JPG. Are you doing a simple File > Save or File Save As? That should work. If you’re using Save for Web (not sure if Photoshop 7 had that), make sure that you’re retaining all Metadata.
Hello Topher,
Yes, I’m saving it as a simple JPG. I’ve done both Save As and Save and I get the same result. Facebook recognizes it initially though then doesn’t. That is what’s throwing me off.
Thanks,
Daniel
Hello Topher,
Fantastic post, i spent many hours without finding a simple solution as describe here…
I followed all your steps by differents ways. (xmp / photosphere template…)
Curiously, It works inside my Facebook from my desktop, but it does not work when i use FB with my iPhone or Samsung.
Have an idea ?
https://www.facebook.com/Hdoi360
Absolutely very helpful! .. ..I have several equirectangular photos from the past, thanks alot .
Awesome stuff man!
Thanks for sharing! Would you know if this could also work in video formats as well? I’m curious to know if we could add some animated elements and do a 360 video loop.
You should be able to use this image size and export as video in Photoshop (or something like After Effects). You’ll need to download this spatial meta data injector from Google, but after using that the video should work on Facebook or YouTube.
Thank you sir! π
Helo.
I used your template photoshop 360 jpg.
But when i paste new photo to your jpg, merge the layer and save as Jpg, facebook can not detect as photo 360. How to solve it.
Fyi:
I used Photoshop CS
Thanks
Hey, i tried this out and it works perfectly. i would, however, like to know if there’s any way to alter the xml/metadata file to constrain the image into a 180Β° field of view.
Facebook has provided templates in a bunch of different formats. I think this one might be what you’re looking for.
How you can create 360 degree photos and how to post 360 degree photos on Facebook.
hi! thanks for the info.
I am wondering how to create like this but GIF format ^_^ ..
Gifs don’t work, but you could create an image like this in Photoshop and use the timeline to add animation. You’d export as a video instead of a gif and then download this app to add the necessary metadata to your video.
Thank you very much,,, amazing
Hi, Topher thank you so much for your tutorial. l was wondering if you know how to add logo like in this image: https://www.facebook.com/dnaindia/photos/a.369158955440.358448.154284380440/10158252693220441/?type=3&theater
Thanks!
You’re a beautiful beautiful person. THANK YOU!
Been trying to figure this one our for hours
Hi Topher,
I shoot my 360 photos with Richo Theta. When I add a logo on to the image using photoshop, it will look distorted when uploaded in FB. How can I make undistorted? Thanks.
Before you put a logo I think you have to convert it to equirectangular form.
I just can describe in words how much i thank you for this tip!!
much much love!!
Hey, I’ve been trying this and it works great. The only issue is the top and the bottom portion gets skewed. Is there a way to avoid that.
You could either look for a plugin that can display equirectangular images in a cube map format like Flexify 2 where you can adjust the image without distortion, or else use one of Facebook’s cylindrical, rather than spherical, templates.
Hi Topher, doesn’t seem to be working with 360Gear files. The photo gets recognised as a 360 file on Facebook, but the stitching isn’t correct… Any advice?
Hi Topher,
I’ve follower your instructions exactly like any normal user, when I upload it to facebook the 360 icon simply doesnt not display. I’ve tried exporting every other way also. Any idea what I’m doing wrong?
You are the mucho best!!! Thank you! Killer!
Thanks a lot! Never thought this could go that easy. (Y)
Leaving a “thank you” comment is the least we could do. Thank you indeed!
i’ve read everything for so long but you found the easiest solution
bravissimo
thank u
U RULE
Hi there! Thank you VERY MUCH for this tutorial! <3 I was wondering, does the same method work on GIF files?
Gifs wonβt work, but you could create a timeline animation using the full 360 template in Photoshop and export as a video instead of a gif. Then download YouTube’s 360 metadata injector app to add the necessary metadata to your video. It should then play as a 360 video on Facebook.
I’ve done this several time – maybe over a dozen, and it’s worked wonderfully. Now, suddenly, it’s not working. Is it just me? Did Facebook just throw us a curve ball?
Scratch that last comment – I figured it out. Turns out I was “Saving for web” instead of “Save As” – important piece. π Thanks much.
Very good info on this subject. Thanks for sharing, Bizzmar360Photos
Thanks for putting template image. It helps a lot!
Can’t thank you enough! That little bit of code worked perfectly and has helped a ton
thanks great help!
I have another question on how to improve the quality of the image
on my own computer the picture is crystal clear however when uploaded to facebook it becomes fuzzy?
I’ve tried to upload the highest quality image, but it still becomes fuzzy? any advise on a fix?
When you’re saving the JPG, you can make sure the quality is set to max (12). Unfortunately, Facebook’s compression algorithm is pretty harsh, so there’s only so much you can do. Here are some tips.
thanks for this blog post. big help for old panos exported form old software.
HI
i have a little problem when I tried to import the template an error message opens tell that the template can’t be opened, I’m using photoshop cs6 extended v.13.0.1 x 64 on windows 10, can you help me with this?
Hello,
Do you have errors with all the templates from Facebook as well?
https://www.dropbox.com/sh/70mwlh8k0y4rg0g/AACVNV7hvRZtjEKj4DoJMhCba?dl=0
What is the error message?
Thanks for sharing a very useful information.
thank you for the tutorial and links to facebook templates! the facebook templates are resizable too (i tried height = 800px).
in which format i have to save the file
JPG, and make sure to include metadata.
Hello I have been trying to figure out for a month now how to get my 360 photos to work on facebook because i have taken close to 4 dozen and only 3 of them have the globe icon in the bottom, I just followed all your steps on here with the download then photoshop cc 2017 and it still does not work. I do not understand why it has to be this difficult. I dont know what I am doing wrong but I am close to giving up.
Three common issues to check:
1. Did you keep the dimensions of the template exactly the same size?
2. If using Save for Web, is Metadata set to “all”?
3. Have you tried using one of Facebook’s provided templates?
thank you so much sir,
it helped alot , also please tell if there’s any way these 360 images can work on mobile facebook as well…
it will also help us alot if you can tell…!!? π