Home
by Ange Tuteur September 25th 2015, 12:37 pm| 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..  Quick Navigation :
| |||||||||||||||||||||||||||||||||||||
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
- 2.2. Managing existing buttons
- 2.3. Creating a new button
- 2.4. Styling your buttons
2.1. Changing the "Share" textIf 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.
2.2. Managing existing buttonsThis 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.
- Code:
enable : false, // the button is now disabled
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 buttonThis 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 : {
}
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.
- Code:
new_topics : {
enable : true,
innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/new10.png" />'
}
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.
- 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.
2.4. Styling your buttonsThis 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.
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. |
| 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. |
| 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 | |
| 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. |
| The reddit button allows you to share content on your forum to Reddit. | |
| 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. |
This tutorial was written by Ange Tuteur. |
