Stacks4Stacks

Many of us want to provide the ability for website visitors to easily share or bookmark pages. Simply because it increases the chances of a person revisiting at a later time and also promotes a website or business to a far wider audience. However many of us don't want to loose vast amounts of webpage 'real estate' to accommodate buttons for an ever-growing array of different social media and bookmarking services. Ordinarily, many button sets for social media can be ugly, limited in customisability and pull-in lots of unnecessary code from other websites. Some third-party 'share this' services also engage in highly questionable visitor tracking; which can give rise to privacy concerns.

SocialPopup provides the ideal solution for RapidWeaver users wanting to make their webpages instantly more sharable and bookmark friendly! It starts with a simple, unobtrusive 'share' button; which is fully customisable and can be placed anywhere on a webpage. By default, the button fades into view when the page is scrolled down. Clicking or tapping the button reveals a beautiful full-screen modal window, with many options for people to share or bookmark the current page link on their favourite platforms.

The popup approach offered by SocialPopup keeps all the clutter of social media and bookmarking icons out of your pages. While at the same time you gain a simple, safe and efficient method for people to bookmark or share a page link. So it's very much a win-win solution for all. SocialPopup can be used on secure websites (protected with an SSL certificate) and CDN providers like CloudFlare. A lack of graphics used by this stack means pages will continue to load lightning-fast. Icons are generated with Font Awesome icons, and are therefore retina-display compatible.

SocialPopup replaces the former Socializr and Sharable stacks by Aaron Marquez, of StackManiac. SocialPopup replicates all the functionality previously provided in Socializr and Sharable stacks; with many additional features and major improvements.

Example

Click the button below. This example is using the SocialPopup stack being called with a custom button (documented below). All the other customisable settings were left as the default. We are displaying the full array of social media and bookmarking services that SocialPopup installs with.
 

 

User privacy

SocialPopup 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 SocialPopup stack working in your webpage:

1. Once installed, drag and drop a SocialPopup stack into your Stacks page
2. In the stack settings (shown in edit mode) you can optionally customise the style of the trigger button and the modal window
3. Double-click the icons shown in Stacks edit mode. This is where you edit the markup for your buttons. The markup might look scary, but is incredibly simple and is documented below. Add, edit or delete buttons accordingly.
4. Preview you page in RapidWeaver. Click the trigger button to make sure the SocialPopup stack works. Export or publish your completed page when done.

Button markup

Traditionally, many existing social media stacks for RapidWeaver have employed systems of checkboxes to enable or disable different services. A major inconvenience of this system is the inability to re-order social networking icons, customise their design or apply special links. All too often, you are restricted to only being able to use the same dozen or so buttons in the order dictated by the original developer. With SocialPopup, we've decided to approach the setup entirely differently and 'opensource' the button markup. This gives you the complete, unmatched freedom to create as many icons as you want, to any services, unlimited icon styling options and present them in your preferred order.

The button markup is extremely simple. Even if you're a novice RapidWeaver user with zero coding experience you should have no problems whatsoever! To edit the buttons, you just double-click on them in Stacks edit mode. Each individual button is formed of the following chunk of code:

<div>
	<i class='fa fa-apple' style='background: #FFFFFF; color: #999999'>
	<a href='http://apple.com'></a>
	Apple
</div>

You can possibly already start to see patterns emerging in this markup. The first and last (opening and closing) tags denote the divisional container:

<div>

</div>

A divisional container is just a box with content inside (in this instance, each one of our buttons). Within the divisional container, the first tag encountered is the icon:

<i class='fa fa-apple' style='background: #FFFFFF; color: #999999'></i>

To use Font Awesome icons, navigate to the official website and click on the Icons link, at the top of the page. This page provides examples of each icon design. Clicking on an icon design gives you the markup. And this is the markup our icons in SocialPopup are based upon. We use Font Awesome icons; because there are now close-to 600 icon designs available. The icons behave like text, ensuring they can be restyled and recoloured quickly.

Within the opening Font Awesome tag, we use inline CSS of style='background: #FFFFFF; color: #999999' to define the icon background and icon colour (note the Americanised spelling of 'color' instead of 'colour'). Colours for the icon background and icon colour are specified in hexadecimal format. There are many tools and apps available that can help you 'pick' colours and get their hexadecimal colour value. By using hexadecimal colour values, we're guaranteed that everyone will see the same colour. At this stage the resulting markup will look like this:

<div>
	<i class='fa fa-apple' style='background: #FFFFFF; color: #999999'></i>
</div>

The next stage is the link for the icon. A benefit of using SocialPopup is that the link can be anything you want. You can either link directly to your personal profiles on services like Twitter, Facebook or LinkedIn. Alternatively you can setup the link so that people can share or bookmark your page instead (and it gets saved to their account). Links are automatically stretched to fill the icon container; overlaying your icon and label text.

<div>
	<i class='fa fa-apple' style='background: #FFFFFF; color: #999999'></i>
	<a href='http://apple.com'></a>
</div>

With the icon and the link setup (as shown above) the final step is to add a text label, which shows the title of the social media or bookmarking service. These text labels are optional, but strongly recommended. Not everybody is familiar with the logo images of different social media and bookmarking services. So providing a text label gives a better visual clue. This just goes inside the divisional container, and you can put it above or below your icon:

<div>
	<i class='fa fa-apple' style='background: #FFFFFF; color: #999999'></i>
	<a href='http://apple.com'></a>
	Apple
</div>

That is all there is to it! You can now go-ahead and delete surplus icons you do not need, add additional icons and change the order of icons. The introductory video to SocialPopup provides a complete overview of the stack setup. Please get in contact if you have further questions about the markup.

Tip You can copy the HTML markup out of SocialPopup and paste it into a code editor (like Espresso, Coda, Sublime Text or TextWrangler) for easier editing and previewing. The completed HTML markup can be copied and pasted back into the SocialPopup stack. This is another key advantage of our 'opensource' approach in this stack. Please note that bugs in RapidWeaver 5 / Stacks 2.5 may prevent you from fully-viewing the HTML placeholder in SocialPopup - so resizing your RapidWeaver window in edit mode or copying and pasting the markup between an external code editor (as discussed above) will provide a workaround.

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="#" id="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:
 

Helpers are already setup and applied to selected icons when you install and use SocialPopup 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.

Custom trigger buttons

You don't have to use the default 'floating' button style built into SocialPopup. The SocialPopup modal window containing your icons can also be triggered by a custom link or button in your page, styled and coloured however you desire. This is the sample HTML markup for a link:

<a href="#" class="socialPopupTrigger" data-modal="socialPopup-1">Click me!</a>

and this is the sample HTML markup for a button:

<button class="socialPopupTrigger" data-modal="socialPopup-1">Click me!</button>

Both code examples have a class attribute of class="socialPopupTrigger" and a data attribute of data-modal="socialPopup-1", both of which are essential to the function of the button. The number in the data attribute needs to match the Unique ID setting, in the advanced settings (thereby ensuring the correct SocialPopup modal window is triggered, if multiple are present on the same webpage). Custom buttons must always be placed before your SocialPopup stacks in the page flow. In most instances it is wise to place your SocialPopup stacks right at the bottom of pages.

You can use stacks like ButtonMaker to generate highly attractive custom buttons to launch your SocialPopup with. If using the link dialogue window in RapidWeaver to configure your custom triggers, then the custom attributes to use would look like those in the below screenshot.

Responsive behaviour

SocialPopup is a mobile-first developed addon, giving exceptional compatibility and support for a wide range of different web browsers and devices. The toggle button can be displayed in any corner of your page or you can create a custom button (documented above) to trigger the modal window. Within the modal window, your social networking and bookmaking icons will be displayed in a responsive grid, from left to right. If there is not enough room to display all the icons, the list will scroll vertically. An optional 'glowing' effect at the bottom of the modal helps denote that scrolling is available (as a substitute for scroll bars that many web browsers now forego).

Utility icons

Beyond the social networking and bookmarking icons, we also provide provision for some bonus utility icons. These icons can perform additional tasks like printing a page, emailing the page, providing a downloadable file, subscribing to a blog RSS feed, navigation to a popular website page or another task like a login button. Again these icons can be added, edited or delated as required.

Print / PDF output

The SocialPopup stack is hidden from print and PDF output; meaning that it will not show if the page is printed or saved as a PDF. SocialPopup contains an optional utility button to 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.

Multiple SocialPopup stacks on the same page

Should the need arise, it is feasible to have multiple SocialPopup stacks on the same page, containing a different set of icons or other content. Care needs to be taken that each SocialPopup stack has a Unique ID (number) set in the Advanced Settings (to prevent conflicts). You would also need to ensure the trigger buttons don't overlap or conflict with each other. Using custom trigger buttons might be recommended for each SocialPopup stack used in the page.

Including SocialPopup 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. SocialPopup 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 SocialPopup, 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 SocialPopup 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 SocialPopup stack. PlusKit @import does not work on certain page types like Photo Albums or the RapidWeaver Blog.