Adding Social Media Buttons to a Marzipano Tour

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 tonyredhead.photography/360/Tutorials/Marzipano/SocialButtons

 

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

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!

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia