Usage & Installation How-To Guide
My goal for this page is to describe and demonstrate everything from the basics of installation, to some of the more advanced methods of implementation. I'll also cover the included features of the plugin options page, what they're for, and how to effectively use them.
Before we get started
For those of you who already know the basics of installing a plugin, you'll probably want to skip ahead to the next section now. Now for those of you who are not yet familiar with the manual plugin installation process, here is a checklist you will need to go through before getting started.
FTP information for your server
If you do not already have this information readily available, you will need to contact your hosting provider and ask them for your FTP login details before continuing.
A working FTP program
The latest stable version of the plugin
You really should keep your plugin up to date with the latest stable release so as to ensure that any and all bug fixes and new features are available to you as soon as possible.
You can download the latest stable version of the plugin (3.2.3.1) via the following link:
http://downloads.wordpress.org/plugin/sexybookmarks.3.2.3.1.zipAbout 5-10 minutes of spare time
This is purely speculative. If you are already somewhat familiar with manual installation then you will obviously not need nearly as long as someone who is trying it for the first time.
Now down to business
Unzip the plugin folder
I'm going to assume that you know how to unzip folders and move right along to the next step. However, one key point to notice in this step is that after unzipping the folder you should notice inside there will be another folder called sexybookmarks. This will be the actual plugin folder we work with from now on, not it's parent folder.
Connect to your server via FTP
Most FTP programs are quite similar in function, so connecting should be self explanatory. Generally you will need to enter your login details (ftp.hostname.com) - (yourpassword) - (special port number [usually not required])
Now that you're connected to your server via FTP, simply navigate to the location of your WordPress install and find the wp-content directory. Once you've located it, open it up and find the plugins directory. Now open this folder as this will be where we will be uploading the sexybookmarks folder you found in step one.
Drag n' Drop
Yes, it is that easy... The majority of quality FTP programs feature a simple drag and drop interface which allows you to drag folders from your desktop (or anywhere else for that matter) into the program for upload. So just drag the sexybookmarks folder into the plugins folder and allow it time to finish uploading all files.
Login to your dashboard
Simply go to yoursite.com/wp-admin and enter your login details. Once inside the dashboard, click on the "Plugins" link in the sidebar. This should bring up a list of all installed plugins on your site. Now find the SexyBookmarks plugin in that list and click on the "activate" link that should be somewhere within the description.
Pat yourself on the back
Yep, it really is that simple... You have just successfully installed SexyBookmarks on your WordPress site manually! Now all that's left is to adjust the settings and choose individual options, but that will be covered later in the "usage" area.
Ok, it's installed... Now what?
Many people have no trouble installing a plugin, but never quite fully understand how to adjust it's settings appropriately to accomplish what they want. So, this section will be dealing with just that. I'll explain how to use "manual mode" and how to configure the settings properly. I will also describe each of the functions available to you in the plugin options area.
Configuring the plugin
So once you've installed the plugin, you'll need to adjust your settings to acheive your desired outcome. This can be done by clicking on the SexyBookmarks link in the sidebar under the Settings tab. This is the plugin options page and will be referred to as such throughout the rest of these instructions.
Selecting your networks
Once you reach the plugin options page you will see a full range of options to choose from, most notably the ability to pick and choose which social bookmarking sites to include in your social bookmarking menu. Simply put a tick under each of the icons representing the sites that you would like to show up in your menu.
Additionally, you can also drag and drop the icons to rearrange them into the order you would like them to appear in the menu as well! This function was added by Norman post-v2.2.1 and was probably one of the most intuitive additions to the plugin thusfar!
Network dependent options
While selecting your desired networks, you may notice that there are sections of information appearing or disappearing in the box below the network selection area. These are network dependent options, and they are named that for a reason. They only apply if a particular network is selected. As of the writing of this guide there are only 3 sites that have network dependent options:
Twitter
Yahoo! Buzz
Twittley
Twitter options
The first option relating to Twitter is whether or not you want to save your Twitter username. Doing so will result in the plugin automatically inserting your username in a RT format when someone tweets your article via the plugin. This is not a requirement, and if left blank it will simply tweet the article without the reference to your username.
The second option is which URL shortening service to use when tweeting an article via the plugin. The plugin includes a wide variety of URL shortening services to choose from, and this option can be changed at any time. It is important to note that changing URL shortening services is not retroactive. This means that the service you choose later will only be in effect from that point on.
You can overcome this hurdle by choosing the "clear all short URLs" option. This will delete ALL short URL database entries made by the plugin. Then each of the posts on your site will be shortened using the new URL shortening service you selected. You will receive a warning message when you select this option to make sure that you meant to do so. Upon saving your settings, you will get an alert at the top of the page that tells you how many short URLs were deleted.
Yahoo! Buzz default options
If you're including Yahoo! Buzz in your bookmarking menu, you will want to select the general category which your blog falls into. The available categories are:
Entertainment
Lifestyle
Health
U.S. News
Business
Politics
Sci/Tech
World
Sports
Travel
You will also want to choose what your main content type is so that your article will be categorized properly when people submit it to Yahoo! Buzz via the plugin. The available formats are:
Text
Image
Audio
Video
Twittley default options
The first option for Twittley is the ability to choose a default broad range category that your articles will fall under. This can be changed at will by the user who is submitting your article via the plugin once they get to the Twittley submission form, so don't worry if you blog about things that don't always fall under that category.
The second option is probably one of the most important... The default tags that describe your articles. Keep in mind that this too is just like the default category and can be changed once the user gets to the Twittley submission form. Simply enter a list of generalized tags that describe most of the posts on your site and separate them with commas.
General functionality options
Now we're getting to the options that enhance the overall functionality of the plugin, but aren't dependent on any other options to work properly. As of writing this guide, there are two options to choose from... Whether or not to use rel="nofollow" and whether or not to open the links in a new browser window (target="_blank")
To follow, or not to follow...
If you select the option to use nofollowed links, the plugin will add rel="nofollow" to each of the links in the bookmarking menu. There has been much heated debate over the semi-recent changes that Google has made in regards to how it deals with the nofollow attribute lately, so I'm going to just throw my two cents in:
Google's own Matt Cutts said that they supposedly made this change over a year ago. He also stated that if you're using nofollow and haven't noticed a significant change, then the change they made probably doesn't affect you and the way in which you're using it.
So that being said, I have had no reports of major changes regarding links be followed that shouldn't as well as no reports of PR fluxes. So unless I get substantial reports of these things, I am going to continue to leave the nofollow option in the plugin.
New window or same window?
The plugin allows you to choose whether you would like the links to open in a new browser window or the current (parent) window. This is especially useful if you wish to keep the user on your site and not send them off to an already popular site such as Digg or Reddit, etc...
Originally this was done by using the "target" attribute with target="_blank", but that is deprecated and the function to choose a new window is no longer supported. So, I've cheated the system a bit and used the DOM and jQuery to add the attribute without really adding the attribute. That just means that the functionality still works, but now the links will validate.
Keep in mind though, that jQuery is javascript, so if anyone is browsing with javascript disabled the functionality will not work. This means that anyone browsing with javascript turned off will leave your site upon submitting one of your articles via the plugin.
Advanced functionality options
As of writing this guide, the plugin currently supports 4 advanced functionality options. You can choose to auto-center the bookmarks, auto-space the bookmarks, animate-expand the menu to accommodate more bookmarking sites, and style the DIV using your own CSS. Three of these options require javascript to be enabled to work.
Auto-centering the bookmarks
The plugin includes the option to auto-center the bookmarks by using javascript to measure the width of the container vs. the width of the bookmarking menu and adjust it's position accordingly. This is a feature that was requested quite a bit in the earlier stages of development. [requires javascript to be enabled]
Auto-spacing the bookmarks
The plugin now includes the option to auto-space the bookmarks by using javascript to measure the width of the container vs. the width of all icons included in the menu, then adjusts the spacing between each icon accordingly. This feature is mainly intended for those who do not use enough sites to completely fill the width of their post DIV. [requires javascript to be enabled]
Animate-expand the bookmarks
You can also choose to animate-expand the bookmarking menu to accommodate more bookmarking sites in the menu if you wish. Simply select the option and when the user hovers over the bookmarking menu, it will slide down to reveal any sites which won't fit in a single line on your page. [requires javascript to be enabled]
Using "Custom Mods"
SexyBookmarks allows you to "override" the CSS/JS that comes packaged with the plugin in exchange for using your own... Be advised that this is an ADVANCED option, and could quite easily break your plugin!
The way it works is that when you choose the "Use custom mods" option, the plugin will then (upon saving) create a new directory called "sexy-mods" in your wp-content directory. It will then save all of the images associated with the menu, as well as the CSS/JS associated with the menu into that directory.
You are then free to edit them however you wish and your changes will be reflected in the SexyBookmarks menu. This is useful for those who wish to use custom icons... Or for those who wish to write their own custom CSS styles that extend far beyond the scope of the "Custom CSS" textarea which was formerly included in the plugin.
*NOTE: BY USING THIS FEATURE, YOU MIGHT MISS OUT ON CSS/JS FIXES AS WELL AS THE ADDITION OF NEW SITES
Custom background image
This is the feature that gave the plugin it's name to begin with! If you wish to use a background image, put a tick in the box that asks if you want to use a background image. This will reveal several images for you to choose from. Simply select the image you want to be displayed with your menu and you're done!
If you are a designer or even somewhat artistically gifted, feel free to create one and email it to me: josh[at]sexybookmarks[dot]net. If your design is accepted and used in the plugin, I will personally pay you $5 via PayPal. So if you know what you're doing in Photoshop and you have a creative gene, make a cool background image for the plugin and I'll pay you! Keep in mind that the image doesn't have to say "sharing is caring" or "sharing is sexy", etc... You can make it say whatever you want, but please make sure that it does in fact pertain to "sharing" somehow...
Menu location settings
One of the greatest features that the plugin offers is the ability to choose not only the location of the bookmarking menu in relevance to the content, but also choosing whether the menu should be displayed on pages or posts. This is further expanded by offering the ability to disable the menu within RSS feeds.
Menu comes first
If you wish for your menu to be displayed above the content of your page or post, select the Above Content option. This will print your menu directly above the content but below the post/page titles.
Read first, share later
If you would rather the menu be displayed beneath the content of a post or page, select the second option: Below Content. This will ensure that the menu is printed immediately after any content on a page or post.
The infamous Manual Mode option
This is probably the most misunderstood function the plugin offers. This option is for those of you who wish to display the menu in areas other than above or below the content of a page or post.
When you select this option, the plugin will still remember all of the other settings you have chosen and apply them to the menu. However, you will have to manually insert a PHP function into your theme where you'd like the menu to be displayed. For instance, if you would like the menu to be displayed in your sidebar you would open up your theme's sidebar.php file and insert the following code wherever you want the menu to be displayed:
<?php if(function_exists('selfserv_sexy')) { selfserv_sexy(); } ?>
A good example of this option being put to use is the following link: http://itst.net/856-pong. That is Sascha Carlin's site, and he is the one who first introduced me to the idea of having an additional function to allow for insertion of the menu anywhere on your site rather than just hooking it to the built-in WordPress function: the_content().
You'll notice that he has the menu displayed inside a hidden DIV that can be displayed by clicking the "Share" button on the far left edge of the site rather than displaying it on individual pages/posts only. This is just an example of what you can do by using the manual function. However, if you are not confident in the fact that you know what you're doing when it comes to editing your theme files, I would strongly recommend that you stick with the automatic insertion methods.
What's a "shebang"?
So for those of you who don't understand my southern slang, shebang is the equivalent of "the works" or "everything". So in regards to the plugin and it being referenced there, it means to display the menu on all of the options listed in that box. Think of it as an "All of the above" answer in a multiple choice question.
Remove from feeds
The final option is the ability to hide the menu from your RSS or "feed" content. This is primarily due to the fact that it is almost impossible to load CSS styling into a RSS feed. The amount of work that it would take to get the styles into your feed (both on my part AND your part) would be tremendous and tedious, so for now we just have the ability to disable the menu in your feed content.
However, the framework is there so that possibly at a later date we can work on implementing an option that will still style the menu correctly even inside your RSS feeds. This is not a current priority, but it is an option for the future.
Disable SexyBookmarks on a post-by-post basis
You can now display/hide the SexyBookmarks menu on a post-by-post or page-by-page basis thanks to the use of custom fields. All you need to do to disable the menu from a particular post/page is add a custom field to that page with the KEY of Hide SexyBookmarks, and VALUE of True.
How to CHMOD your images/css directories
It seems that with every fancy new feature, there always seems to be a "downside" in terms of server setup and/or user understanding. The new Dynamic Sprite Generator feature is no exception to this rule. Many of you already understand how to make a directory writeable, but there are many of you who don't also.
This will hopefully give you at least a basic understanding of what you'll need to do in order to be able to use the Dynamic Sprite Generator feature. Just follow the instructions below and you should do just fine.
Connect to your server via FTP
Most FTP programs are quite similar in function, so connecting should be self explanatory. Generally you will need to enter your login details (ftp.hostname.com) - (yourpassword) - (special port number [usually not required])
Now that you're connected to your server via FTP, simply navigate to the location of your WordPress install and find the wp-content/plugins/sexybookmarks directory. Once you've located it, open it up and find the css and images directories. These are the two folders we need to change the permissions on.
Right click the CSS directory and select "File Permissions"
As I mentioned earlier, most FTP programs are very similar so even if you don't see those exact words in the context menu, you should see something similar to them. Simply choose that option instead.
Change the permissions to "755"
By changing the numbers in the box to "755" you will be allowing the server to write to that directory, which is necessary for the Dynamic Sprite Generator feature.
Repeat steps 2 & 3 for the "Images" folder
Simply follow those steps again but this time, apply the changes to the "images" folder. This directory also needs to be writeable in order to be able to use the Dynamic Sprite Generator feature.
Login to your dashboard and save changes again
Now that you've successfully CHMOD'd the css/images folders to 755, you'll need to login to your WordPress dashboard and go to Settings -> SexyBookmarks. Now simply scroll to the bottom and click "Save Changes" and the plugin should now generate a new image sprite based strictly on your selection of networks you wish to be displayed in the SexyBookmarks menu!
Additional info
If you are looking for information regarding error messages or how to solve some of the most common issues related to the plugin, please see the Frequently Asked Questions. Otherwise, if you have additional info that you feel should be included in this guide, feel free to email me directly and let me know: josh[at]sexybookmarks[dot]net
