How to make any photo work as a 360 photosphere on Facebook

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.

basement

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)

  1. Download the XMP template with required projection meta tag and unzip it.
  2. Open the photo you wish to make into a panorama in Photoshop. 6000 x 3000 pixel images work well (this is what AW produces)
  3. Go to File > File Info and select the Raw Data tabmeta-rawdata
  4. Click “Template” and choose “Import…”
  5. 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”
    meta-append
  6. The new metadata with the equirectangular tag should now be added.
    meta-withdata
  7. 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.
    Screen Shot 2016-06-19 at 5.56.42 PM
  8. 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.

  1. Download this image.
  2. Copy the image you’re trying to get to work as a panorama into a new layer in this document.
  3. 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.

80 Comments

Leave a Comment

  1. MIke says:

    Hei there,

    Just wanna ask a favor can the zip file be capable for window.

    Cheers~

  2. Alex Webster says:

    Any idea why, text is so badly pixelated once uploaded to facebook?

  3. James says:

    This works like a charm and is incredibly helpful. I can’t thank you enough for posting it.

  4. Brandon says:

    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.

    • topher says: (Author)

      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.

  5. thomas says:

    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?

  6. thomas says:

    hi it worked now, i changed the size from 6000 x 3336 to 6000 x 3000 and it worked tks!

  7. Fortarrigo says:

    I think it works only with a 2:1 ratio. I have a Gear 360, and in full resolution photos are 7200×3600.

  8. Yessid says:

    Thank you! you save mi live!

  9. Syed says:

    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

  10. laif says:

    how do you save it? you can no longer save as a jpg

    • topher says: (Author)

      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.

  11. Imran Anwar says:

    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

    • topher says: (Author)

      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.

  12. Sophie says:

    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!

  13. MP says:

    This is very useful.
    Any advice for doing this in Lightroom ?
    thanks.
    -MP

  14. Daniel Robbins says:

    Is there a way to make the main part swivel round but not distort all the text and images you want to put in?

  15. Alejandro Castan says:

    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

  16. Dano says:

    Hey,

    Can you please check the links, all of them seems to be broken. Thanks for that!

    • topher says: (Author)

      Everything seems to be working for me. Is there a specific link that’s broken?

      • Dano says:

        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!

  17. Kaycee says:

    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.

  18. Paul says:

    Thanks for the FB template …. perfect, a new way of recyling my panos.

  19. Daniel says:

    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.

    • topher says: (Author)

      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.

      • Daniel says:

        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

  20. 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

  21. rafael says:

    Absolutely very helpful! .. ..I have several equirectangular photos from the past, thanks alot .

  22. 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.

  23. Kahfi says:

    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

  24. Brian Taylor says:

    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.

  25. John Mitton says:

    How you can create 360 degree photos and how to post 360 degree photos on Facebook.

  26. Cydlaz says:

    hi! thanks for the info.
    I am wondering how to create like this but GIF format ^_^ ..

    • topher says: (Author)

      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.

  27. Thank you very much,,, amazing says:

    Thank you very much,,, amazing

  28. Sachin says:

    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!

  29. Dale says:

    You’re a beautiful beautiful person. THANK YOU!
    Been trying to figure this one our for hours

  30. Nantha says:

    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.

  31. shoecamp says:

    I just can describe in words how much i thank you for this tip!!
    much much love!!

  32. Sanjay says:

    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.

  33. Rich says:

    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?

  34. chribbs says:

    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?

  35. Karlos says:

    You are the mucho best!!! Thank you! Killer!

  36. Bern says:

    Thanks a lot! Never thought this could go that easy. (Y)

  37. Konstantinos says:

    Leaving a “thank you” comment is the least we could do. Thank you indeed!

  38. cecilia says:

    i’ve read everything for so long but you found the easiest solution
    bravissimo
    thank u

  39. eXYlon says:

    U RULE

  40. Joana says:

    Hi there! Thank you VERY MUCH for this tutorial! <3 I was wondering, does the same method work on GIF files?

  41. Jonathan says:

    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?

  42. Jonathan says:

    Scratch that last comment – I figured it out. Turns out I was “Saving for web” instead of “Save As” – important piece. 🙂 Thanks much.

  43. Very good info on this subject. Thanks for sharing, Bizzmar360Photos

  44. Min says:

    Thanks for putting template image. It helps a lot!

  45. Pres says:

    Can’t thank you enough! That little bit of code worked perfectly and has helped a ton

  46. Martin Hodgson says:

    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?

    • topher says: (Author)

      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.

  47. KENYONB says:

    thanks for this blog post. big help for old panos exported form old software.

  48. jj says:

    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?

  49. 3d rendering says:

    Thanks for sharing a very useful information.

  50. V says:

    thank you for the tutorial and links to facebook templates! the facebook templates are resizable too (i tried height = 800px).

  51. mik says:

    in which format i have to save the file

  52. Harry Wojahn says:

    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.

Trackbacks for this post

  1. How to create a 360 panorama painting in Photoshop: 6 Steps (with pictures) – Studio Behind 90 – Independent Motion Graphic Studio
  2. Lead generation: una previsione sui trend 2017 - Lead Champion
  3. How to creating 360 Virtual Reality (VR) Illustration with Adobe Photoshop CC (2017 & 2018) – Studio Behind 90 – Indie Motion Graphic Design Studio

Leave a Comment