In this tutorial we are going to add 4 Social Media share buttons, Email, Facebook, Google+ and Twitter, to a Virtual Tour created using the Marizpano Tool available on the Marzipano Web Site
Marzipano Tool
Note: This tutorial shows how to modify an existing Marzipano Virtual Tour not how to create the original tour.
Finished Project
The finished project is embedded below using an iFrame but it can also be viewed at https://tonyredhead.photography/360/TUTORIALS/Marzipano/socialbuttons/index.html
Getting Started
Download the Social Media files here. The zip file contains two folder, Buttons, containing 15 popular sharing icons, and Code Snippet, containing the additional code required to display the buttons on the virtual tour.
Adding in the Buttons
1. Open your Marzipano Tour and preview it in a browser using either the webserver-macos or webserver-windows.exe applications. It should look something like the screenshot below.
Basic Virtual Tour showing standard buttons and link
2. Copy the buttons from the SocialFiles/Buttons folder to the app-files/img folder of your Marzipano Virtual Tour folder
File structure of the Marzipano Virtual Tour output showing buttons in img folder
3. Open the app-files/index.html file in a text editor. In this case I'm using TextWrangler for the Mac
4. Open the index-html-snippet.txt file from the SocialFiles/Code Snippet folder in the text editor, select all and copy the code.
Copy the index-html-snippet
5. Open index.html and scroll down to the last line of the block of code defining the ControlButtons.
Insertion point for the index-html-snippet
6. Paste the index-html-snippet into the index.html document
Paste index-html-snippet into the index.html document
7. Update the index-html-snippet code to reflect the content you want to share via the buttons by replacing the 'YourURLHere', YourTextHere', 'YourTagHere', 'YourSubjectHere' and 'YourBodyContentHere' placeholders.
8. Save and close index.html and close index-html-snippet.txt
9. Open the app-files/style.css file into the text editor
10. Open the style-css-snippet.txt into the text editor, select all and copy the code
Copy the style-css-snippet
11. Open the style.css file and scroll down to the section under the comment /*Center is at margin-left: -20px */
Insertion point for style-css-snippet
12. Paste the style-css-snippet into the style.css document after the last .viewControlButton-6 entry
Paste style-css-snippet into the style.css document
13. In order to center all of the buttons change the .viewControlButton-1, -6 offsets to; 105, 55, -45, 5, 155 and 205px
Update offsets to center all of the buttons
14. Save and close style.css and close style-css-snippet.txt and that's it you are finished
15. Go back to the original window displaying the basic tour and refresh the browser, the new buttons will be displayed to the left of the Control Buttons and all of the buttons will be centered
Thanks to Robert Artola for his support and checking my css!
