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
Note: This tutorial shows how to modify an existing Marzipano Virtual Tour not how to create the original tour.
The finished project is embedded below using an iFrame but it can also be viewed at tonyredhead.photography/360/Tutorials/Marzipano/SocialButtons
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.
2. Copy the buttons from the SocialFiles/Buttons folder to the app-files/img folder of your Marzipano Virtual Tour 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.
5. Open index.html and scroll down to the last line of the block of code defining the ControlButtons.
6. Paste the 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
11. Open the style.css file and scroll down to the section under the comment /*Center is at margin-left: -20px */
12. Paste the style-css-snippet into the style.css document after the last .viewControlButton-6 entry
13. In order to center all of the buttons change the .viewControlButton-1, -6 offsets to; 105, 55, -45, 5, 155 and 205px
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!