How to embed Google Street View 360 degree photos from an iPhone in my blog?

  • baldwindavidm · Member ·

    Take a 360 degree photo with an iPhone using Google Street View app.
    Put the photo with 360 degree capabilities on my blog.
    Here is a link to a photo, https://www.google.com/maps/contrib/111276635648838070966/photos
    I can put the link in the blog, but I want to put the photo.

    The blog I need help with is: (visible only to logged in users)

  • melindahelt · Staff ·

    Hi

    I wasn’t able to see the photo on your link, but I can provide you with some information on embedding the 360 degree images.

    The feature is brand new to WordPress.com and still in beta mode, so if you have any issues with it, please let us know.

    You’ll want to take the image from your iPhone and upload it into the WordPress.com media library. Here’s some background information on the Media Library, if needed.

    You’ll want to grab the image URL from the attachment page (shown in the link above) and add the URL to the following short code and place that into your page or post.

    [vr url=https://yoursite.wordpress.com/2017/01/09/your360image.jpg view=360]

    You’ll need to replace https://yoursite.wordpress.com/2017/01/09/your360image.jpg with the link to your image.

    Here’s some additional information on embedding 360 images

    Hope this helps!

  • baldwindavidm · Member ·

    Here is the short code that I wrote in the post:
    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg?w=300=360]

    This gives in my blog the entire 360 degree photo, very blurry and without the 360 virtual tour capability.

  • melindahelt · Staff ·

    Hi

    I’m going to tag this with modlook for the staff to take a look.

    I just tested a few different 360 degree images on my test site and I was unable to get them to work either.

  • baldwindavidm · Member ·

    What did you mean by this:
    You’ll want to grab the image URL from the attachment page (shown in the link above) and add the URL to the following short code.
    David

  • melindahelt · Staff ·

    You did it correctly.

    In my code sample, I had a fake URL but you replaced it with the URL to your image.

    You could try editing the end of your short code (see below), but I used the same code on my site and was unable to make it work either.

    Your code:
    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg?w=300=360]

    Please try:
    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg view=360]

  • gemmacevans · Staff ·

    Hi David,

    Did the code melindahelt provided, work?:

    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg view=360]

    This is the code you were using:

    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg?w=300=360]

    You’ll see it’s missing ‘view=360’ and there was a ‘?’ at the end of the file name — this is likely to be the cause of it not working as you expected.

    Let me know how you get on.

  • baldwindavidm · Member ·

    Hi here is the code that seems to work so far:

    [vr url=https://baldwindavidm.files.wordpress.com/2017/01/img_3024.jpg w=300=360 view=360]

    So cross your fingers and toes and I will try publishing and let you know.

    Thanks for all your help,
    David Baldwin

  • gemmacevans · Staff ·

    Hi David,

    Ok, fingers crossed!

    Just in case it’s useful, here is a link to our support document about embedding 360° photos and virtual reality (VR) content:

    Embedding 360° Photos and Virtual Reality (VR) Content

    Come back to me if you have any problems.

  • baldwindavidm · Member ·

    It’s working! It’s working!

    https://baldwindavidm.wordpress.com/

    Thanks everyone,
    David

  • gemmacevans · Staff ·

    Great to hear David! Nice Christmas tree :)

  • vrweddingguide · Member ·

    Hi Gemma and Melinda!

    My name is Connor and I have been trying to figure this out as well. I didn’t know how to use shortcodes so I was struggling a bit but this seems very helpful and I can’t wait to try it out when I get home from work!

    I have a question though. I accessed David’s post on my iPhone 6 plus and although the photo showed up and the 360 viewer allowed me to drag the photo around, when I put it into “vr mode” to use with my Google Cardboard and tilted it horizontally, the photo’s view did not move with the movements of my phone. I was only able to move by dragging my finger across the screen, which obviously doesn’t help someone that is using a Google Cardboard.

    I wanted to make you both aware of this and also see if there is anything I am doing wrong in order to use the viewer correctly.

    Thanks in advance.

  • erictatham · Member ·

    There seems to be a problem at the moment with WordPress.com’s implementation. The vr 360 feature isn’t working with iOS. Click on the Compass icon and view freezes looking at ground. It was okay last week but not now. I have raised the issue with WordPress. Hopefully they will fix it soon.

  • erictatham · Member ·

    The examples on support page “Embedding 360 Photos and Virtual Reality (VR) Content” no longer seem to work properly either on iPhone or iPad.

    Embedding 360° Photos and Virtual Reality (VR) Content

  • gemmacevans · Staff ·

    Hi @erictatham @vrweddingguide,

    Please start a new thread for your questions. You can tag them with ‘modlook’ for a staff reply and we’ll help you out!

    Thank you!

  • The topic ‘How to embed Google Street View 360 degree photos from an iPhone in my blog?’ is closed to new replies.