|
 SociaLink Help
For
SociaLink version 1.0
Last Updated on
Fri, May 30, 2008
Contents
- Browser Support
- Installing SociaLink
- Placing SociaLink (Social Bookmarks)
in Your Dreamweaver Layout
- Inspecting a SociaLink
- Formatting a SociaLink
- Advanced Formatting
- Choosing Social Sites
- Preconfigured Sites
- Previewing the Sites Block
- Adding, Editing, and Deleting Social Sites
- Undeleting Social Sites
- Setting Sites Order
- Link and Title Choices (Controlling What is Shared)
- Social Bookmarking URLs
- Managing Files (SociaLinkElements)
- Registering and Unlocking SociaLink
- Tutorial
Browser Support
SociaLink relies on JavaScript and CSSP (depending on your settings) to
place content onto your layout. These technologies don't work in all browsers. We've
done as much as we can to make it degrade gracefully for browsers that are not
supported or that have JavaScript disabled. No content will be placed on the layout if the JavaScript is not available. You should carefully consider which browsers are relevant to the
market you choose to serve with your website. You may need to adjust your settings to suit that audience. For example, you might want to including the sites directly on the page (Format set to Sites or Sites + Labels) instead of trigger by click or rollover. The following browsers have been
tested and are known to work with SociaLink.
Internet Explorer: 5.0, 5.5, 6.0, 7.0
Firefox: 1.0, 1.5, 2.0
Netscape: 6.0, 7.0, 8.0
Safari: 1.2, 2.0, 3.0
Installing SociaLink
Use the Extension Manager to install the SociaLink Extension.
SociaLink installs several components across multiple directories in the Configuration
directory for Dreamweaver (Commands, Inspectors, Objects/Media, Translators
and the bulk of files in Shared). On multi user systems each user has their own
Configuration folder, and each user will have to install SociaLink separately.
Extension Manager Issues
Several people have had problems with installing SociaLink because of
problems with Extension Manager. The problem stems from the fact that Extension
Manager doesn't always recognize all the other programs that are installed,
even though it is supposed to manage their extensions. If you are having this
problem you will notice that the application selection popup in Extension Manager
does not list your version of Dreamweaver. Because it doesn't know that it is
supposed to manage Dreamweaver files it will not install the SociaLink
extension.
The solution for this problem requires following a few simple steps:
- Quit Extension Manager
- Launch Dreamweaver and leave it running
- Launch Extension Manager. It should now list your copy of Dreamweaver in
its applications popup.
- Quit Dreamweaver
- Now you can install SociaLink
Placing SociaLink (Social Bookmarks)
in Your Dreamweaver Layout
SociaLink is a page object (translated JavaScript) that you may include in
your pages just like you include flash movies. You can insert a SociaLink
object using the menu command or the Insert panel.
Via Menu: Insert > Media > SociaLink
Via the Insert Panel's Media Section (DW MX)
Via the Insert Panel's Common Section under Media Objects (DW 7, 8, CS3)
 The SociaLink page element appears based on how it has been configured -- displaying graphics and text appropriate to its settings. Its default configuration (which is inserted initially) looks like an icon with text (shown here on the right). Other displays are based on the Format selection or other more advanced settings (see Formatting and Advanced Formatting sections in this FAQ)
This element, regardless of its appearance in the layout, represents a set of JavaScript commands that are placed in the source
of the document. Selecting the element displays the SociaLink Inspector which
allows you to modify the JavaScript's settings.
Inspecting a SociaLink
The SociaLink page element appears based on how it has been configured -- displaying graphics and text appropriate to its settings. Its default configuration looks like an icon with text (shown here on the right). Selecting this element, regardless of its appearance in the layout, will activate the SociaLink Inspector (shown here below).
- Object ID
Identifier for each SociaLink object. This is really important -- each SociaLink object must be unique on the page. So if you put multiple SociaLinks on your
page make sure to give each a unique name. This happens automatically when new SociaLink are added to the page, but if you change the ids you will have to check it yourself.
- Sites
Control which social bookmarking sites are being used by your SociaLink. Select, order, create and delete these sites through the dialog opened with this button. See the FAQ section on Sites.
- Style
The SociaLink elements on the page can have a style applied to them by selecting a CSS style (or class) from this popup.
- Format
The Format popup controls what is displayed in the layout. You may choose to display just the SociaLink icon or the icons for the sites, with or without text labels. For more on formatting see the sections of the FAQ on Formatting and Advanced Formatting.
- Link
The Link popup controls the link back from the social bookmarking website. Most often you simply want to link back to the current page (the default setting) but in some cases you might want to use a link that is not this page, but a page this one points to (a link on this page -- like the permalink in a blog page or an entry in a list of new files). These other Link settings allow you to specify that.
- Title
The Title popup controls the text passed to the social bookmarking sites along with the link. This text must be descriptive and relevant to the URL -- usually but not always the title of the current page. The text of a link or the content of a template region can be used instead (see the Titles section in the FAQ).
- Help
Launches the help file in your web browser (this document).
- About SociaLink
The about button displays a dialog with content about your version of SociaLink, including edition, version number, and other information. When you are finished reviewing this information press the "OK" button at the right of the dialog to dismiss it.
- Register and Unlock
The register button displays a dialog with a field where you can enter and validate your serial number for SociaLink. When you are finished entering this information press the "OK" button at the right of the dialog to dismiss it. This will confirm the registration number and unlock the JavaScript files used to create SociaLink. You can purchase a serial number from http://www.rnsoft.com. For more on registering see the section of the FAQ on Registering and Unlocking.
- Preview
Formats with the SociaLink icon in the layout will show the sites in a floating block when clicked in the web browser. Preview allows you to see the block of sites while working in Dreamweaver (so you don't have to keep going back to your web browser for testing).
- Current Sites
This display shows how many sites you have selected and their associated icons.
- Label
Formats with the SociaLink icon in the layout can have a text label next to that icon. This field allows you to modify that text label.
The SociaLink Inspector adheres to standard Dreamweaver inspector behaviors for the small buttons on the right. These are: the circle-enclosed question mark in the top right corner displays help; the yellow tag with the pencil edits the source code; the disclosure triangle on the bottom-right hides the lower half of the inspector display (to save screen space).
Formatting a SociaLink
 The Format popup controls what is displayed in the layout. You may choose to display just the SociaLink icon or the icons for the sites, with or without text labels. Advanced allows you to control the HTML content and CSS styles used when displaying SociaLink.
- SociaLink Icon
Just the SociaLink icon by itself.
- SociaLink Icon + Label
The SociaLink icon accompanied by a text label that you can set.
- Site Icons
Just the icons for the social bookmarking sites you have chosen.
- Site Icons + Labels
The icons for the sites you have chosen along with their names as labels.
- Advanced...
Opens the Advanced Formatting dialog box where you can specify the HTML tags and CSS styles used when generating the SociaLink content on the page.
Advanced Formatting
The Advanced Formatting dialog box allows you to specify the HTML tags and CSS styles used when generating the SociaLink content on the page. Please note this is a long dialog box with many settings so you may need to scroll to find the setting you are looking for.
Format in Layout
Format in Layout allows you to choose what to include in the layout. Same choices as before: SociaLink Icon; SociaLink Icon + Label; Site Icons; Site Icons + Labels. (See Formatting in this FAQ)
SociaLink Icon Elements
SociaLink Icon Elements controls the display of layout elements if you choose an SociaLink Icon-based format.
- Include Label turns on and off the label
- Label is the label text used next to the SociaLink icon
- Activate Block controls when the sites block is floated in -- either when the icon is clicked or when the mouse moves over it
- Enclose Tag + Style sets an HTML tag to surround the SociaLink icon and a CSS style to associate with it
- Link Style sets the CSS style for the link used in displaying the SociaLink icon (its clickable, so it must use a hypertext link)
- Image Style sets the CSS style for the image (the icon itself) used in the display
Sites Block Elements
Sites Block Elements controls the display of the sites block regardless of whether it is included in the layout or floated in when the SociaLink icon is clicked on.
- Include Labels turns on and off the labels (the names of the sites)
- Open Links controls where to open the social bookmarking sites -- in the same window or in a new window
- Align controls the alignment of the sites block (adds align to the enclosing tag)
- Enclose Tag + Style sets an HTML tag to surround the sites block and a CSS style to associate with it
- Link Style sets the CSS style for the links used in displaying the sites
- Image Style sets the CSS style for the images used to display the sites
- HSpace and VSpace controls extra space around the images
- CellPadding, CellSpacing, and Border control the table display
Sites Block Generation
Sites Block Generation controls how the block is created.
- Fit To controls how many rows or columns to use when building the sites block
- HTML Before, Between, After are pieces of HTML code to be inserted before the block, between the sites or after the block
Choosing Social Sites
The Sites button in the SociaLink Inspector launched the Site Selector. SociaLink comes with 45 sites preconfigured and you can add as many as you like. Simple check the sites you want to include in the sites block. Once you have changed the sites you might want to get a look at them with the Preview button. No settings are stored until you press the OK button so you can play with this as much as you like and just Cancel those changes if you don't want them. This includes adding, editing and deleting sites.
At the top of the dialog there is a simple toolbar.
- Check All will select all of the sites
- Uncheck All will deselect all of the sites
- Add will present a dialog box where you can add your own site
- Edit will edit the settings of an existing site -- you may only edit one at a time
- Delete will mark all selected sites for deletion -- a red x is placed next to the site
Alt + Delete (option on the Mac) will remove selected sites from the deletion list -- no more red
Delete with no sites selected will launch the Undelete dialog so you can restore older sites you may have deleted
- Order will allow you to move the selected sites around so you can have them in any sequence you want
Beyond the mechanics of using SociaLink, you really need to consider which sites are relevant to your site and your audience. Different sites have different focuses -- technology, academia, humor, etc -- and you and your audience will get the most from your site by having the right ones. You might seriously consider giving the site a try yourself and see what you think before linking to it yourself.
Preconfigured Sites
These are the 45 social bookmarking sites that are pre-configured in SociaLink with short descriptions. You should consider using only the ones that are relevant to your audience. You can easily add more and there are literally hundreds of other sites.
 |
Ask.com
Private bookmarking with search |
 |
BlinkBits
Web 2.0 style Social Network, linkblog, bookmarks and RSS aggregator |
 |
Backflip
Social bookmarks using folders |
 |
BlogMarks
Web 2.0 style Social Bookmarks with Thumbshots |
 |
BlueDot
Web2.0 social network and bookmarks network using Tags. Internal messages and comments tracking with notification, related tags and 'see who bookmarked' |
 |
BlinkList
Web 2.0 style interface using Tags and Ajax in page features |
 |
co.mments
Social service to centralize comments, you bookmark and tag comment pages to follow them at co.mment |
 |
CiteULike
Text-based service with tagging to help academics to share, store, and organize the academic papers |
 |
del.icio.us
Popular, clever text based using Tags |
 |
Digg
Popular Web 2.0 style aggregation from almost any source |
 |
Diigo
The social annotation service introduced by Diigo allows users to add highlights and sticky notes, in situ, on any web page they read |
 |
DropJack
Social content site based on shared articles and news |
 |
DZone
Sites & content for developers |
 |
Facebook
Personal social networking |
 |
Fark
News & humor, with public bookmarks by category, submit and comments |
 |
FeedMeLinks
Open Source Social Bookmarks using Tags |
 |
Feedmarker
Bookmarker and newsreader with tagging |
 |
Furl
Social bookmarking website that allows members to store & share searchable copies of webpages |
 |
GiveALink
bookmarks are analyzed to 'build a new generation of Web mining techniques' |
 |
Google
Clippings of text, images and links from web pages |
 |
Kinja
Focus on weblog content |
 |
linkaGoGo
Spare, Online Favorites and Social Bookmarking |
 |
Lilisto
Social bookmarks using tags. Other users bookmarks can be accessed using 'smart categories'(rules) |
 |
Linkroll
Collaborative web bookmarks and link blogs |
 |
Ma.gnolia
Popular, Web 2.0 style community driven social bookmarks using Tags |
 |
Maple
Collectively map and aggregate the Web |
 |
LiveBookmarks
Microsoft's foray into social bookmarking |
 |
Netscape
Netscape's foray into social bookmarking |
 |
Netvouz
Store bookmarks online and share them if you want |
 |
Newsvine
Updated continuously, focus on news |
 |
PlugIM
User driven internet marketing community |
 |
reddit
Vote-based filter on shared bookmarks |
 |
Rojo
RSS reader and social bookmarking together |
 |
RawSugar
Capture and tag pages filter by relevance |
 |
Simpy
Save, tag, search and share your bookmarks, notes, groups and more |
 |
Spurl
Bookmarks with full text searching, recommendations, page capture & store |
 |
Squido
Lens (single web page with a single topic) with aggregation from blogs, rss, google, maps, ebay (almost anything) |
 |
StumpleUpon
Learns what you like and makes recommendations |
 |
Technorati
Mostly technology blogs |
 |
TagTooga
Categories-based site sharing |
 |
Tailrank
News in the blogosphere |
 |
Wink
All about people |
 |
Wists
Find well designed, interesting or unusual products and collectibles |
 |
YahooMyWeb
Yahoo's foray into online bookmarking |
 |
Zurpy
Bookmarks, text clippings, images, files, and news feeds in one place |
Previewing the Sites Block
In several dialogs you will find a Preview button. This button will generate the sites block and show you the result based on your current settings (though the settings may not have been applied to the SociaLink on the layout yet). When you are done viewing the preview press the OK button to return to where you were.
Adding, Editing, and Deleting Social Sites
At the top of the Site Selector dialog there is a simple toolbar.
- Check All will select all of the sites
- Uncheck All will deselect all of the sites
- Add will present a dialog box where you can add your own site
- Edit will edit the settings of an existing site -- you may only edit one at a time
- Delete will mark all selected sites for deletion -- a red x is placed next to the site
Alt + Delete (option on the Mac) will remove selected sites from the deletion list -- no more red x
Delete with no sites selected will launch the Undelete dialog so you can restore older sites you may have deleted
- Order will allow you to move the selected sites around so you can have them in any sequence you want
Site Settings
A site definition requires four pieces of information:
- ID is a 4 character unique identifier for looking up the site in SociaLink's database of sites
User-defined sites have a "u" as their initial character
- Name is the name of the social website and is sometimes placed next to the image within the layout
- Image is an 18 x 18 GIF image to be used on the layout
- URL is the URL for the share page, including what information to pass, usually you can just copy it from the instructions on the social website
See the section on Social Bookmarking URLs
Adding a Site
Simply create the site's settings in the dialog. The settings will not be store in SociaLink until you press OK in the Site Selector dialog. Canceling the Site Selector dialog will also cancel any new sites you have added.
Editing a Site
You may not edit the ID, but all other settings can be changed. Simply edit the site's settings in the dialog. The settings will not be store in SociaLink until you press OK in the Site Selector dialog. Canceling the Site Selector dialog will also cancel any edits you have made.
Deleting a Site 
To delete a site simply select it and press the delete button in the toolbar at the top of the dialog. The site will be marked with a red x. When you press OK all sites marked with the red x will be removed from SociaLink's database. This is a long-term change (but can be undone), if you just don't want to use that site on your pages then leave it unchecked.
If you have marked a site for deletion but have changed your mind then select the site and hold down the Alt key on windows or Option key on macintosh while you click the delete button. The red x will be removed and the site's icon will be restored.
Undeleting Social Sites
If you have deleted a site the data is still around and you can restore it. Be careful, because sites with the same ID can be overwritten when undeleting so be sure you mean it (especially with user-defined sites).
In the Sites Selector dialog uncheck all sites (you can do it with the Uncheck All button). Then press the Delete button. The Undelete dialog will open and you can select any sites you like for restoring. Again, nothing is actually changed until the OK button in the Sites Selector dialog is pressed.
Setting Sites Order
The sites can be put into any order you want. The process is simple. In the Sites Selector dialog press the order button. The Sites Order dialog is opened with the icons for your sites. Click an icon and green arrows become visible. Click the arrows to move its position. You can also use the arrow keys on your keyboard. Use the Preview button to be sure you are happy with the way things will look.
Link and Title Choices (Controlling What is Shared)
Most social bookmarking tools focus only on making links to a single page, and, if titles are included at all, only the title for that page. This is useful for the majority of content pages (and is the default for SociaLink). However, for more complex pages, listing pages, dynamically created pages, permalinks for blogs, and any number of other uses this perspective is too simple. That's why SociaLink gives you choices.
 Link
The Link menu allows you to control what URL is sent to the social bookmarking site.
- Current Page is the URL for the current page -- including any query string parameters that are important for dynamically generated pages
- Previous Link is the URL for the link that precedes SociaLink on the page's layout -- useful for lists
- Next Link is the URL for the link that follows SociaLink on the page's layout -- also useful for lists
- Previous Link with Class looks for the last link with a particular CSS class (style) -- handy for areas with multiple links, but only 1 headline link
- Next Link with Class looks for the next link with a particular CSS class (style)
 Title
The Title menu controls what descriptive text is passed to the social bookmarking site along with the URL.
- Page Title sends the title of the page -- though as we all know this can often be ignored by authors or might not contain the relevant information (perhaps a headline from the page would be better)
- Link Text -- if you are using a previous or next link you probably want to capture the text from that link
- Headline -- often if the title of the page isn't right, capturing content from a headline can be the right thing to do
- Template Region -- capture content from a Template Region assigned to be the headline
More About Headlines and Template Regions
Headlines and Template Regions provide the flexibility to use SociaLink in a way that reflects the way many people really build pages. Often the title of a page simply doesn't contain the right descriptive text. These alternatives allow you to fit SociaLink into the way that you work rather than having to make site-wide changes to your page titles or having to follow up with everyone contributing pages to your website.
 Headlines are identified by their tag and often an associated style sheet (important especially if the tag is used multiple times). Tags are restricted to a simple set - Paragraphs, Headings, Divisions, and Spans.
Templates are incredibly useful in that they restrict control of page editing to specified areas (editable regions) and only those areas change. That also means that only those areas have relevant content. Any editable region within the page can be specified for use.
Also, if you are working with templates, you can easily include SociaLink on the template and it will work on all the pages based on that template. So it is really easy to add SociaLink to an entire site with just a few quick changes.
Social Bookmarking URLs
All social bookmarking urls fall into a basic format -- the url of a script on the destination server along will information about what to link to and what text to send with it. There may be other settings, but for the most part that's it.
http://www.socialsite.com/dir/share.php?setting=value&setting=value&url=SHAREDURL&title=SHAREDTITLE
You can copy these URLs from the documentation on any social bookmarking website. Place the <<url>> and <<title>> replacement tags into the string instead of SHAREDURL and SHAREDTITLE and SociaLink will now be able to use that URL.
http://www.socialsite.com/dir/share.php?setting=value&setting=value&url=<<url>>&title=<<title>>
Managing Files (SociaLinkElements)
SociaLinkElements is a directory created within your website to contain the pieces needed by SociaLink for use on your layout. There are only a few kinds of files you'll find there. The default list is here on the right. Yours may vary based on any new sites you created or sites you deleted. SociaLink will manage this for you. Please don't edit them directly unless you are sure about what you are doing. SociaLink may change those files without letting you know.
- scl_XXXX.gif -- the icon for the site with ID XXXX
- sclWhatever.gif -- graphics for use on the layout but not associate with a site
- SociaLinkLibrary.js -- the javascript library used to build the SociaLink
- SociaLinkSites.js -- the javascript library that contains the site definitions
If you have been testing SociaLink on your webserver be sure to upload any newly unlocked files (see Registration and Unlocking in this FAQ). Please note that all the files in the SociaLinkElements directory are needed on the server, so it is recommended that you upload the entire directory. If you discover that you have missing icons or other issues with display it is likely because the contents within this directory were not upload (or only partially uploaded).
Registering and Unlocking SociaLink
Get your registration code from the RNSoft website at http://www.rnsoft.com.
It is very important to register your copy of SociaLink, not just because
you should pay for the software if you want to use it, but because it directly
effects the content of your scripts and pages. All SociaLinks generated from an unregistered
version of SociaLink will display a dialog with the text "SociaLink is Unregistered"
instead of linking to your selected social bookmarking sites.
To unlock the SociaLink files you must
enter your registration number in the text field in the Register dialog and
click the OK button.
Access the Register dialog by clicking on the red key button next to the text "Unregistered" at the bottom-left
of the SociaLink Inspector. If the inspector is not already visible, you will
have to select a SociaLink object on the layout. This button turns white with a green key when a valid registration code
is entered.
 
Unlocking SociaLink
If you have been using SociaLink in trial mode the unregistered version of the JavaScript library has been placed in your websites. This version of the library must be replaced with an unlocked version. When you enter your serial number into the SociaLink Registration dialog and it is confirmed as a valid code you will be prompted to allow SociaLink to unlock the files.
Once unlocking is complete SociaLink will report which websites it has changed files in, if any.
If you are editing a document that has an unregistered SociaLink element with a registered copy of the SociaLink extension you will be prompted to unlock the unregistered SociaLink library.
If you have been testing SociaLink on your webserver be sure to upload the newly unlocked files. Please note that all the files in the SociaLinkElements directory are needed on the server, so it is recommended that you upload the entire directory. If you discover that you have missing icons or other issues with display it is likely because the contents within this directory were not upload (or only partially uploaded).
Tutorial
There is an extensive tutorial available on the RNSoft website at
http://www.rnsoft.com/en/products/socialink/content/tutorial/
|
