Widget Guide

Social Networking

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

This section describes how to add widgets and plugins from Facebook, Twitter, Instagram and Pinterest.

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.

 

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.