The program displays an Instagram badge on your webpage. 

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

You cannot resize the badge, because making it smaller than its actual size will truncate it, and making it larger will create excess surrounding white space.

To resize the badge, return to the configuration options for your widget and choose a smaller or larger display style. You can do this by double clicking the badge in the program. When the Create New Widget window reopens, click another display style, highlight the code, copy it (CTL+C) as before and then click Insert at the bottom of the Create New Widget window.

Click Preview to view your widget.

Drag the Twitter widget from the Social Networking Widgets section of the Page Elements folder in the Designs Gallery on to your web page document. Make sure you are signed in to Twitter - if not you will be prompted to do so. 

The Twitter Settings page opens with the Widgets dialog. Click Create new on the top right of the panel. 

To create a widget that displays a Twitter feed on your web page, click on the User timeline tab to configure a user widget.

In the Options field, enter the Twitter username, this could be your own or another Twitter feed.

Complete the remaining Options fields to choose the height of the widget, the theme shade, and specify the web address of the site(s) where you will be embedding the widget. Your choices will be displayed in the Preview panel.

When you're happy with the selection click on the Create Widget button. 

Now back in your web document you'll see that a widget placeholder has been created. Drag the placeholder into position and then click Preview to see the widget in action.

To create a widget that displays your favorite tweets on your webpage in real time, click the Favourites tab. 

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

Fill in the favourites username and the other options as descibed above in step 3. Then follow steps 4 and 5 as above to create the widget.

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

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

Fill in the list name and the other options as descibed above in step 3. Then follow steps 4 and 5 as above to create the widget. 

The program displays a placeholder for your Twitter button widget. 

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

You cannot resize the widget, because making it smaller than its actual size will truncate it, and making it larger will create excess surrounding white space.

To resize a Twitter button widget, return to the configuration options for your widget and choose a smaller or larger display style. You can do this by double clicking the placeholder on your web page in the program. When the Create New Widget: Twitter Goodies window reopens, click another button display style then click Insert at the bottom of the Create New Widget: Twitter Goodies window.

Click Preview to view your widget.

Note: When you click the Twitter Follow Me button while previewing your page, you will only see the Follow button on your home page if you have signed out of Twitter.

Open the Social Networking widgets folder from the Page Elements section of the Designs Gallery and drag the Facebook Plug-ins widget on to your web page..

The Facebook Plug-ins page opens in the Create New Widget: Facebook Social Plug-ins window.

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 Send Button allows your users to easily send your content to their Facebook friends
• The Comments plugin lets users comment on any piece of content on your site
• 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 Registration plugin allows users to easily sign up for your website with their Facebook account
• The Facepile plugin shows the Facebook profile pictures of the user's friends who have already signed up for 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.

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

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.

You can edit and update the widget contents at any time by double clicking on the placeholder

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

The program 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. The program 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.

• Click Insert at the bottom of the Create New Widget: AddThis window to insert the AddThis widget into your web page. Go to step 8.

• Click Customize to choose some more display options.

The program displays a placeholder for your widget. 

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

You cannot resize the widget, because making it smaller than its actual size will truncate it, and making it larger will create excess surrounding white space.

To resize an AddThis widget, return to the configuration options for your widget and choose a smaller or larger display style. You can do this by double clicking the placeholder on your web page in the program. When the Create New Widget: AddThis window reopens, click the Get AddThis tab at the top of the window to return to the Sharing Tools page. Choose another display style then click Insert at the bottom of the Create New Widget: AddThis window.

Click Preview to view your widget.

The example below shows a larger-sized widget, with Send to Facebook, Tweet This, Print, Save to Favorites and Bookmark & Share buttons.

Using this widget, for example, your website visitors can share your web page with Facebook and Twitter by clicking on the relevant button, which redirects them to sign in to Facebook or Twitter. An automatically generated link is displayed once they sign in, which they can then post on their Facebook page or tweet on Twitter.

Clicking the Print page displays a Print dialog where users can choose printing options and then print your web page. The Favorites link automatically adds your page to the user's Favorites list in their browser.

Using the Bookmark & Share button (in this example, the white cross on the red background), your website visitors can bookmark and share your page on the site of their choice. By hovering the mouse pointer over the button they can click a site from the pop-up list or click the 'More...' link in the list (highlighted with the red rectangle in the example below) to display more than 300 other site options. Alternatively clicking on the Bookmark & Share button shows the list of sites in full, which you can filter by typing in the site name in the search box at the top.

When your users click their chosen site, they are prompted to sign in and can then paste the automatically generated link, similar to Facebook and Twitter.

Every time that a button in your widget is clicked, and your page is shared, printed or emailed, the count in the 'number of views' box increases by 1. You can view detailed analytics for your AddThis widget by double clicking the placeholder on your web page in the program. When the Create New Widget: AddThis window reopens, click the Analytics tab at the top of the window. This is usually displayed automatically when you reopen the Create New Widget: AddThis window. The Analytics page displays in-depth analytics reports and alerts for your widget.

The program displays a placeholder for your Pinterest button. 

Click and drag the placeholder to the location on the web page where you want it to appear. You cannot resize the actual button, because making it smaller than its actual size will truncate it, and enlarging it will create excess surrounding white space. To resize a button, reimport it specifying a different height and width.

Click Preview to view your button.

You can edit and update the widget contents at any time by double clicking on the placeholder.