You are not logged in.

1

Monday, June 7th 2010, 1:26am

Social Media Krpano

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

Tourvista

Intermediate

Posts: 260

Location: Leicester UK

  • Send private message

2

Thursday, June 6th 2013, 11:04am

Any ideas?

We would be very interested in something like this too. Does anyone have any experience with using http://www.addthis.com/ within KRpano?

panomaster

Intermediate

Posts: 297

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

3

Thursday, June 6th 2013, 6:15pm

You mean something like this?

http://www.ai360.pl/panoramy/681,5665

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Thursday, June 6th 2013, 8:03pm

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
*thumbsup*

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

5

Thursday, June 6th 2013, 10:58pm

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

6

Thursday, June 20th 2013, 12:00am

add this buttons

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/v…_Web_publishing

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

7

Thursday, June 20th 2013, 11:44am

Here is how we did it on our portal 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*

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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*

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#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*

Source code

1
2
3
4
var 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.

Tourvista

Intermediate

Posts: 260

Location: Leicester UK

  • Send private message

8

Sunday, July 21st 2013, 12:10pm

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!!!

9

Sunday, March 2nd 2014, 8:33am

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 *cry*


Gijs
360panoramafoto

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

10

Sunday, March 2nd 2014, 8:57am

Hi!
did you saw this Social share
Or, it's not that you looking for?

Andrey
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

11

Sunday, March 2nd 2014, 9:05am

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 www.osijek360.com .

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

12

Sunday, March 2nd 2014, 10:05am

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 *thumbsup*

13

Sunday, March 2nd 2014, 2:01pm

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/k…s_01032014.html
ik heb mijn hobby sinds kort weer opgepakt. Kwaliteit kan je over twisten *thumbup* 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


Source code

1
2
3
4
5
6
<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>

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

14

Sunday, March 2nd 2014, 4:56pm

guys, please don't force us to use google translator to follow your posts *cry*

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

15

Sunday, March 2nd 2014, 10:32pm

ah, ok, mi ćemo i dalje na engleskom jeziku.
*g*

Tuur *thumbsup*

Arsdezi

Intermediate

Posts: 174

Location: Ukraine

  • Send private message

16

Monday, March 3rd 2014, 12:53am

Туур! прошу вас не знущатися!
Дякую))) *tongue*

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

17

Monday, March 3rd 2014, 11:37pm

*thumbsup* *w00t*

KatColl

Beginner

Posts: 12

Location: FRANCE

  • Send private message

18

Monday, May 3rd 2021, 4:33pm

How to add an image to the sharing of a pano on social networks ?

Hi !


To add an image to the sharing of a pano on social networks. In the html
page, I added:

<meta name = "image" content = "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 ?

Similar threads