How to embed your 360s on Ghost

Narendra Vardi -

Don’t show an image — immerse your viewers in it.

How do you immerse them? There are various ways. One of the approaches I have come across recently is to use a 360° photo.

With 360° photos, users can view the entire location by clicking on a laptop or turning around on a mobile device.

Here's a small demo of a 360° photograph:

💡
You can check out the "My work on 360° picture" page, where I have embedded the 360° picture I have captured.

360° pictures use the latest jpg format and don't need specialised apps. But these apps must be updated to support 360° pictures.

Here are the steps involved in embedding a 360° picture with the Ghost blog

  1. Transfer 360° pictures from the device to your laptop.
  2. Create an account on the momento360 website.
  3. Upload your 360° pictures to the momento360 website.
  4. Copy the embed link from the momento360 website.
  5. Integrate with the Ghost website.

1. Transfer 360° pictures from the 360 camera to your laptop.


Transfer the photos from the 360 cameras onto your laptop. The latest 360 cameras support transfer via Bluetooth and Wifi. But wired transfers or direct SD Card transfers are faster. So, choose between wireless and wired based on the number of 360° pictures you want to transfer.

2. Create an account on the momento360 website


Momento360 is a free, easy, and private way to upload, view, and share your 360 photos and videos in one place (all from your browser). I am using their service to embed 360 photos on my ghost website.

The creation of the account is straightforward.

Enter your email and password to create an account, and remember those credentials to login back.

💡
Momento360 uses freemium pricing. They offer a free service to store a hundred of 360 photos or 750MB of data, whichever reaches first. Post that quota, you would have to buy their premium subscription.

3. Upload your 360° pictures to the momento360 website.


Sign in to the momento360 website, click on the camera icon in the top right corner, and you’ll be automatically prompted to choose the photos you want to upload.

Click on the camera icon highlighted by the red box to upload your 360 photos.

Once the image is uploaded, click on the SHARE OR EMBED A LINK... button, which gets visible when you click on the share icon.

Once you click on the 'SHARE OR EMBED A LINK' button, you will be prompted to create a link. Create the link, copy and save the link from the text box.

Integrate with the Ghost website.

In the ghost text editor, insert the HTML card.

Type '/ht' and get the recommendation to use the HTML card in the ghost editor.

In the HTML card, copy-paste the following. Make sure that you change the src= field to the link that you have saved.

<iframe height="350px" width="100%" allowfullscreen="true" 
src="<<INSERT YOUR COPIED LINK HERE>>"> </iframe>

Here's a sample

<iframe height="350px" width="100%" allowfullscreen="true" 
src="https://momento360.com/e/u/9fb28ac1262146ab817980b03ed67a18?utm_campaign=embed&utm_source=other&heading=0&pitch=0&field-of-view=75&size=medium"> </iframe>

Once you have embedded, your ghost text editor will show the HTML card as below.

HTML card is visible as an 'Embedded iFrame'.

Do not be confused if the HTML card says Embedded iFrame.

When you preview your ghost article, the 360 images can be viewed.

💡
While using the freemium tier of moment0360 to embed your 360 pictures, the embedded 360 images will have a watermark of momento360. It's not a deal breaker for me, but if you want to remove that, you may have to buy the premium version of their service.

I have tested momento36o embedding on mobile and laptop, and it worked seamlessly. I am very impressed by their service, so I thought of giving a small shout-out to them with this article.

To many more 360 images, we can embed on your blog posts!🎉🎉🎉

Have you already taken any 360 photographs? If yes, share them with me in the comments or drop an email.

Recommendations

If you liked this article, you might also like reading the following.

Subscribe for Free

❤️ Enjoyed this article?

Forward to a friend and let them know where they can subscribe (hint: it's here).

Anything else? Comment below to say hello!