Add more share buttons to your toolbar

by Ange Tuteur Fri 25 Sep - 13:37

Add more share buttons to your toolbar

This tutorial will teach you how to manage what buttons display in the Share section of your Forumotion toolbar.

You'll learn how to create your own buttons, remove existing ones, and more in this tutorial.. Smile

Quick Navigation :

1. Installing the JavaScript

To get started you need to install a small script that will be used to manage your share buttons. Go to your Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Share Button Manager
Placement : In all the pages

Code:: $(function() { var share = { text : _lang.Share, buttons : { /* DEFAULT SHARE BUTTONS */ fb : { enable : true, title : 'Share on Facebook' }, twitter : { enable : true, title : 'Share on Twitter' }, gp : { enable : true, title : 'Share on Google Plus' }, mail : { enable : true, title : 'E-mail this page to someone' }, rss : { enable : true, title : 'View this forum\'s RSS feed' }, /* START CUSTOM SHARE BUTTONS */ /* extra share buttons */ pinterest : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/pinter10.png" />', title : 'Share on Pinterest', onclick : function(e) { var media = prompt('You\'re about to pin this page. Share an image ?'); if (media == null) return false; else if (media == '') media = $('meta[property="og:image"]').attr('content') || ''; window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + (media ? '&media=' + encodeURIComponent(media) : '') + '&description=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600'); e.preventDefault(); } }, tumblr : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/tumblr11.png" />', title : 'Share on Tumblr', onclick : function(e) { window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(window.location.href), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600'); e.preventDefault(); } }, reddit : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/reddit10.png" />', title : 'Share on Reddit', onclick : function(e) { window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600'); e.preventDefault(); } }, /* misc buttons */ print : { enable : false, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/print11.png" />', title : 'Print this page', onclick : function(e) { window.print(); e.preventDefault(); } }, copy_url : { enable : false, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/link10.png" />', title : 'Copy BBCode URL', onclick : function(e) { prompt('Copy the BBCode URL of this page ?', '[url=' + window.location.href + ']' + document.title + '[/url]'); e.preventDefault(); } }, top : { enable : false, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/top10.png" />', title : 'Top of the page', href : '#top' }, bottom : { enable : false, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/bottom11.png" />', title : 'Bottom of the page', href : '#bottom' } /* END CUSTOM SHARE BUTTONS*/ } }, newList = document.createElement('SPAN'), fa_share, fa_share_text, existingNode, newNode, i, k; $(function() { fa_share = document.getElementById('fa_share'); fa_share_text = document.getElementById('fa_share_text'); if (!fa_share) return; // apply new share text if (fa_share_text) fa_share_text.innerHTML = share.text + ' : '; // redefine share buttons for (i in share.buttons) { existingNode = document.getElementById('fa_' + i); // modify exisiting share buttons if (existingNode) { if (share.buttons[i].enable) { for (k in share.buttons[i]) if (k != 'enable') existingNode[k] = share.buttons[i][k]; newList.appendChild(existingNode); } else existingNode.parentNode.removeChild(existingNode); } // create a new share button else if (share.buttons[i].enable) { newNode = document.createElement('A'); newNode.id = 'fa_' + i; for (k in share.buttons[i]) if (k != 'enable') newNode[k] = share.buttons[i][k]; if (!newNode.href) newNode.href = '#'; newList.appendChild(newNode); } } fa_share.appendChild(newList); }); });

By default, this script will add 3 new share buttons ; Pinterest, Tumblr, and Reddit, as well as four extra buttons which are disabled. The script will also add tooltips to all the existing buttons. Wink

To learn how to manage these buttons, please read the next section. Smile

2. Managing your buttons

The general purpose of this script is to allow you full customization of the "Share" section on your toolbar. Such as adding new buttons, links, or completely changing the purpose of this area. Here, we will help teach you how to manage and create buttons.

Quick Navigation :

2.1. Changing the "Share" text

If you want to change the text displayed next to the buttons, you can edit the text property which should be at the very top of the script. It looks like this :

Code:: text : _lang.Share,

_lang.Share is the default language texts for "Share", and changes based on the language of the user. If you want to customize this to say something else, simply delete _lang.Share and replace it with a string, like below.

Code:: text : 'Buttons',

Then save your script and the new texts should be visible. Wink

2.2. Managing existing buttons

This section will go over how to manage existing buttons in this script. Such as enabling, disabling, and making small modifications. Firstly we'll go over how to enable and disable buttons.

The buttons use a boolean value to determine if they're enabled or disabled ;

true : The button is enabled
false : The button is disabled

Take the facebook button for example :

Code:: fb : { enable : true, title : 'Share on Facebook' },

You will notice that it contains an enable property. The button is currently enabled as you can see by value being "true", but switching this property to false will remove the button from the share section. Each button contains the enable property so you can easily turn buttons on and off like a light switch. Wink

Code:: enable : false, // the button is now disabled

Now that you know this, you should be able to disable buttons you don't want, and maybe enable some of the extra buttons included in this script.

Now, I'm sure you also noticed the title property on the facebook button :

Code:: title : 'Share on Facebook'

This adds a value to the button's title attribute. So when you hover over the button it will display "Share on Facebook". Any attribute that is usable in HTML can be applied here. Just make sure to separate each attribute:value pair by a comma.

For more on HTML attributes please see one of the following references :

2.3. Creating a new button

This section will walk you through creating a simple button that links to the newest topics on your forum.

Firstly, your button should begin with a name not yet used, a colon, and two curly brackets. Like the example below :

Code:: new_topics : { }

Note : If this button comes before another button, make sure to add a comma at the end of your last bracket.

Now that the basic layout is setup, you can begin adding properties to this button. Firstly you'll want to add the enable property and set the value to true so it displays on your toolbar.

Code:: new_topics : { enable : true }

Next you'll want to add some content to this button so it's visible. Add a comma after the value of enable, and write innerHTML, then a colon, and finally two single quotes :

Code:: new_topics : { enable : true, innerHTML : '' }

Between these quotes you can write plain text or HTML to format images and such. For this example, we'll be using an HTML image, but you can write whatever you like of course. Smile

Code:: new_topics : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />' }

Note : If you're using a single quote between the current single quotes, you will need to escape the one you just wrote like this : \' otherwise, the string will end early causing an error.

We're nearly finished, now that we've filled the button with content we just need to make it take us to another page when it's clicked. To do this, we need to add the href property. Like before, add a comma after the value of innerHTML, then write href, a colon, and two single quotes :

Code:: new_topics : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />', href : '' }

Do just like we did with innerHTML and place a link between the single quotes of href. Since we wanted this to link to the newest posts we're going to put the path of the search page ; /search?search_id=newposts

Code:: new_topics : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />', href : '/search?search_id=newposts' }

All that's left to do now is save, and your new button should be visible ! If you want, you can also add additional properties such as title to display a tooltip, or target to open the link in a new window. I'll leave an example of this below. Smile

Code:: new_topics : { enable : true, innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />', href : '/search?search_id=newposts', title : 'View posts since last visit', target : '_blank' }

If you have any questions about making a custom button, you can also ask us on the forum. Smile

2.4. Styling your buttons

This section will go over adjusting the style of your share buttons using CSS.
( Display > Colors > CSS stylesheet )

Styling the share buttons can be easy. If you didn't add a custom id for your button, one will be generated when it's created like this : fa_button_name. It will have the prefix "fa_" and then the name of your button. So, if we wanted to style the Pinterest button, our CSS rule would look like this :

Code:: #fa_pinterest { /* style properties.. */ }

Then all you need to do is write the style properties for the rule. You can use this to adjust the height, position, background, etc.. The default buttons use background images to display their icons, so if you want to do it that way you can use the CSS background-image property, like this :

Code:: #fa_pinterest { width:30px; height:30px; background-image:url('http://i21.servimg.com/u/f21/18/21/60/73/pinter10.png'); }

Be as creative as you like. thumleft

3. Default Buttons List

This section will list all the buttons included in this script, and their purpose. Most are enabled by default, whereas others are disabled. You can use this list to decide what you want on your toolbar.

Button Alias	Description
Default buttons
fb	The fb button allows you to share content on your forum to Facebook.
twitter	The twitter button allows you to share content on your forum to Twitter.
gp	The gp button allows you to share content on your forum to Google Plus.
mail	The mail button allows you to compose a new e-mail when you click it.
rss	The rss button allows you to view your forum's RSS feed.
Custom buttons
pinterest	The pinterest button allows you to share content on your forum to Pinterest.
tumblr	The tumblr button allows you to share content on your forum to Tumblr.
reddit	The reddit button allows you to share content on your forum to Reddit.
print	The print button allows you to print out the current page when you click it.
copy_url	The copy_url button allows you to copy the BBCode URL of the current page.
top	The top button allows you to quickly jump to the top of the page.
bottom	The bottom button allows you to quickly jump to the bottom of the page.