Has anybody made any social media share it buttons for completed panoramas it would be great if people could share what they have seen on facebook twitter and email to friend the link to the pano url
Social Media Krpano
-
-
We would be very interested in something like this too. Does anyone have any experience with using http://www.addthis.com/ within KRpano?
-
You mean something like this?
-
Just search on google for javascript facebook, or something else, like code and you just have to put it in the index and maybe change some parameters.
Works perfect!
Tuur
-
Yes, we also did it for our town panorama portal. If you are interested I can ask my guys that do that code to provide short tutorial on what is to be done to achieve that.
http://www.osijek360.com/ (only Croatian currently available for now) -> see upper right corner.You could Like while you are there and like it ;)
-
the add this buttons are in the html around the pano
http://www.itsrich.info/360vr/955/
additionally there is the postcard pluginthat I think you can add images to facebook or something
additionally additionally this is an html page instructions to make your pano more facebook friendly, although it doesnt embed the media in Facebook which would be nice. anyone have any other ideas?
http://www.autopano.net/wiki-en/action…_Web_publishing -
Here is how we did it on our portal http://www.osijek360.com .
(this is code from our member so if you will have any question I will fw you to him directly)*Introduction*
Our approach to social sharing buttons was to make *look *like they're a part of the actual pano. In practice, we achieved this by placing the standard Facebook/G+/Twitter buttons into a container (DIV) absolutely positioned over the pano embedded into the page.*The pano embedding*
*HTML*Code
Alles anzeigen<div id="content-swf"></div> <divid="content-social"> <div class="sharing sharing-link"> <divid="d_clip_button"><div>copy</div></div> </div> <div class="sharing sharing-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-via="OSIJEK360" data-hashtags="osijek,panorama,360">Tweet</a> </div> <div class="sharing sharing-google-plus"><div> <div class="g-plusone" data-size="medium" data-count="true" data-href=""></div> </div> </div> <div class="sharing sharing-facebook"> <div> <div class="fb-like" data-send="true" data-layout="button_count" data-width="170" data-show-faces="false" data-href=""></div> </div> </div> </div>
*CSS*
Code
Alles anzeigen#content-swf { height: 649px; width: 100%; position: absolute; top: 0; z-index: 1; } #content-social { padding-top: 5px; height: 30px; position: absolute; top: 55px; right: 45px; z-index: 15; } #d_clip_button { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#E4E4E4'); background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(228, 228, 228))); /* for webkit browsers */ background: -moz-linear-gradient(center top, rgb(255, 255, 255), rgb(228, 228, 228)); width: 48px; height: 18px; font-size: 11px; font-family: 'Helvetica Neue',Arial,sans-serif; font-weight: bold; text-align: right; margin: 0 28px 0 -20px; padding-left: 2px; padding-right: 8px; color: #555; border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* future proofing */ } #d_clip_button div { background: url(images/link_14.png) no-repeat 4px; } sharing { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: right; text-align: center; color: white; } sharing-facebook { } sharing-google-plus { padding-left: 30px; } sharing-twitter { } sharing-link { padding-left: 15px; }
*Script*
Codevar swf = createswf("http://www.osijek360.com/wp-content/themes/osijek360_2_0/swf/os-maps.swf", "krpanoSWFObject", "100%", "100%"); swf.addParam("wmode","transparent"); swf.addVariable("xml" , "http://www.osijek360.com/wp-content/themes/osijek360_2_0/swf/os-maps.xml"); swf.embed("content-swf");
Of course, there could be something that I've accidentally omitted, but this should give you a fairly good idea how we have implemented our approach to social buttons on panos.
Note: Code is also visible via View source on our town portal.
-
Thank you very much for your help Umalo!
We managed to achieve this the way you suggested.
This has to be by far the easiest way to add Social buttons to a virtual tour.Thanks!!!
-
Hi there,
I am looking for the social media share, but I cannot seem to get it right.
Is it possible you post example files? I am not that good in coding
Gijs
360panoramafoto -
Hi!
did you saw this Social share
Or, it's not that you looking for?Andrey
-
No I would like the same as Umalo He post some code above, but can't seem to get it to work.
If I would have some example html file I could figure it out :)See his website http://www.osijek360.com/ .
-
Hoi Gijs,
is makkelijk joh..
Gewoon even googlen en dan in je index in een div of zo zetten.
Kijk anders even op mijn site en dan naar de bron code van de index van bv die rsg tour.ps. Jammer dat ook jij je eigen markt sloopt met veeeel te lage prijzen.
Maar goed, de kwaliteit zal ook wel veel te laag zijn.Tuur
-
Thanks, I figured it out, see below my code for anyone who wants to use it.
@ Tuur, dank voor je tip, volgens mij is het gelukt. http://www.360panoramafoto.nl/panorama/kroon…s_01032014.html
ik heb mijn hobby sinds kort weer opgepakt. Kwaliteit kan je over twisten Prijzen blijft altijd lastig, ik hoef er niet van te leven. Wil je me een PB sturen met wat jij gemiddeld vraagt per foto?p.s. ik sta altijd open voor positieve kritiek
Gr. Gijs
Code<div id="fb-root"></div><script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js);}(document));</script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div id="layer" style="width:100px; height:50px; position:absolute; bottom:100px; right:10px; z-index:2;"><div class="fb-like" data-href="http://www.360panoramafoto.nl" data-send="false" data-layout="box_count" data-width="500" data-show-faces="true" data-font="trebuchet ms"></div> <div id="content-social" > </div> <div class="sharing sharing-google-plus"> <div> <div class="g-plusone" data-size="medium" data-count="true" data-href=""></div> <a href="https://twitter.com/share" class="twitter-share-button" data-via="360panoramafoto"></a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> </div> </div> </div></div>
-
guys, please don't force us to use google translator to follow your posts
-
ah, ok, mi ćemo i dalje na engleskom jeziku.
Tuur
-
Туур! прошу вас не знущатися!
Дякую))) -
-
Hi !
To add an image to the sharing of a pano on social networks. In the html
page, I added:<meta name = "image" content = "http://www.mysite.com/image.jpg" />
With an image of size 1000 x 2000 px
But when I do a test, there isn't image displayed for publication ...Anyone know how to do it ?
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!