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]

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”).