Don't underestimate the power of social media and bookmarking! The ability for website users to share interesting pages, bookmark important links and chat about your products or services with others opens-up enormous opportunities to grow the prominence of your business or organisation. Successful businesses are leveraging the power of social networking and reaching new audiences. You certainly do not need to be registered on dozens of social networking platforms yourself to be part of the action, but giving your website users the ability to share or bookmark pages safely and easily is essential in any social media strategy.
Although many social networking platforms provide their own 'share this' buttons, a tradeoff with using these is that you're often pulling-in a lot of complicated code into your pages (which will slow things down significantly). Even a basic Facebook button can be tied to over 250 KB of backend code, which is just unacceptable. The article entitled The Hidden Cost of Social Sharing published on Sitepoint emphasises the problem of bloated social networking code. All these buttons for a myriad of different platforms also lack consistency and will undoubtedly cheapen the appearance of your website. ShareStack provides a real solution to these problems and this could be one of the most useful and reusable stacks you buy!
Simply drag and drop a ShareStack into your page. In the stack settings configure the style of the buttons and exactly which social networking platforms you want to display. Preview your page and publish it. It really couldn't be any easier! Now your website users will have beautifully clean and consistent social media buttons to click. A total of 18 popular social media and bookmarking services are supported in ShareStack. 5 empty placeholders provide scope to add a few custom buttons of your own. ShareStack can work on modern websites secured with an SSL certificate (https) and websites that are cached with services like CloudFlare.
ShareStack replaces the former Socializr and Sharable stacks by Aaron Marquez, of StackManiac. If you previously owned either of these stacks, you may be entitled to a free copy of the new ShareStack stack provided on this website. Straight out of the box, ShareStack has support for Baidu, Blogger, Delicious, Digg, Facebook, Google+, LinkedIn, LiveJournal, MySpace, Odnoklassniki, Pocket, Reddit, Renren, StumbleUpon, Tumblr, Twitter, Viadeo, VKontakte, Weibo, Xing, email and printing. Some of these social media platforms are exclusively for Chinese, French or Russian users, so there is scope here to 'internationalise' your website.
With ShareStack, simple checkbox options let you choose which sharing services to display. Each button automatically links to the corresponding service and sends the URL of the current page; meaning everything is self-contained within the stack and there are no dependancies on outside sharing services. A zero-based indexing system lets you change the order of the buttons (by default buttons are sorted alphabetically, with utility buttons at the end). ShareStack can display buttons within the normal page flow (as our example below does) or alternatively buttons can be appended as a horizontal or vertical bar onto the edge of the screen. Additionally ShareStack can be configured to permanently display or only display on page scroll or when the bottom of the webpage is reached.
ShareStack is an entry-level solution, intended for novice RapidWeaver users seeking to get a basic array of social networking buttons showing in a webpage. Our SocialPopup stack is more advanced and moves your icons off the page into an unobtrusive popup modal; which some users may deem more desirable. Also of note, SocialPopup has opensource markup; with no constraints on the number of supported services and button colouring.
Although many social networking platforms provide their own 'share this' buttons, a tradeoff with using these is that you're often pulling-in a lot of complicated code into your pages (which will slow things down significantly). Even a basic Facebook button can be tied to over 250 KB of backend code, which is just unacceptable. The article entitled The Hidden Cost of Social Sharing published on Sitepoint emphasises the problem of bloated social networking code. All these buttons for a myriad of different platforms also lack consistency and will undoubtedly cheapen the appearance of your website. ShareStack provides a real solution to these problems and this could be one of the most useful and reusable stacks you buy!
Simply drag and drop a ShareStack into your page. In the stack settings configure the style of the buttons and exactly which social networking platforms you want to display. Preview your page and publish it. It really couldn't be any easier! Now your website users will have beautifully clean and consistent social media buttons to click. A total of 18 popular social media and bookmarking services are supported in ShareStack. 5 empty placeholders provide scope to add a few custom buttons of your own. ShareStack can work on modern websites secured with an SSL certificate (https) and websites that are cached with services like CloudFlare.
ShareStack replaces the former Socializr and Sharable stacks by Aaron Marquez, of StackManiac. If you previously owned either of these stacks, you may be entitled to a free copy of the new ShareStack stack provided on this website. Straight out of the box, ShareStack has support for Baidu, Blogger, Delicious, Digg, Facebook, Google+, LinkedIn, LiveJournal, MySpace, Odnoklassniki, Pocket, Reddit, Renren, StumbleUpon, Tumblr, Twitter, Viadeo, VKontakte, Weibo, Xing, email and printing. Some of these social media platforms are exclusively for Chinese, French or Russian users, so there is scope here to 'internationalise' your website.
With ShareStack, simple checkbox options let you choose which sharing services to display. Each button automatically links to the corresponding service and sends the URL of the current page; meaning everything is self-contained within the stack and there are no dependancies on outside sharing services. A zero-based indexing system lets you change the order of the buttons (by default buttons are sorted alphabetically, with utility buttons at the end). ShareStack can display buttons within the normal page flow (as our example below does) or alternatively buttons can be appended as a horizontal or vertical bar onto the edge of the screen. Additionally ShareStack can be configured to permanently display or only display on page scroll or when the bottom of the webpage is reached.
ShareStack is an entry-level solution, intended for novice RapidWeaver users seeking to get a basic array of social networking buttons showing in a webpage. Our SocialPopup stack is more advanced and moves your icons off the page into an unobtrusive popup modal; which some users may deem more desirable. Also of note, SocialPopup has opensource markup; with no constraints on the number of supported services and button colouring.
Example
This is a working example of a ShareStack dragged and dropped into the page. In this example the default style settings and supported services were used. In other words, nothing in the stack settings was changed to achieve this responsive horizontal bar of social networking icons...If you're a member of one or more of the listed services, try clicking a button to share this webpage. We also provide a free demo version of ShareStack which you can download and install into RapidWeaver, using the button at the top of this page. ShareStack was used on many of the ThemeFlood theme product pages too, within the sidebars.
Where can ShareStack be used on a page?
The reality is that ShareStack can be used anywhere. Our quick example above just places it within the normal page flow. The obvious setup for a lot of people would be to place it towards the end of a page or article. Equally so you could embed it into a theme ExtraContent container; thereby displaying buttons in a sidebar or footer region. The positioning options available to 'glue' ShareStack to the edge of a page and have it fade-in on scroll or upon reaching the bottom of a webpage opens up more possibilities. Adding margin between the buttons and enabling rounded corners can reduce the 'bar' appearance of ShareStack. There will likely be instances where you perhaps only need to display a few buttons; like Facebook, GooglePlus, Twitter and Email.User privacy
ShareStack makes no use of any third-party services. This stack is completely safe to use in your websites and does not secretly load potentially invasive tracking code or cookies in your website. Social media services cannot use this stack as a method to snoop on your website users! It is only when a button is clicked (and the user navigates away from your website) that a third-party site or service may be able to monitor or collect data from the user.Setup
Follow these instructions for getting a ShareStack working in your webpage:- Once installed, drag and drop a ShareStack stack into your Stacks page
- In the stack settings (shown in edit mode) customise the style of the buttons, their position and which buttons to display
- Preview you page in RapidWeaver. Export or publish your completed page when done.
Note Most buttons only work when you publish your website. Sharing services need a link to a publicly accessible page, and therefore this will only be available when your website is published. Some services (like Google+) automatically fetch the browser title of the page and an extract of content.
Link helpers
If you're setting up buttons to share your webpage to services like Facebook, Twitter, LinkedIn or Google+, then these links ideally need to include the URL of the current webpage. Thereby ensuring that when a user comes to share your webpage on the platforms, the link is already in the 'share' box. Manually encoding links and setting up different links for individual pages would quickly become an extremely daunting and tedious task. This is where 'helpers' come in really useful, in automating much of this linking process for you.A helper replaces a standard link. So in the example of Twitter, you would replace this in your button markup:
<a href="http://twitter.com/twitter"></a>with the following:
<a href="#" class="twitterHelper">The button will still open to Twitter when clicked or tapped. But a key difference now is that some intervening Javascript is involved in the process. The link of the current webpage will already be inside the share box. We currently have support for 20 helpers; covering the following social media and bookmarking platforms:
| Social media or bookmarking service | Markup to use for sharing the current page (replaces the normal link) |
|---|---|
| Baidu | <a href="#" class="baiduHelper"></a> |
| Blogger | <a href="#" class="bloggerHelper"></a> |
| Delicious | <a href="#" class="deliciousHelper"></a> |
| Digg | <a href="#" class="diggHelper"></a> |
<a href="#" class="emailHelper"></a> |
|
<a href="#" class="facebookHelper"></a> |
|
| Google+ | <a href="#" class="googleplusHelper"></a> |
<a href="#" class="linkedinHelper"></a> |
|
| LiveJournal | <a href="#" class="livejournalHelper"></a> |
| MySpace | <a href="#" class="myspaceHelper"></a> |
<a href='javascript:window.print();'></a> |
|
<a href="#" class="redditHelper"></a> |
|
| Renren | <a href="#" class="renrenHelper"></a> |
| Stumbleupon | <a href="#" class="stumbleuponHelper"></a> |
<a href="#" class="twitterHelper"></a> |
|
| Tumblr | <a href="#" class="tumblrHelper"></a> |
| VKontakte | <a href="#" class="vkontakteHelper"></a> |
<a href="#" class="weiboHelper"></a> |
|
<a href="#" class="xingHelper"></a> |
Helpers are already setup and applied to your buttons when you install and use ShareStack for the first time. So if you're simply wanting to provide your website visitors with the ability to share your page link, then everything is already setup and ready to go! Please note that helpers only work when your website is published to a web server (they will not work in RapidWeaver preview or in an exported website being viewed from your computer).
By default, links to share the page link are opened in same window; to promote better website accessibility and user experience. If you really need to have links open in new tabs, this can be enabled in the stack settings.
with the address of your Twitter page instead:
For websites that use a mixture of different page types, the PlusKit plugin @import function may be best to use. You can setup ShareStack on its own hidden page; then import this page into other pages throughout your website. Please note that PlusKit is a separate plugin to be purchased from Loghound Software, and is not included in the ShareStack stack. PlusKit @import does not work on certain page types like Photo Albums or the RapidWeaver Blog.
By default, links to share the page link are opened in same window; to promote better website accessibility and user experience. If you really need to have links open in new tabs, this can be enabled in the stack settings.
Customising the button links
From the outset we built ShareStack with the ability for people to quickly share your webpages. However it is perfectly feasible to customise the links used and instead direct people to your social media accounts, on different platforms. This flexibility doubles the usefulness of ShareStack! When you enable and disable different services, you're see a input filed marked Link. Into this both you can replace the standard helper links (discussed above) with HTML hyperlinks to your desired social media platforms. Typically the URLs to use are identical to what you see in the address bar of your web browser. So for example, you can replace the Twitter helper:<a href="#" class="twitterHelper"></a>with the address of your Twitter page instead:
<a href="https://twitter.com/twitter"></a>Custom buttons
The option is provided to setup 5 custom buttons you own social media or bookmarking services. Within the stack settings you can assign a tooltip title, link, a Font Awesome icon, the background colour and the icon colour. If you need support for more custom buttons, consider using our SocialPopup stack instead.Icon ordering
By default, social media icons are ordered alphabetically; with utility buttons and custom buttons at the end. The Display Order box shown in the settings lets you modify the order icons are shown in, based on a zero-indexed numerical value. In other words, the higher the number assigned to an button, the higher up the list it will appear. For example, giving Twitter a display order value of 1 and Facebook a display order value of 2 would ensure Facebook has its button shown first in the list, followed by Twitter, and then other icons thereafter. Icon ordering is done via Javascript as the page loads, so therefore display ordering does not take effect in RapidWeaver edit mode.Custom CSS code
ShareStack was developed to include a healthy quantity of class and ID selector names, within the HTML markup. This provides scope to further-customise the style of the completed stack and recolour individual icons. Custom CSS code can either go in the RapidWeaver page inspector (in the custom CSS box) or you can open the theme contents and paste this code directly into the theme custom.css file, using your preferred CSS or code editor. If you choose to put the CSS code into the theme custom.css file, then this code will automatically get applied to all pages using this particular RapidWeaver theme.Responsive behaviour
ShareStack is a mobile-first developed addon, giving exceptional compatibility and support for a wide range of different web browsers and devices. Icons will always remain at the same size, so they don't become impossibly small, on smartphones and smaller tablet devices. Icons are floated left, so they will reflow vertically on smaller screens. The width of the container you place ShareStack into or the Width configured in the ShareStack setting governs how many icons will display on each row.Utility icons
Beyond the social networking and bookmarking icons, we also provide provision for email and print utility icons. As aptly named, the email button will email the link of the current page (using the default email software on a computer) and the print button will print the current webpage. The quality of the printout you get is determined by the theme and stacks being used in the page. Some RapidWeaver developers have always made a concentrated effort to improve print and PDF output in their addons wherever possible; others less so! Feedback about print or PDF output should be sent to the theme or stack developer. Please be aware that some devices (especially some smart phones and tablets) lack the ability to print pages.Print / PDF output
The ShareStack stack is hidden from print and PDF output; meaning that it will not show if the page is printed or saved as a PDF.Multiple ShareStacks on the same page
Should the need arise, it is feasible to have multiple ShareStacks on the same page, containing a different set of buttons. For example you could configure one ShareStack to be permanently displayed within some content on a webpage, and have a second ShareStack appear when a user reaches the bottom of a webpage.Including ShareStack on multiple website pages
For a website that makes use of the Stacks plugin on each page, partials introduced in Stacks 3 provides the easiest and quickest approach. ShareStack can be setup as a new partial and you can drag and drop that partial into each one of your pages (preferably towards the bottom). Should you need to edit ShareStack, the partial can be unlocked and modified accordingly.For websites that use a mixture of different page types, the PlusKit plugin @import function may be best to use. You can setup ShareStack on its own hidden page; then import this page into other pages throughout your website. Please note that PlusKit is a separate plugin to be purchased from Loghound Software, and is not included in the ShareStack stack. PlusKit @import does not work on certain page types like Photo Albums or the RapidWeaver Blog.
