Social Sharing Toolbar – Zmags Publicator Community

Social Sharing Toolbar
Live Demo
How do I use this code?
Sections to Edit
Add Additional Social Networking Buttons to the Toolbar (Advanced)

The following example uses the Zmags Embedded Viewer API. It assumes that readers have general knowledge of embedding the viewer already. If this is not the case, feel free to click the link above for more information.

Social Sharing Toolbar

While the Zmags Viewer already has social sharing functionality, you may wish to use something a bit more customizable in terms of appearance. Using an embedded viewer page, it is possible to overlay an HTML / Javascript toolbar which looks any way you would like. The following tutorial details how to create such a toolbar in one of several different styles, using CSS that is intended to match the VERGE viewer.

Live Demo

Click here to view the example in action!
Click here to download the example code.

User-added image

How do I use this code?

1) First, download the example code above.

2) Open the index.html file using a plain text editor, such as Notepad++ or TextWrangler.

3) There are three toolbar styles featured in this code: Vertical, Horizontal, and Box Horizontal. Choose the one you like best, and entirely delete the code blocks for the other two.

4) Using the "Sections to Edit" (see next part of this tutorial), edit the sections of the file that appear in red text or containing the zmags URL or tinyURL" - Save the file.

- meta property="og:image": Change this to a full URL path pointing to the image you would like to use when your page is 'liked' on Facebook.

- title: Choose a page title to display in the browser title bar, and on Twitter.

- PUB_ID: Enter your publication ID, which can be found by clicking on the name of your publication in the "All Publications" list of the Zmags Publicator.

- style: These properties determine the size and positioning of the item they are attached to. Use these to size and position your viewer and social sharing bar as desired.

- Email Share Button: The first red text is the email title. The second is the URL to link to. Use %20 instead of space and %3A instead of colon.

- Facebok 'Like' Button: Specify the URL to link to when the page is 'liked' on Facebook.

- Twitter 'Tweet' Button: Specify the URL to link to when the page is 'tweeted' on Twitter. It is suggested that you use a URL shortening service such as Tinyurl.com or Bitly, so as not to run afoul of Twitter's stringent character limit.

5) Rename the folder if you would like, and then upload the entire thing to your website. Browse to it using a web browser of your choosing.

Sections to Edit

<!DOCTYPE html>
<html>
<head>
<meta property="og:image" content="http://supportdk.zmags.com/CommunityPortal/examples/social_sharing/images/zmags_logo_sq.png"/>
<title>Social Sharing Demo</title>
<style type="text/css">
    .verge_overlay{
        position:fixed;
        background:black;
        background:rgba(0,0,0,0.6);
        color:white;
        -moz-border-radius:20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        border-radius:20px;
        padding:10px;
        z-index:1;
    }
    .verge_overlay a{
        color:white;
        text-decoration:none;
        font-size:small;
    }
    .verge_overlay br{line-height:3px;}
</style>
<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
<script>
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();
</script>
</head>
<body>

<div id="myViewerContent" style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>

<!-- Vertical Sharing Toolbar -->
<div id="social" class="verge_overlay" style="bottom:50px; right:-21px; height:63px; width:108px;">
    <!-- Email Share Button -->
    <a href="mailto:?Subject=Zmags%20HTML5%20Showcase&Body=Hey%2C%20take%20a%20look%20at%20this%20cool%20site%20I%20found%21%0Ahttp%3A//supportdk.zmags.com/CommunityPortal/examples/social_sharing/"><img src="./images/email_share.png" style="border:0;"></a>
    <br>
    <!-- Facebook 'Like' Button -->
    <div style="position:absolute; top:32px; left:10px; height:19px; overflow:hidden;"><div id="fb-root"></div>
    <script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://supportdk.zmags.com/CommunityPortal/examples/social_sharing/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></div>
    <br>
    <!-- Twitter 'Tweet' Button -->
    <div style="position:absolute; top:53px;"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tinyurl.com/aucdvjx" data-dnt="true">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<!-- Horizontal Sharing Toolbar -->
<div id="social2" class="verge_overlay" style="bottom:5px; right:-21px; height:20px; width:254px;">
    <!-- Email Share Button -->
    <a href="mailto:?Subject=Zmags%20HTML5%20Showcase&Body=Hey%2C%20take%20a%20look%20at%20this%20cool%20site%20I%20found%21%0Ahttp%3A//supportdk.zmags.com/CommunityPortal/examples/social_sharing/"><img src="./images/email_share.png" style="border:0;"></a>
    <br>
    <!-- Facebook 'Like' Button -->
    <div style="position:absolute; top:11px; left:73px; height:19px; overflow:hidden;"><div id="fb-root"></div>
    <script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://supportdk.zmags.com/CommunityPortal/examples/social_sharing/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></div>
    <br>
    <!-- Twitter 'Tweet' Button -->
    <div style="position:absolute; top:10px; left:157px;"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tinyurl.com/aucdvjx" data-dnt="true">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<!-- Box Buttons Horizontal -->
<div id="social3" class="verge_overlay" style="bottom:138px; right:-21px; height:61px; width:172px;">
    <!-- Email Share Button -->
    <a href="mailto:?Subject=Zmags%20HTML5%20Showcase&Body=Hey%2C%20take%20a%20look%20at%20this%20cool%20site%20I%20found%21%0Ahttp%3A//supportdk.zmags.com/CommunityPortal/examples/social_sharing/"><img src="./images/email_share_sq.png" style="border:0;"></a>
    <br>
    <!-- Facebook 'Like' Button -->
    <div style="position:absolute; top:11px; left:59px; height:61px; overflow:hidden;"><div id="fb-root"></div>
    <script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://supportdk.zmags.com/CommunityPortal/examples/social_sharing/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div></div>
    <br>
    <!-- Twitter 'Tweet' Button -->
    <div style="position:absolute; top:10px; left:108px;"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tinyurl.com/aucdvjx" data-dnt="true" data-count="vertical">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

</body>
</html>

Add Additional Social Networking Buttons to the Toolbar (Advanced)

If you know how to add a social network sharing button to a webpage, you can apply the same knowledge to adding onto the Social Toolbar in this example. Simply add your additional button's code at the end of the toolbar's DIV, before the ending </div> tag. To make room for the new button, it will be neccesary to increase either the height or the width of the toolbar in its style.

You may need to wrap your button's code in a DIV and use CSS styles to fine tune the positioning a bit, as is done with the Facebook and Twitter buttons already:

<div style="position:absolute; top:11px; left:59px; height:61px; overflow:hidden;">
<!-- Other Facebook code here. -->
</div>

Related articles