novosibpano@yandex.ru  

Setting social media buttons in 3D tour.



Social media buttons.


Now, on almost every site, you can see the buttons of the social networks "share". This is an additional means of attracting the target audience.
Without leaving the site you can share information in social. networks and a 3D tour is no exception. I want to show the option of setting buttons in a virtual tour.
On the Internet, you can find resources that provide buttons to the social networks. As a rule, these are designers, with the help of which a block of buttons with a choice of design is generated, code is generated, which should be placed inside the HTML page.




Preparing Buttons.


For an example I'll use the constructor from "pluso" It is not difficult to understand, all changes are immediately displayed in the preview window. Below there is a window in which the code for insertion on a site is deduced, It consists of two parts - a script and a block with buttons. Copy all the code to the clipboard for subsequent insertion.




Edit the code in the file tour.html.

A virtual tour is a block enclosed in the "div" tag and occupies 100% of the screen. The buttons of social networks are also a "div" block and the meaning is that the button block is placed in the foreground, and the virtual tour is in the background.Для этого воспользуемся кодом позиционирования "z-index".
Open the file tour.html and add the inside of the existing "style" tag as described in the table below.



 	<style>
		.
		.
		  
		#pano {
			position: absolute; 
		} 
		#social {
			position: relative; 
		} 
		
		#pano { z-index: 1; }
		#social { z-index: 2; }  
	</style>
	

This code assigns an index (id = "pano") to index 1, social network buttons (id = "social") - index 2, but we'll write the button id later.

Now we paste the earlier copied button code inside the "body" tag in the file tour.html
The block of buttons is enclosed in the "div" tag, we will add id = "social" inside it and the style in which we will specify the location on the screen, it looks like this:
style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;"
As a result, we get about the same code as below in the table:



 <body>
	.
	.
	.
	<script type="text/javascript">(function() 
		.
		.
		.
	</script>
  <div id="social" class="pluso" data-background="transparent" data-options="medium,round,line,horizontal,counter,theme=07"
      data-services="vkontakte,facebook,twitter,odnoklassniki" 
      style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;">
  </div>
</body>
	

We start the tour and look at the result.


Result

YouTube