Social Networking

Click and drag a selection of social networking widgets and plugins directly from three of the most popular social networking sites into your web pages.

This section describes how to add widgets and plugins from Facebook and Twitter that use real-time searching and updating to provide a constant feed of up-to-date instant information to your website.

AddThis widgets allow your users to instantly share your web pages with a huge selection of social networking sites.

Find the Social Networking widgets in the Content Catalog under Social Media.

Instagram Badges

Instagram is a mobile photo sharing app. Take a picture or video, choose a filter to transform its look and feel, then post to Instagram. You can share to Facebook, Twitter, Tumblr and more. This widget lets you add an Instagram badge to your webpage and link viewers to your Instagram profile. 
1
Import the Instagram badges widget from the Content Catalog. Make sure you are signed in to Instagram - if not you will be prompted to do so when the widget opens.
2
The Instagram widget opens in the Create new widget window. Select a badge size, highlight and copy (CTRL+C) the code, and click the Insert button.
3

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.

Twitter

Twitter widgets allow you to keep up-to-date with your own tweets, your favorite tweeters and topics, and any recent tweets that match a search word or phrase.

The widget below shows a Twitter Timeline widget.

1

Import the Twitter widget from the Content Catalog. Make sure you are signed in to Twitter - if not you will be prompted to do so. 

 

2

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

3

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. 

 

4
When you've clicked Create widget, copy the widget's code to your clipboard and click on the Insert button in the main Create New Widgets: Twitter Widgets window.
5

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.

6

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.

7

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. 

 

8

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

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

Enter the words or phrase that you want to search Twitter for in the Search Query box and then fill in the rest of the options  as described above in step 3. Then follow steps 4 and 5 to create the widget.



Twitter Buttons

The Twitter Buttons widget allows you to add a Twitter Follow Me button to your web pages in a selection of display styles.

When your website visitor clicks on the button, they are taken to your Twitter home page where they can click on Follow to begin following you.

An example Twitter Follow Me button is shown below - click on it to begin following Xara.
Follow XaraGroup on Twitter
1

Import the Twitter Buttons widget from the Content Catalog. 
2
In the Create New Widget: Twitter Goodies window, type your Twitter username/email and password, then click Sign In. Or click the Join Today link in the top right of the window to register for a Twitter account if you don't already have one.
3
The Create New Widget: Twitter Goodies window displays a selection of button styles.

Click a button to display its code, then press Ctrl and C on your keyboard to copy the button code.
4
Click Insert at the bottom of the Create New Widget: Twitter Goodies window.
5

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.

Facebook Plugins

Facebook social plugins let you add a range of Facebook features to your web pages, including easy sharing of your web content with other Facebook users, log in and registration on your site, the capture and display of user feedback and comments on your site and other sites, and personalized recommendations for your pages that may be of interest to other users.

Below is an example of a Like button, which allows Facebook users to say they like www.xara.com.
1

Import the Social Networking widgets folder from the Content Catalog. 

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

2

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.

3

Click Insert in the Create New Widget: Facebook Social Plugins window.

The program displays a placeholder for your plugin. 

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

If the 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 MX Premium 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.

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

Facebook Badges

You can create a Facebook Badge widget that displays updates in your profile and your photos, pages that you like and applications or pages you have created on Facebook yourself.

The Profile widget below shows the latest information for the Xara Facebook page.

 

Xara

Promote Your Page Too
1

Import the Facebook Badges widget from the Content Catalog. 

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

 

2
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.

3

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.

4

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.

 

5

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.

6

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.

7

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.

 

AddThis

AddThis allows your website visitors to easily share your website content across a wide range of social networking, bookmarking and blogging sites. Users can instantly create a link to your page and post the link on the website of their choice, including Facebook, Twitter, Google, StumbleUpon, MySpace and LinkedIn, or any one of over 300 other services and tools.

AddThis also provides sharing analytics, so you can view real-time or historical sharing data, such as how your content is shared and who is sharing it. You can also see how much web traffic to your site is generated as a result of each shared link.

The example below shows an example AddThis button bar with Tweet This, Send to Facebook, Save to Favorites, Email and Bookmark & Share buttons.
1
Import the AddThis widget from the Content Catalog. 
2
In the Create New Widget: AddThis window, choose an icon display style and click Get AddThis.
3
In the Register pop-up, enter your email and password then click Register. Or click Sign In if you already have an AddThis account.
4
The code for your AddThis widget is displayed in the Sharing Tools page. You can now either:
  • 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.
or
  • Click Customize to choose some more display options.
5
If you clicked Customize, the Create New Widget: AddThis window now displays some platform options. Ensure that 'Website' is selected here.

You can also see a preview of your widget and its code displayed underneath.

To customize the widget's style, click the 'More options' link at the bottom left of the window to display some additional styles.
6
Click to select a new display style from the expanded Style list on the left. As you click a new display style, the widget code updates.

Click the Address Bar Sharing checkbox to monitor how many times your web page URL is copied by a website visitor and then shared.
7
When you have finished customizing your widget, click Insert at the bottom of the Create New Widget: AddThis window.
8

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.

9

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.

10

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.

11
Your website visitors can customize the display of the Bookmark & Share list by clicking the Settings link in the bottom left of the list, as in the example below.
12
The AddThis Settings dialog is then displayed in a new window in the user's browser, as in the example below. This allows your website visitors to customize the Bookmark & Share list of websites to display only their top 10 favorite sharing sites when they hover the mouse pointer over the Bookmark & Share button.

To configure this list, your users can click a website in the All Available Services list (or filter the list for it by typing the site name in the search box at the top), click the Add button then the Save button. Users can also remove any site from the Favorites list by clicking it, clicking the Remove button then the Save button.

The next time your user visits your site, their top 10 sites are displayed in the short Bookmark & Share list when hovering over the button.


Pinterest

The Pinterest widget adds a Pin it button to your site allowing visitors to add a visual bookmark for images or photos for inclusion on their own Pinterest boards. You can choose to add a Pin it button to a particular image or photo, any image or photo on a page or else have the viewer make their own choice by hovering over an image. 
1
Import the Pinterest widget from the Content Catalog. 
2
The Pinterest Widget builder opens.
3
Follow the instructions in the Pinterest widget builder, and then click "Build it". Then simply click on the code to higlight it, copy the code (CTRL+C) and then click on the Insert button on the Widget builder to insert the Pinterest button into your webpage. 
4

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.