Web development tutorial

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, Design, Dreamweaver, Javascript

0 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

Social Media Toolkit allows you to insert 'Share' links to your page for the most popular social networking websites. Additionally, this extension can be used to add Facebook Comment and Facebook Like features to your pages with only a few clicks.

next section

Requirements

You will need the following items before starting this tutorial:

Social Media Toolkit 2
Dreamweaver CS4 or later
Dreamweaver site defined
Make sure to configure the Web URL field under your Remote Server options.

If you are seeing errors when launching Dreamweaver or trying to use the extension, you will need to delete the WinFileCache.dat or MacFileCache.dat file from your Dreamweaver Configuration folder. Click here for instructions.

next section

Inserting Share buttons

The Insert Share Buttons interface allows you to select the 'Share' services you would like to make available and the button type and layout you would like to use.

Open the page that you wish to insert your Share buttons to.
Make sure you have created a Dreamweaver site containing this page and that site is open in the Files panel (WebAssist > Files).
From the WebAssist menu, choose Social Media > Insert Share Buttons.

In the Insert Share Buttons dialog, you will be able to choose the services to include, and how you would like those services to display on your page.

Choose how you wish to specify the Page URL that is going to be shared:
1. Current Page: Will share the URL for the page that is being viewed.
  In most cases, this is the option you will want to use. Especially if adding the share buttons to a template or plugin.
2. Custom Page: Allows you to specify a URL for the particular page you wish to be shared.
  Use this option if you wish to be more specific about the URL that is being shared.
Click to select each of the services you wish to include.
When selected, the service will be highlighted in green.
If you select the Mail option, the Email Settings interface will immediately load for you to configure the settings of the email.
Select your button type: Choose between icons and counters.
Icons and Counters have different sub-options.
1. If Icons are selected, choose whether you wish to hide the buttons under a "Share" link.
2. If Counters are selected, choose the style you wish to use as a counter.
Once you are ready to insert to your page, click OK.

The share buttons will have been inserted to your page. If chosen to include under a 'Share' link, the text will be editable for you to customize. Otherwise, the share buttons will be represented by a placeholder graphic that you can use for placement purposes.

Upload your website's files to your live server for testing.

next section

Facebook Comments

The Facebook Comments feature will allow your site's visitors to add comments to your pages. Using their Facebook accounts, your site visitors will be able to comment on the page, which can be posted on their Facebook wall, and also create a discussion on your website. This is a great feature for product detail pages or blogs/news websites.

Place your cursor on your page where you wish the Facebook Comments feature to be inserted.
In the URL field, enter the URL for the page being commented on.
Facebook has replaced the Unique ID option (Social Media Toolkit 1), with a standard URL option. A comments system will be managed based on the Page URL.
In the Comments field, enter the number of comments you wish to appear where you insert this feature.
In the Width field, enter the desired width of the comments feature.
From the Color Scheme field, choose the color scheme you would like to use.

Your Facebook Comments feature has now been inserted to your page. Simply publish your site and test the page on your live server to see it in action.

You will only be able to test this feature on your remote server that the Application ID has been configured for. If you see a loading graphic instead of the comments feature appearing on your page, there is either an issue with your Application ID or you are not testing on a remote server.

next section

Facebook Like

The Facebook Like feature allows your site visitors to "Like" something you have listed on your page. This could be anything from a product you are selling to an article you have written.

Instead of the verb "Like" you also have the option of the button saying "Recommend".

When a site visitor "Likes" something, a counter records the visitors click, and posts on their Facebook wall with a link back to that page.

Place your cursor where you want to insert the Like button.
Choose how you wish to specify the Page URL that is going to be liked:
1. Current Page: Will share the URL for the page that is being viewed.
  In most cases, this is the option you will want to use. Especially if adding the like button to a template or plugin.
2. Custom Page: Allows you to specify a URL for the particular page you wish to be liked.
  Use this option if you wish to be more specific about the URL that is being liked.
Choose whether you wish to include the Send button.
Choose the desired layout style from the dropdown provided.
From the width field, specify the desired width of the button.
Select the Show Faces checkbox if you wish to include Facebook profile pictures below the button.
In the Verb to display field, choose whether to display "Like" or "Recommend".
Choose the preferred color scheme from the Color Scheme menu.
Choose a desired font from the Font field.
Click OK to insert the feature to your page.
Upload your website's files and test the feature on your live server.
You will only be able to test this feature on the live server that it has been configured for.

next section

Facebook Activity Feed

The Facebook Activity feature displays the most interesting recent activity taking place on your site based on the various social interactions. The feed will be populated based on overall site activity as well as activity of the current site visitor's Facebook friends.

Place your cursor on your page where you wish the Facebook Activity feature to be inserted.
In the Domain field, enter the domain of your site exactly.
For example: http://webassist.com
In the Width and Height fields, enter the desired dimensions for this feed.
Choose whether you wish to include the "Activity Feed" header at the top of the feature.
Select the desired color scheme from the Color dropdown.
Select the desired font from the Font dropdown.
Using the color picker, select the desired border color for this feature.
Select the Recommendations checkbox if you wish this feed to incorporate recommendations for the visitor.

Facebook Recommendations

The Facebook Recommendations feature gives your website visitors a personalized feed suggesting pages of your website that they may be interested in. For users who are logged into Facebook while visiting your site, they will be presented with links based on the social interactions that have occurred throughout your site.

Place your cursor on your page where you wish the Facebook Recommendations feature to be inserted.
In the Domain field, enter the domain of your site exactly.
For example: http://webassist.com
In the Width and Height fields, enter the desired dimensions for this feed.
Choose whether you wish to include the "Recommendations" header at the top of the feature.
Select the desired color scheme from the Color dropdown.
Select the desired font from the Font dropdown.
Using the color picker, select the desired border color for this feature.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

0 ratings | Sign in to rate this tutorial