Droplets and Embedded Panos in Facebook

[Tony]

Hi,

The release of the new HTML embed Template for Facebook was great and it really makes it much easier to post an interactive panorama on your timeline now. Publishing is something I do quite often but I'd never really spent the time to check out Droplets. The complexity of creating all the different files for a Facebook post lead me to research droplets and play around with them, and they are fantastic! To that end I've written a tutorial with the rather long and cumbersome title, "Using Droplets to create 360˚ panoramas for Facebook Timeline, Google+ & Twitter" available on my website at http://tonyredhead.com/pano2vr.

This step-by-step tutorial will take you through the process of configuring and using a Pano2VR droplet to create all the files required to display your panoramas embedded in a Facebook timeline post as well as post to Google+ and Twitter. The droplets are pre-configured to create 3 basic Output files; a Flash .swf version, a HTML5 version and a Preview image. The droplets are also configured to create multi-resolution tiles that load automatically based on the resolution of the image displayed on the device screen. There are 4 Steps in the process, the first Install the HTML Template covers installing the new HTML Template. The second, Setting up the Droplets for your System, covers installing the skins and updating your server path information in the droplets. The third on Using the Droplets takes you through building your project and the fourth discusses Adding Your Panorama to the Facebook Timeline.

I'd appreciate any feedback, comments or suggestions you may have on the Tutorial to help me fine tune it.

Tony

[k.ary.n]

Awesome tutorials, Tony!

I've added link to your tutorial on our tutorial page.

[Tony]

Thanks, glad you like them.

[hum@no.id]

Hi,
I see that it's cool ... but where I can see an example of placing panoramas in the social post on Twitter and especially Google+ ie "living" working examples. Thank you

[Hopki]

Hi Gumir,
He's a Twitter example.
With twitter you don't get to play the Pano or Object in the time line but it does use the image.
Regards,
Hopki

[Tony]

Hi Gumir,

I'll update the tutorial and add in the Twitter and Google+ side of it as well. Here's one of my Twitter posts. https://twitter.com/redthreesixty/statu ... 4797336577

Hopki, not quite sure how you got your image larger in the twitter feed did you set a larger size somewhere?

Tony

[Hopki]

Hi Tony,
My image is 600 x 400 apposed to your 480 x 320.
Regards,
Hopki

[Hopki]

Here is the same project in Facebook.
Regards,
Hopki

[zap]

Amazing.
I'll give it a try and post result

thx for sharing

[Tony]

My image is 600 x 400 apposed to your 480 x 320.

Hi Hopki,

I just checked in the project folder and the large image generated by Pano2VR is 600 x 400. However when the image is placed into the Twitter Card it is being resized to 480 x 320.

If you go here http://tonyredhead.photography/360/Face ... ley-TM.jpg you will see the file exported by the droplet.

If you go to the Twitter post at https://twitter.com/redthreesixty/statu ... 5822230528 and inspect the element it's showing as 480 x 320 and the direct link is https://o.twimg.com/2/proxy.jpg?t=HBhIa ... Bb5YkF_KnY

Also in the Twitter Card Validator preview it's showing it downsampled to a 480 x 320 image and I've selected Summary Large Image from the Card Catalogue. I thought it might have something to do with the resolution of the image, yours was 72dpi and mine was 96dpi but changing that didn't make any difference.

So I'm not quite sure how you managed to get the full size in there?

Tony

[hum@no.id]

Hi Tony and Martin

I expected to see (in Tw, G+) inline publication, like on Facebook (action in posting frame)

like as Youtube post on Twitter and Google+
https://twitter.com/GumirJ/status/498423553880895490
https://plus.google.com/+GumirJ/posts/EA38TmWVssj

____

Trying to figure it out where it should be placed (in the head page)?

Code: Select all

    <meta property="twitter:card" content="photo" />
    <meta property="twitter:site" content="@flickr" />
    <meta property="twitter:title" content="Mountain sunset" />
    <meta property="twitter:description" content="Explore Reza-Sina's photos on Flickr. Reza-Sina has uploaded 113 photos to Flickr." />
    <meta property="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />
    <meta property="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />

test page (see code)
http://gumirj.com/twitter_test.html
Posting is not suck image. What is wrong?

[k.ary.n]

Gumir, you need the Player Card. I haven't tried this and since our template only uses the Large Summary card, there might be some reason why it's not used. I don't know what you need for Google+ (Jim might be able to answer both these questions). In any case, it would be fantastic if these also worked.

Yes, the meta tags go in the <head> of the html page. But if you use our template, they are already placed there for you.

Tony, our template uses the Large Summary Card already and that's strange that your image is down sampled. I haven't found anything about size requirements yet for the large summary card. (dpi has no affect web publishing)

Here's our Google+ example (with just a poster image).

[hum@no.id]

Hi Karyn

In any case, it would be fantastic if these also worked.

Yes, you're right... but it is not so sad.
I never looked for ways to use a small preview of the post like "live panorama"

Trouble for me to post on Twitter a link to the panorama without thumbs...
concerning two other social networks, this issue was settled long ago
Google+ - https://plus.google.com/u/0/b/106331840 ... oXRwPd28Rr
Facebook - https://www.facebook.com/astanacapitala ... 3948563339

now thanks to this thread (I think) I found what I need. That's kind of a working version for this solution

Code: Select all

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">

but there is little nuance ... preview does not appear in the timeline
https://twitter.com/redthreesixty/statu ... 5822230528
it appears only in the full post

Let it be so, than none at all... The only thing ... my CMS does not allows you to automate the process of placing a meta tag - twitter: image: src in the "head", it is possible to place only in the "body" (dynamic write URL on page). I'm looking for possible ways via script or some other way - "write meta tags from body to head"

like this - Inject a meta tag from a document's body
http://stackoverflow.com/questions/1282 ... ments-body
http://stackoverflow.com/questions/1447 ... ument-body

Who has the interesting decision on my last question?
Regards, Gumir

[JimWatters]

From what I can tell by the restrictions of Twitter Player card will not play panos. I am not a Twitter user so would love if someone could prove me wrong.

Google+ does not show embedded content. The only way they show panos is as sphere, and then you don't get the skin or button or link to open web site.

[Tony]

Hi k.ary.n,

(dpi has no affect web publishing)

Yes, but unfortunately that was the only difference I could find between your large image and my large image. How are you posting the tweet, is it via http://twitter.com/ggnomes or are you using a twitter app to post, and are you posting from a Mac or PC?

Clutching for straws trying to figure out why it's scaling.

Okay, something new. If I do a standard tweet, and upload the image generated via the droplet using the "add picture" button then the image isn't scaled. https://twitter.com/redsquare/status/502244925212463104 but as soon as I use the url https:// or http:// it scales it https://twitter.com/redsquare/status/502245679360901120

I've sent a report of the issue to Twitter support, frustrating, to say the least. I'd be interested to hear other peoples experiences.

Tony