A.1 Installation

If you work on Dreamweaver CC 2015, you have to download the extension installer from here:

http://www.extendstudio.com/extension_manager/download

For the other versions, Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1 you must follow these steps:

- install the "DWSocialToolbox_1.0.15.zxp" file using Adobe Extension Manager;

- restart Dreamweaver.

For Dreamweaver CS5.5, CS5, CS4

- install the "DWSocialToolbox_1.0.15.mxp" file using Adobe Extension Manager;

- restart Dreamweaver

01.jpg

A.2. Where to find the extension in Dreamweaver

All extensions are available in the “Insert” pane in Dreamweaver. Expand it, and at the bottom you will see the DW Social Toolbox.

02.jpg

Click CTRL+F2 ( Command+F2 for MAC) to display the insert window.

  • If the “Insert” window is displayed as Tabs, below the main Dreamweaver menu, all Extend Studio items will appear on the right side of the Tabs.
  • If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right side of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow.

03.jpg

A.3. Registration

A.3.1 How to Register the extension in Dreamweaver

After you download and install the Social Toolbox extension, a registration pop-up will appear. To get things completely set and ready, copy and paste the code you find in the email that will be automatically sent to you, provided you purchased the Accordions Extension.

If you are not sure that you can make great use of our product, you always have the option to start a free, 10 days trial and convince yourself of its functionality.

04.jpg

In the trial mode, when you load the page into the browser, you will get the following message: “This page contains DW Social Toolbox created with DW Social Toolbox. Not for commercial use!” After you register the extension, edit one of the social modules already created with the trial mode and update it in order to remove the “Commercial use” message. Check out how your page looks in the browser now.

A.3.2. Registration Errors

Error messages appear for many different reasons. See the list below to find out how you can manage the potential errors for the extension:

301: This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license- you would have to reset the license from the Extend Studio website- “My orders” section.

Invalid License: This implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.

If it doesn’t work, go to Account “My orders” section and from there you can obtain the right license key.

If you encounter any inconsistencies or a particular situation, please send us an email at the following address: support@extendstudio.com. We are constantly here to offer the right advice and guide you through the process of flawlessly designing your web page.

2. Adding a Social Toolbox

2.A Overview

The process is simple, intuitive and time saving. We have created a simple extension infrastructure for you to concentrate all your resources on the design activity. If you don’t know how to define a site in Dreamweaver, check this link and follow the easy steps.

You have no less than 12 skins to choose from, all completely set and ready for your page design.

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Click on the icon in the editor to add the social toolbox on your workspace

05.jpg

After clicking the “Add Social Toolbox” button, the editor will appear.

06.jpg

This is how the social bar appears in the editor as default preset. You can find the following social icons:

Facebook

Twitter

Google+

LinkedIn

StumbleUpon

Pinterest

Flickr

Tumblr

Reddit

Digg

If you go to the Items bar, you can see a dropdown list with all social icons:

07.jpg

You have two alternatives to display your social bar on the page. You can leave it in its default, horizontal shape, or you can change its appearance from the upper side of the editor, where you can switch to the second option. It will thus appear as a vertical social tools menu, with all icons hidden. Once the user clicks on the arrow, the entire list of icons unfolds.

0.jpg.jpg

This is the second display alternative for your social bar:

09.jpg

The list of social icons unfolds once you click on the arrow:

10.jpg

2.B. Social Bar Items

B.2.1. Adding and deleting social widgets

In the Items box you will see all social widgets gathered in a list. You will also see the “+” and “-” symbols which allow you to add or delete recently added social media references. You cannot remove a default item by checking the “-” symbol but you can easily perform this action provided you uncheck the social item directly from the list below. All items can be unchecked and replaced with new ones. By clicking on the “+” icon you can add new social media references.

11.jpg

The arrows on the right side allow you to rearrange or reconsider the default order for your social items. Place or replace them however you find it suitable for the strategic design of your page. All the changes you perform can be seen instantly on the Dreamweaver editor.

12.jpg

For each social icon you choose to add or to keep in your list, you must add an URL. The “Page URL” box allows you to insert the corresponding URL’s for each social reference. Click on each of the social items from the list and add the suitable page URL.

13.jpg

You can choose to have your social page opened in a new tab if you check on the icon below.

14.jpg

You can change the width and height of each icon in your list. All icons have symmetrical dimensions but if you want to highlight one of them, you can easily do it by changing dimensions in the width and height boxes. They all have the default preset “inherit”. Consider the dimensions in pixels.

15.jpg

All items can be represented by their classic icon or you can always customize their look from the items panel. As an alternative, you can choose to leave the icons with their default images and change the settings for them on the hover state, to add a dynamic touch.

16.jpg

You can change the background color for each icon or you can choose to have it changed on hover state.

17.jpg

2.C Social Toolbox Settings

This panel allows you to change the default settings of the social bar entirely, not for the items separately. You can always edit the items from the items box, described previously.

If you want to add more social bars on your page, we recommend you change their names, in order to separate and select them appropriately. Change the name of your social bar from the “name” reference.

18.jpg

From the “Dimensions and Align” pane you can change the general terms for width and height corresponding to the bar or you can change the width and height of each item in the box.

19.jpg

Depending on the type of appearance you choose for your social bar, you can make some adjustments. If your bar stays “in layout”, namely as horizontal arrangement, you don’t have many variable options, it stays fixed on the fragment of your page. If you choose to position your social bar vertically, namely as a “floating” element, you can choose to reposition it on the right or left side of the screen or you can center it vertically.

20.jpg

You can also customize the position of the arrow which opens the vertical bar, by choosing a certain dimension, estimated in “pixels from top”.

21.jpg

If you choose the social bar to be inserted as an “in layout” element, you can realign its position. Thus, you can have it aligned from the left or right side of the page, or you can leave it centered.

22.jpg

2.D. Design Settings

2.D.1. The Social Toolbox Container

  • You can change the background for the social bar container and add some solid colors or play with the gradient shades. You always have the option to add a background image on your social bar as well.
  • You can change the gradient shades by clicking on the little box which displays the shades.

23.jpg

You can add margins, padding, borders or round the corners of your desired social bar.

24.jpg

2.D.2. The social bar items

You can change margins, padding, borders and adjust the corners for the items in your toolbox. You can have the change applied on normal or hover state.

25.jpg

2.D.3. The Open/Close Button

This refers to the arrow that allows the user to open the vertical social bar. You can choose the options for the open/close button only if you opt for the vertical social bar. You can change its dimensions. Reset the width and height for the open/close button.

26.jpg

In terms of background, you can choose a plain color for the arrow icon or you can choose separate images that can dynamically change whether the user either clicks on the arrow to open or to close the toolbar. You can choose a certain image for the “open image” box or the “close image” box.

27.jpg

You can adjust the padding, the margins, the borders or adjust the corners of the menu arrow

28.jpg

3. Adding a Facebook Widget

This is how the basic menu for the Facebook social widget looks like

29.jpg

First of all, you can change the name of your widget. In case you would like to add more Facebook widgets on your page, naming each of them separately will help you better manage your efforts.

30.jpg

One of the most important aspects of social widgets is adding the suitable URL. So don’t forget to paste the URL structure of the Facebook page you want to link to your site.

36.jpg

You can change the type of your social widget from the menu. Your social widget may appear either as a:

3.A The Like button

31.jpg

You can change the language. Keep in mind that the language you select will be the same for all Facebook widgets on the page. There cannot be added two Facebook widgets with different language settings.

3.A.1. Facebook Widget Settings

You can change the width of the widget or change the action from “like” to “recommend”.

32.jpg

You can also select from the different types of layout and check the “share” box.

33.jpg

You can choose to add a dynamic touch to the widget by checking the “ add faces” button. This will show the faces of people who have liked your page.

34.jpg

You can also choose to select a certain color scheme, depending on the layout of your site. A light color scheme will fit on a dark layout while a dark color scheme will be more suitable for a light shade when it comes to the layout of your page.

35.jpg

C.2. The Share Button

You can choose to define you Facebook widget as a share button.

37.jpg

Play with the layout and choose the most suitable way to display the widget on your page.

38.jpg

3.C. The Send Button

You can always choose to add a send button to your Facebook widget suite or pick only the “send” button to represent the Facebook connection on your page design.

39.jpg

For the send button you can only change the color scheme from light to dark.

3.D. The Follow Button

This is another widget extension you can add. The follow button can be used with its default design settings or you can adjust its appearance and functions from the panel.

40.jpg

Choose to change the layout of the follow button as it follows:

41.jpg

You can also play with the width, choose the “show faces” option and choose either a dark or a light color scheme.

42.jpg

3.E. The embedded posts

For a more dynamic approach on your Facebook social widget, the embedded posts option can fit just perfectly. Users can see the latest posts along with the number of likes, shares and comments received.

43.jpg

You can only change the width of the embedded posts widget.

44.jpg

3.F. The embedded videos

You can add videos to the Facebook widget approach by choosing the “embedded video” option.

45.jpg

You can choose the autoplay option for your video, allow fullscreen or adjust the width of the video.

3.G. The comments

You can choose to place a Facebook comments section somewhere on your site. Select the number of comments you would like displayed on your page. Also choose the order of posts and arrange them by the newest, oldest or top ranked.

46.jpg

3.H. The page plugin

The page plugin can be defined as a complex and complete way of displaying your Facebook page. Users can like your Facebook page directly from the plugin box. They can also share your page, leveraging engagement. You can choose to either show or hide the facepile, show or hide call to action, adjust width and height.

47.jpg

4. Adding a Twitter Widget

This is how the menu for the Twitter social widget looks like:

48.jpg

You can change the name of the widget or choose a particular appearance for it. You can choose to display:

4.A The Tweet Button

49.jpg

The tweet button allows the user to literally tweet your article, blog post, information. It displays all number of tweets.

You can adjust the language for it and don’t forget to add the corresponding URL for your Twitter page.

50.jpg

4.B. The Follow Button

Through the Follow widget you invite users to follow your Twitter page. You can choose to have your followers count displayed or hidden and you can also choose to have your Twitter username shown or hidden, via some simple checkboxes.

51.jpg

4.C. The Embedded Tweets Button

Through this widget you will have selected tweets displayed directly on your desired page. If you want to highlight or basically “pin” a certain tweet on your page, you must add the URL of the tweet. To get it, go to the “more” button at the bottom of that particular tweet.

52.jpg

You can change dimensions and alignment and you can choose to display the entire conversation around that certain tweet or hide it. Also, change the theme from light to dark, depending on the background of your page or choose to have the cards shown or hidden.

4.D. The Embedded Video

You can choose to have a video embedded on your page. Add the URL of the tweet that contains the video. To get it, go to the “more” button at the bottom of the tweet and click “copy link to tweet” and then paste the link.

54.jpg

4.E. The embedded timeline

You can embed an entire Twitter timeline on your page. All you have to do is choose the option from the list and set a tweet limit. The maximum limit is 20 tweets, as you don’t want to overcrowd your page with unnecessary elements. You need to choose the username, to choose a light or dark theme, depending on the design of your page, choose the width and the height for your timeline.

55.jpg

5. Adding the Google+ Widget

For this widget you can choose to add either a “ G+1” button, a share button or a follow button. This is how the G+1 widget looks like on the workspace.

5.A The G+1 widget

56.jpg

You need to add the URL for your desired Google+ page, you can reset the size and you can choose a certain type of annotation for your Google+ widget.

Annotations:

None: do not render additional annotations

Bubble: display the number of users who have +1’d the page in a graphic next to the button

Inline: display the profile pictures of connected users who have +1’d the page and a count of users who have +1’d the page.

You can also set a certain width and a special alignment.

57.jpg

5.B The Share Button

For the share button and the G+1 button the settings are the same. Only the looks and functionality are different.

58.jpg

5.C. The Follow Button

For the follow button you can change width, annotation and height, just like in the previous cases. The only difference is that the follow button has a complementary field added.

The Relationship field describes the following parameters:

  • Publisher: describes the relationship of the entity defined at the URL location to the page where the badge is embedded. “Publisher” helps the business create a shared identity by linking the business’ website to the business’ Google+ page.
  • Author helps individuals ( authors) associate their individual articles from a URL or website to their Google+ profile.

59.jpg

F. The Instagram Widget

This element allows you to instantly share all your instagram uploads directly on your webpage. You can adjust the width and choose to either embed the written caption or to hide it from the page. Don’t forget to add the URL of your Instagram page as well.

60.jpg

7. The Pinterest Widget

This is a complex element which allows you to engage with your users via Pinterest. You can choose from a variety of buttons, as it follows:

7.A The Pin It Button

61.jpg

For the Pin It button you can change the size, adjust the shape and change the color.

7.B. The Follow Button

For the Follow button you can change the name of the page, you need to add the URL and there you have it, set and ready.

62.jpg

7.C. The Profile Widget

The board is a more complex way of adding a Pinterest widget, as it shows a sneak-peek to your Pinterest profile. Users can see part of your pins and they are invited to check out your profile.

You can change the board width, height and adjust image width as well.

63.jpg

7.D The Pin Widget

This is the most engaging Pinterest widget. It shows both the picture of a certain interest or pin and it displays a call to action. In the URL box you need to add the exact URL of the pin you would like to add.

64.jpg

8. How to Edit the Social Toolbox Extension

All you have to do is select Social Toolbox inside Dreamweaver, click on the “Edit Social Item” icon and the editing panel will open.

65.jpg

After you finish editing the “Social Toolbox” settings, click the “Update” button and the social bar or social widget will be updated.

Note: When you change presets, the entire block of content for the Social Toolbox remains but the design settings will be replaced with the settings of the new preset. After you finish editing the tabs, click the Update button.

66.jpg

9. Add Existing Social Item/ Social Widget

The “Add existing Social Item” helps you insert existing instances of social items in another page so that you don’t need to recreate it from scratch. To perform the action, you need to click inside the container where you want it to be added. This is why it is always important to name your social bars or your social widgets.

67.jpg

10. Deleting the Social Toolbox

In order to delete a certain element or an entire toolbox, you need to select it from the panel then go to the “Delete social item” box. The item will be instantly deleted from the list.

68.jpg

11. Requirements

The extensions work both on PC and Mac and are compatible with the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC, CC2014, CC2014.1, CC2015.

12. FAQ

Can I use the license to add the extension in an unlimited number of websites?

Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?

We offer a secondary, free license at the user’s request. All you have to do is send an e-mail to support[at]extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?

You will have to download the extension from your extend studio account and install it on the new computer. Before registering, you will have to reactivate the serial number by clicking the correspondent “reset license” button from your account.