X3 panel help wrote:Toolbar Items
The toolbar items are intended for social sharing, but can also be used for custom links or custom content opened in the X3 popup window. Select items to display, create new items, or change the order. You can set your own labels, colors and icons from Font-Awesome.
JSON Configuration
The items configuration is a JSON object, and must be syntactically correct. If you get a red warning in the left margin, it means there is something wrong and the config will be corrupted. Be sure to wrap all "keys" and "values" inside double-quotes, and all items (except the last), should be followed by a comma.
Item
"id" : "facebook"
ID is just an identifier for the item, and has no function except for some special built-in items like the main share button, email, comments and download. ID must always be populated.
"icon" : "facebook"
Select any icon to use from Font-Awesome.
"label" : "Share on Facebook"
The text to display on item mouse hover, in the overlay-popup and in the X3 popup.
"url" : "
https://www.facebook.com/sharer/sharer. ... Burl%7D%7D"
URL for the item. Can be a social sharing endpoint, which requires using one or more of the sharing variables %7B%7Burl%7D%7D %7B%7Btext%7D%7D, or can be a plain link to another web page or a popup.
"color" : "#3b5998"
Set the color for the icon. This setting is not required for the default items already included, as they are hardcoded into the X3 stylesheet. Only use this for new links and services, or if you want to override a color.
"display" : "page|overlay|popup"
Optional setting to only show the item in one or more modes: page, overlay or popup. Useful for creating items that only display in specific modes. Ignore this setting, or leave empty if you want the item to display in all modes. You can add multiple items: for example display:'page|overlay' will the popup.
"target" : "window"
Sets the target for the item click. By default, target is set to 'window', which opens a plain browser popup window, necessary for sharing services. However, you can open custom links or even custom content directly in the beautiful native X3 popup window. Additionally, you can simply open links in _blank or _self browser window.
"content" : "<h2>Lorem Ipsum</h2><p>Pellentesque euismod.</p>"
Instead of assigning an URL, you can add content directly in the items content setting. This setting forces target:'popup', and will display the data from content directly in the popup window.
"popup_class" : "some-custom-class"
Custom wrapper class for the native X3 popup window when using target:'popup'. This is an advanced setting for those who want to assign a custom CSS class to style your own content inside the native X3 popup window.
Share URL Variables
If you are adding a new sharing service link, you will first need to locate the specific services endpoint. After slight modification, you can then add the sharing endpoint to your items URL setting.
{{url}} - Encoded url to current page
{{text}} - Title of page
{{description}} - Description of page
{{image_url}} - Encoded image url
{{raw_image_url}} - Raw image url
{{path}} - Relative path to current folder
{{file_name}} - File name without extension
{{file_name_ext}} - File name with extension
For example, Twitter's sharing endpoint looks like this:
https://twitter.com/intent/tweet?text=T ... L_TO_SHARE
Therefore, the URL to be added for the twitter item should look like this:
url:"
https://twitter.com/intent/tweet?text={ ... &url={{url}}"