Below are the steps to create a Social Media Widget for your Top Producer Website containing icons and links to your Social Media sites. The code that is generated can be added to the HTML of any Top Producer Website page, or added to a Custom Message Web Box.
Choose your Social Media Icons
From the Select an Icon drop down menu at the top of the Social Media Widget Creator, select the social media site you wish to add.
The currently available options are:
|
|
|
|
For each social media type there are instructions on how to correctly link to your specific account. This will appear below the Add/Update and Remove Buttons.
Important: Links will not function correctly unless you edit the path to include your specific username or url for your Social Media Site.
Once you have selected the social media site you wish to add and also updated the path to your profile click the Add/Update button. You will see the social media site has been added under the “Buttons Added so Far” section on the right of the page.
You can add additional social media sites by repeating the steps above. Each time you click Add/Update the new social media site chosen will be added to “Buttons Added so Far”.
Select the Widget Position Options
Once you have added your desired sites select the widget position and button size.
| Position Options* | Button Size Options (pixels) |
|---|---|
|
|
Position Options Overview:
- Web box: Use this option if you want the widget to display in a normal web box. The widget will be restricted to the maximum width of the web box. The Hide Containing Web box Checkbox must be UNCHECKED for this to work.
- Top Right/Top Left: This will cause the widget to appear in the top left/right corner of the window viewing the website. It will remain in the same place on the screen regardless of scrolling, or page size. This option can be placed into the main body of any page, or added to a web box in conjunction with the Hide Containing Web box checkbox ticked.
- Top/Bottom Middle: The widget will appear at the very top/bottom of the website, centered. The buttons will be partially covered by the top/bottom of the browser, but will jump out when rolled over. This option can be placed into the main body of any page, or added to a web box in conjunction with the Hide Containing Web box checkbox ticked.
- Bottom Right/Left: This will cause the widget to appear in the bottom left/right corner of the window viewing the website. It will remain in the same place on the screen regardless of scrolling, or page size. This option can be placed into the main body of any page, or added to a web box in conjunction with the Hide Containing Web box checkbox ticked.
- Content-Right/Left Align: This code can be pasted into the html of any page. It will be aligned to either the right or left of the page and will automatically wrap any text positioned below it around it.
- Content-Center Align: This code can be pasted into the html of any page. The widget will be displayed in the horizontal center of the page wherever the code is added. The Hide Containing Webbox option must be unchecked for this to work.
Additional options:
- Hide Containing Webbox Checkbox: Checking this will hide the webbox that the widget is contained in. This prevents the display of an empty webbox on the page. Only use this feature if pasting the code into a custom webbox.
- Hide Entire Sidebar Checkbox: Checking this will hide the entire sidebar on the page this widget appears, including all webboxes and submenu items. This is usually used for pages that do not have a sidebar normally, such as home pages with large flash elements, or External Content pages that require the entire width of the site to display properly. Only use this feature if pasting the code into a custom webbox.
Generating the Widget Code
When you are finnished making your selections click on Generate Widget Code button. This will create the required code in the Widget Code text box.
You will also see a preview of the widget at the bottom of the page.
Copying the Widget Code
You will now need to copy the code:
- Using the Keyboard: To copy the code using your keyboard, click in the code area and press the Control Key and “A” at the same time. This will highlight the code, then press the Control Key and “C” at the same time and this will copy the code. You can then paste it by press the Control Key and “V” at the same time.
- Using the Mouse: To copy the text using your mouse simply right click inside the code and choose Select All this will highlight all of the text, then right click again and select Copy. When you are ready to paste the code, right click where you would like the code to appear and chose Paste.
Adding the Widget to your Top Producer Website
There are three options for displaying the Social Media Widget on your Top Producer Website. These are also the three places you can paste the Widget Code:
Important: If pasting code into a Custom Message Webbox, it is required that you log in to your Website Control Panel using Internet Explorer. Other browsers may not function as expected.
- HTML of Any Top Producer Website Page: You can copy/paste the code into the HTML of any Top Producer Website page.
- Web box (Visible): To make the widget appear in a normal web box, choose the “Web box” Widget Position. Do not check Hide Containing Webbox or Hide Entire Sidebar. Add a new Custom Message Web Box to your website. While in design view enter some text that you will be able to easily find when switching to html code view (eg. “xxxxxxxxxxxxxxxxxx”). Switch to code view and replace your text with the widget code. Add this web box to any number of pages.
- Web box (Invisble): To make the widget appear on the site, but have the empty containing web box be hidden, check the Hide Containing Webbox checkbox. Add a new Custom Message Web Box to your website. While in design view enter some text that you will be able to easily find when switching to html code view (eg. “xxxxxxxxxxxxxxxxxx”). Switch to code view and replace your text with the widget code. Add this web box to any number of pages.
Tip: For for more information about creating and editing pages on your Top Producer Website, visit the Websites Pages and Content section. For more information about Web Boxes, visit the Customizing Your Site section.