Inline Sharing

Share
Adding a New Inline Placement
Adding Inline Code To Your Site
Set specific URL & Text to accompany your Share Bar

The Inline Sharing feature in Share gives you complete control over where your Share bar displays on your site by allowing you to embed Sumo generated code into your website's HTML.

Adding a New Inline Placement

Creating an Inline Share Bar Code Snippet

Customizing The Inline Bar

Name - This is where you set the name of this inline placement.
Show On Mobile - Toggle on or off the display of this inline placement on mobile devices (NOTE: Global Mobile settings will apply, if any).
Create Custom Bar - Enabling this will allow you to create a custom bar and override your global bar settings. If this is not enabled, Share will generate an inline bar that matches your global settings (NOTE: Inline Share bars do not obey Display Rules).
Orientation - Set the orientation for the inline placement. Choose between horizontal and vertical.
Float - Set the CSS float property for the inline placement. Choose between None, Left, and Right.

Adding a Custom Bar

Available Services - Choose from a list of services, then drag into Selected Services.
Selected Services - This is the list of services you choose to display on your site.
Services Shown - The maximum number of services on the bar. Choose up to 11 services.
Shares Label Background Color - The color you want the shares label background to be.
Size - How big you want the share icons to be.
Style - How the buttons will look. Choose between Square, Rounded, and Circle.
Padding -The amount of space (pixels) between buttons.
Buttons Background Color - The color you want the share buttons to be. Choose between Small, Medium, and Large.
Show Share Counts - Toggle on or off the display of share counts.
Show Total Share Counts - Toggle on or off the display of an aggregate total share count.
Horizontal Offset - Moves the share bar left (-) or right (+).
Vertical Offset - Moves the share bar up (-) or down (+).

Click on the Inline Sharing tab then click on Add Code.Enable Create Custom Bar

Adding Inline Code To Your Site

Open the folder where your website's files are located and find the file you wish to embed the inline code. Open that file in your favorite IDE (code editor). (NOTE: Your screen may look different)
Paste the Sumo code in the desired location within the desired file, then Save.
Congrats! You're done! Visit your site, and you should now be able to see your very own custom Share Bar. (In our case it's in the footer of the site, exactly where we expected it to be!)

Set specific URL & Text to accompany your Share Bar

While Share universally uses your Open Graph tags in order to determine what URL and Text(title) is applied when sharing, Inline Share is able to bypass this. You can, with inline share only, modify the URL and Text associated with its share.

1 - Set your URL.

By default your inline share will look similar to this:

<a data-sumome-share-id="f7f23864-3022-4e99-9ee0-45c020337a8f"></a>

To add a specific URL to be shared with this bar add the following data attribute:

data-sumome-share-url="set any URL you want"

Example:

<a data-sumome-share-id="f7f23864-3022-4e99-9ee0-45c020337a8f"data-sumome-share=url="http://any_url_i_want.com/"></a>

2 - Set your Text.

Similar to setting your URL, you can also define the text that is shared with it. To add specific text to be shared with your inline share bar add the following data attribute:

data-sumome-share-text="set any text you want"

Example:

<a data-sumome-share-id="f7f23864-3022-4e99-9ee0-45c020337a8f"data-sumome-share=text="Sumo is the Best!"></a>