Drag the Facebook widget from the Social Networking Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

The Facebook Badges page opens in the Create New Widget: Facebook Widgets window.

You can either create a Facebook badge creating access to information, photos and pages in your Facebook profile, or create a Facebook social plugin to add to your website.

To add a plugin, go to step 8.

To add a badge, click on the badge type that you would like to add to your website.

When prompted, log in to your Facebook account. 

The Create New Widget: Facebook Widgets window displays a default preview of the badge type you selected. You can change this if you like by selecting a new badge type in the Badges menu on the left-hand side.

To create a Profile badge displaying your photo and information about you, click the Create a New Badge in the top right corner of the window to display customization settings.

Choose a layout and click on the items you want to include in your badge.

A preview is displayed on the right of the window.

Click Save.

If you want to make changes, click Edit this Badge to the right of the badge information and change and save your edits.

In the 'Choose Where to Add the Badge' button bar, click the Other button.

A popup displaying the code for your badge is displayed.

Click in the popup to select the code and press Ctrl and C on your keyboard to copy the code.

To create a Like badge creating access to a Facebook page that you particularly liked and flagged, click the Create a New Badge in the top right corner of the window.

Note: You have to previously tag at least one Facebook page with 'Like this' before creating this widget.

Choose the page for your badge from the Select a Page drop-down list.

A preview is displayed on the right of the window.

Click in the box displaying the code for your badge to select it and press Ctrl and C on your keyboard to copy it.

To create a Photo badge displaying and creating access to your Facebook photos, click the Create a New Badge in the top right corner of the window to display customization settings.

Note: You have to previously add at least one photo to your Facebook profile before creating this widget.

Choose a layout, choose the number of photos to display (between 2-8) and click on the photos you want to include in the badge.

A preview of your Photo badge is displayed on the right of the window.

Click Save.

If you want to make changes, click Edit this Badge to the right of the badge information and change and save your edits.

In the 'Choose Where to Add the Badge' button bar, click the Other button.

A popup displaying the code for your badge is displayed.

Click in the popup to select the code and press Ctrl and C on your keyboard to copy the code.

To create a Page badge creating access to a page or application that you have created in Facebook, click the Create a New Badge in the top right corner of the window.

Note: You have to previously create at least one Facebook page or application before creating this widget.

Choose the page or application for your badge from the Select a Page drop-down list.

A preview of the badge is displayed.

Click in the box displaying the code for your badge to select it and press Ctrl and C on your keyboard to copy it.

To add a Facebook social plugin to your site, click the 'Get our social plugins (Like button, Activity Feed) here' link at the bottom of the Facebook Badges page.

The Facebook Social Plugins page opens.

Choose from the following type of social plugin:

• The Like Button allows users to share pages from your site back to their Facebook profile
• The Activity Feed shows users what their friends are doing on your site through likes and comments
• The Recommendations plugin gives users personalized suggestions for pages on your site they might like
• The Like Box enables users to like your Facebook page and view its stream directly from your website
• The Login Button shows profile pictures of the user's friends who have already signed up for your site in addition to a login button
• The Facepile plugin shows the Facebook profile pictures of the user's friends who have already signed up for your site
• The Comments plugin lets users comment on any piece of content on your site
• The Live Stream plugin lets your users share activity and comments in real-time as they interact during a live event.

Note: To use the Login, Facepile and Comments plug-ins, your site must first have an application ID. You can get an application ID at registering your site. Once you have inserted the plugin placeholder into your Designer Pro or Web Designer page, choose Web Properties from the Utilities menu and in the Placeholder tab code, replace APP_ID in the script with your application ID.

In your chosen plugin's customization settings, enter your URL/domain name, width and height and display criteria for the relevant plugin and click the Get Code button.

The plugin code dialog displays iframe and XFBML code for the plugin. Click in the code you want and press Ctrl and C on your keyboard to copy it.

Click Insert in the Create New Widget: Facebook Widgets window.

Designer Pro 6 or Web Designer 6 displays a placeholder for your badge or plugin. 

Click and drag the placeholder to the location on the web page where you want it to appear.

If the badge or plugin is surrounded by too much white space within the placeholder, you can crop it to the actual badge or plugin size. Click on the placeholder then drag on the selection handles using the Select tool. Web Designer 6 crops the badge accordingly.

However you cannot resize the actual badge or plugin, because making it smaller than its actual size will truncate it, and enlarging it will create excess surrounding white space. To resize a plugin, reimport it specifying a different height and width. A badge cannot be reimported and resized.

Click Preview to view your badge or plugin.

Drag the Twitter widget from the Social Networking Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

The Select Your Widget Twitter page opens in the Create New Widget: Twitter Widgets window.

In the Widgets For... menu on the left hand side, click My Website.

Twitter displays a list of available widgets.

To create a widget that displays your most recent Twitter updates on your web page, click Profile Widget. 

In the Customize Your Profile Widget page, click Settings in the left-hand menu and enter your Twitter username.

Click Preferences to specify tweet preferences such as polling frequency for new tweets, number of tweets shown, scrolling options, and the display of avatars, timestamps and hashtags.

Click Appearance to specify colors for your widget's shell text and background, tweet text and background, and hypertext links. 

Click Dimensions to specify the widget's width and height, or to create a widget that can be resized automatically.

To create a widget that displays Twitter search results on your webpage in real time, click Search Widget. 

In the Customize Your Search Widget page, click Settings in the left-hand menu and enter the words or phrase that you want to search Twitter for in the Search Query box. Add a title and caption for your widget. The title will appear at the top of the widget and the caption directly underneath.

Click Preferences to specify search preferences such as polling frequency and looping options for new search results, number of tweets shown, and the display of scroll bars, avatars, timestamps, hashtags and top tweets.

Click Appearance to specify colors for your widget's shell text and background, tweet text and background, and hypertext links. 

Click Dimensions to specify the widget's width and height, or to create a widget that can be resized automatically.

To create a widget that displays your favorite tweets on your webpage in real time, click Faves Widget. 

Note: You have to have previously chosen at least one favorite tweet before you can create this widget.

In the Customize Your Faves Widget page, click Settings in the left-hand menu and enter your username, and a title and caption for your Faves widget. The title will appear at the top of the widget and the caption directly underneath.

Click Preferences to specify search preferences such as polling frequency and looping options for new search results, number of tweets shown, and the display of scroll bars, avatars, timestamps and hashtags.

Click Appearance to specify colors for your widget's shell text and background, tweet text and background, and hypertext links. 

Click Dimensions to specify the widget's width and height, or to create a widget that can be resized automatically.

To create a widget that displays lists of tweets on your webpage, click List Widget. 

Note: You have to have previously created and named at least one tweet list before you can create this widget.

In the Customize Your List Widget page, click Settings in the left-hand menu and enter your username, and a title and caption for your Faves widget. The title will appear at the top of the widget and the caption directly underneath.

Click Preferences to specify search preferences such as polling frequency and looping options for new search results, number of tweets shown, and the display of scroll bars, avatars, timestamps and hashtags.

Click Appearance to specify colors for your widget's shell text and background, tweet text and background, and hypertext links. 

Click Dimensions to specify the widget's width and height, or to create a widget that can be resized automatically.

Click the Test Settings button at the bottom of the Customize Your Widget page to see a preview on the right-hand side.

When you're happy with your widget, click the Finish & Grab Code button at the bottom of the Customize Your Widget page.

The widget's code is displayed in a box.

Click Insert in the Create New Widget: Twitter Widgets window.

Designer Pro 6 or Web Designer 6 displays a placeholder for your widget. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However, unless you specified 'auto width' when customizing your widget, you cannot resize the placeholder, because making it smaller than its actual size will truncate it, and enlarging it will create excess surrounding white space. To resize a widget, reimport it after specifying the width you want, or enable 'auto width' in the Dimensions menu item.

Click Preview to view your Twitter widget in action.