how to embed google+ photospheres in your wordpress blog using shortcodes

update: google has published a new, official way to publish photospheres on your website, which still works (in contrast to the below, outdated method).

if you’ve been following the feature additions to android over the past few months, you’ve probably heard of photospheres: they’re google streetview-like interactive 360 degree panoramas that you can easily record with your smartphone running android jellybean 4.2+.
now, google has finally provided us with a way to embed photo spheres from google+ on other websites, including your self-hosted wordpress blog!

[ps https://lh6.googleusercontent.com/-CJKsUPt-aKo/UWrB_g8gU-I/AAAAAAAAEBs/R3d4-M0N2Gc/w718-h248/2013+-+1]

stunning views from seegrube, innsbruck

here’s a little function for your wordpress theme’s functions.php, which will enable the shortcodes [photosphere URL] and [ps URL]:

//g+ photosphere embed
add_filter('the_content', 'gplusphotosphere');
function gplusphotosphere($content) {
$content = preg_replace('#(?<=[^=\"\'])\[photosphere https(.*)\]#','<div align="center" style="border:1px solid #000;"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:panoembed imageurl="https\\1" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="550,400"/> <script> gapi.panoembed.go(); </script></div>',$content);
$content = preg_replace('#(?<=[^=\"\'])\[ps https(.*)\]#','<div align="center" style="border:1px solid #000;"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:panoembed imageurl="https\\1" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="550,400"/> <script> gapi.panoembed.go(); </script></div>',$content);
return $content;
}

copy&paste this to the end of your functions.php, and the following example:

[ps https://lh6.googleusercontent.com/-CJKsUPt-aKo/UWrB_g8gU-I/AAAAAAAAEBs/R3d4-M0N2Gc/w718-h248/2013+-+1]

will turn into the interactive photosphere at the top of this article.

how to find the URL of your photosphere image:

This is the base URL of the photo sphere image you uploaded to Google+ or PicasaWeb. You can get this URL by going to the photo sphere viewer in Google+, switching to the flat viewing mode by clicking the icon in the top-right of the viewer, and then right-clicking on the photo sphere to see the image’s URL.

parameters to be modified for your personal pleasure are at the bottom of the script (for details, see link below):
fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="550,400" autorotate="1"

update: please note that while this code should generate a working photosphere embed, correct fullsize, croppedsize and offset are apparently needed. you can get these values manually (see “retrieving the photo sphere metadata”). when there’s some extra time, i’ll update the above function to accept these parameters in the shortcode.

also, google has provided a working example that will enable you to find all of your photospheres shared to date (try “get all”).

9 thoughts on “how to embed google+ photospheres in your wordpress blog using shortcodes

  1. Great post and code to embed the photosphere. But there seems to be a problem when we look at the embed version versus the original photosphere. When you look at this sphere on my blog here http://blog.photojpl.com/photosphere-dune-manifestation/ there is a black circle at bottom and top and this is a problem. You know why and how to get rid of these circles? My sphere is fine when looking here in G+. These black circles should not be there at all.

    Here is the code I use on my blog to embed it:

    gapi.panoembed.go();

    The original photosphere on G+ is here: https://plus.google.com/u/0/108480599252932396008/posts/LTqoi7WgE5B

  2. interesting: i *always* see these black circles in my photospheres.
    try setting the value for attribute “croppedsize” to that of “fullsize” (in your example: croppedsize=”6000,3000″) and the circles should disappear.

  3. Hi! It seems like you might be the only person that might help me with my problem:
    I am trying to have the imageurl property as a variable. You have done it in a way, but I can’t read php.
    Can you please help me with a html/javascript example?

    Regards

  4. the “secret” behind this code is “regular expressions” – they help find a variable string that’s delimited by something before and something after. i think a google search should help you from here. :)

  5. Hmmm… Entered this into my functions.php and it messed the hole page up. Now I have 2 blank photosphere “windows” and some code showing. Is this code to old to work on newest wordpress or have I done something wrong?

    This is how my adminpanel looks afterwards (main page looks the same but with themes colours)
    http://oi43.tinypic.com/312uwc1.jpg

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.