Droplets and Embedded Panos in Facebook

Q&A about the latest versions
User avatar
Tony
Posts: 846
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Droplets and Embedded Panos in Facebook

Post by Tony » Tue Aug 19, 2014 9:05 am

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
k.ary.n
Gnome
Posts: 347
Joined: Wed Aug 15, 2007 1:02 pm

Re: Droplets and Embedded Panos in Facebook

Post by k.ary.n » Tue Aug 19, 2014 12:46 pm

Awesome tutorials, Tony!

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

User avatar
Tony
Posts: 846
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Tony » Tue Aug 19, 2014 2:13 pm

Thanks, glad you like them.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by hum@no.id » Tue Aug 19, 2014 2:21 pm

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
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj

User avatar
Hopki
Gnome
Posts: 9729
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Hopki » Tue Aug 19, 2014 3:58 pm

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

User avatar
Tony
Posts: 846
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Tony » Tue Aug 19, 2014 5:07 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
Hopki
Gnome
Posts: 9729
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Hopki » Tue Aug 19, 2014 9:45 pm

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

User avatar
Hopki
Gnome
Posts: 9729
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Hopki » Tue Aug 19, 2014 10:01 pm

Here is the same project in Facebook. 8)
Regards,
Hopki

User avatar
zap
Posts: 384
Joined: Thu May 29, 2008 12:13 pm
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by zap » Wed Aug 20, 2014 2:06 am

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

thx for sharing
360 Panorama Creators http://luxmap.com
Google Trusted Photographer

User avatar
Tony
Posts: 846
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Tony » Wed Aug 20, 2014 4:17 am

Hopki wrote: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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by hum@no.id » Wed Aug 20, 2014 7:00 am

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?
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj

User avatar
k.ary.n
Gnome
Posts: 347
Joined: Wed Aug 15, 2007 1:02 pm

Re: Droplets and Embedded Panos in Facebook

Post by k.ary.n » Wed Aug 20, 2014 11:12 am

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

User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by hum@no.id » Wed Aug 20, 2014 12:57 pm

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
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj

User avatar
JimWatters
Posts: 329
Joined: Thu Oct 07, 2010 6:16 pm
Location: Saint John, New Brunswick
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by JimWatters » Wed Aug 20, 2014 1:03 pm

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.

User avatar
Tony
Posts: 846
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Droplets and Embedded Panos in Facebook

Post by Tony » Thu Aug 21, 2014 1:49 am

Hi k.ary.n,
k.ary.n wrote:(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
Last edited by Tony on Thu Aug 21, 2014 2:20 am, edited 4 times in total.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests