Shareaholic for WordPress // Usage & Installation
Our goal for this page is to describe and demonstrate everything from the basics of installation, to some of the more advanced methods of implementation. we'll also cover the included features of the plugin options page, what they're for, and how to effectively use them.
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.
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.
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.
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.
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.
Yep, it really is that simple... You have just successfully installed Shareaholic 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.
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. We'll explain how to use "manual mode" and how to configure the settings properly. We will also describe each of the functions available to you in the plugin options area.
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.
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!
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:
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.
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.
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")
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 we're going to just throw our 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, we have had no reports of major changes regarding links be followed that shouldn't as well as no reports of PR fluxes. So unless we get substantial reports of these things, we are going to continue to leave the nofollow option in the plugin.
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.
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.
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]
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]
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]
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.
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 us: support[at]shareaholic[dot]com. If your design is accepted and used in the plugin, we 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 we'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...
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.
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.
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.
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_shareaholic')) { selfserv_shareaholic(); } ?>
However, if you are not confident in the fact that you know what you're doing when it comes to editing your theme files, we would strongly recommend that you stick with the automatic insertion methods.
So for those of you who don't understand 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.
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 our 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.
You can hide the SexyBookmarks sharing features on a post-by-post or page-by-page basis by checking the "Disable SexyBookmarks Buttons on this page." checkbox on the "Edit Post" page.
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.
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 spritegen directory. These are the two folders we need to change the permissions on.
As we 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.
By changing the numbers in the box to "775" you will be allowing the server to write to that directory, which is necessary for the Dynamic Sprite Generator feature.
Now that you've successfully CHMOD'd the /spritegen folder to 775, you'll need to login to your WordPress dashboard and go to Settings -> Shareaholic -> 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!
Note: some hosts/servers can be fussy when it comes to permissions. If "775" doesn't work for you, try "777".
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 us directly and let us know.
