Create your own Symbaloo Share button

Create your own easy-to-use Symbaloo Share button, making it very easy for your visitors to share your content on Symbaloo! Just follow the steps below to generate the code for your own Symbaloo Share button.

Your personal generated HTML Code

This is your generated HTML code that you can use in your own website to display the Share button. Copy and past the snippet into the HTML of the destination website. For a full code example, see below.

<script async="" src="//share.symbaloo.com/share.js"></script>
<ins class="symbalooShare" data-label="true"></ins>

Example of Share Button

Settings

Setting HTML Attribute Description Default
url data-url The full URL of the page that will be shared Current URL (document.location.href)
title data-title The title for the Symbaloo tile Title of the current page
icon data-icon Image for the Symbaloo tile Favicon of the current page
label data-label If true, the provided title will show on the tile true
small data-small If true the displayed button will be a 40px*40px button. If false, the button dimensions will be 160px*40px false

Full code example with 1 button

<!doctype html>
<html>
<head>
    <title>Your website</title>
</head>
<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla profecto est, quin suam vim
        retineat a primo ad extremum. Nam quibus rebus efficiuntur voluptates, eae non sunt in
        potestate sapientis.</p>
        <!-- Symbaloo Share button with data-attributes -->
        <ins class="symbalooShare"
            data-label="true"
            data-icon="http://www.example.com/image.png"
            data-url="http://www.example.com/article1">
    </div>

    <!-- Load the script at the end of your HTML, just before closing BODY-tag -->
    <script src="//share.symbaloo.com/share.js" async></script>
</body>
</html>

Full code example with multiple buttons

<!doctype html>
<html>
<head>
    <title>Your website</title>

    <!-- Setup the configuration in your HEAD-tag for default values for all buttons -->
    <script>
    var _symAddConfig = {
        "label": true,
        "icon": "http://www.example.com/image.png"
    };
    </script>
</head>
<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla profecto est, quin suam vim
        retineat a primo ad extremum. Nam quibus rebus efficiuntur voluptates, eae non sunt in
        potestate sapientis.</p>
        <!-- First Symbaloo Share button with specified URL -->
        <ins class="symbalooShare" data-url="http://www.example.com/article1">
    </div>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla profecto est, quin suam vim
        retineat a primo ad extremum. Nam quibus rebus efficiuntur voluptates, eae non sunt in
        potestate sapientis.</p>
        <!-- Second Symbaloo Share button with different URL -->
        <ins class="symbalooShare" data-url="http://www.example.com/article2">
    </div>

    <!-- Load the script at the end of your HTML, just before closing BODY-tag -->
    <script src="//share.symbaloo.com/share.js" async></script>
</body>
</html>