Social Network Icons:

This feature allows you to automatically create links to your social network sites, such as Facebook, Twitter, and Linkedin. Many customers have asked for an easy way to create social network icons, and this new system definitely makes it easy! If you look up at the top right of SiteRightNow.com, you will see two icons for Facebook and Twitter. These link to SiteRightNow's Facebook page and Twitter feed.  We currently do not use any of the other social networking sites, so in our case we just displayed those two.  

I made a programming decision to offer up to 6 social networking sites. I didn't think that most people would have more than 6 they want to put on their website, but if I was wrong, let me know, and I will consider adding additional boxes to allow for more. You can contact me at help@siterightnow.com I think for most users, they will link to the big three, which are Facebook, Twitter, and Linkedin.  YouTube is available if you want to link to your YouTube channel. Google Plus is also popular.

TIP: Did you hide your header and your social network icons disappeared? If you would like the icons to always show even when you header is turned off, use the option at the bottom of the Social Icon section to ALWAYS SHOW the icons even when the header is turned off.  I recommend using the RIGHT, LEFT, or BOTTOM locations if you choose to always show the icon bar.

The orange box above is located at the bottom of your header control panel screen. It's easy to use. Simply choose your social network in the first menu (such as Facebook, Twitter, or Linkedin), and then paste in the link that goes to your social network page.  You will see how this is setup for our own SiteRightNow.com links to our Facebook page and our Twitter page.

To get your page link, I recommend opening up a new window in your browser and pulling up your Facebook page (or other social network page) and then highlight the full address in your browser's address bar and use your browser's copy and paste commands. Here's how:

• With Windows first highlight the complete address (URL) with your mouse and then right click the highlighted text and choose COPY. You could also use the keyboard combination of CTRL C to copy the highlighted text.
• On a Mac, first highlight the complete address (URL) with your mouse and then hold down CTRL and click COPY. Or use the keyboard combination COMMAND C.
• Then go back to your control panel screen and click in the appropriate PASTE LINK box. Then use your browser's paste command to paste in the link address. I explain below how to paste on Windows and Mac
• On Windows paste by right clicking and selecting PASTE or using the keyboard combination CTRL V.
• On Mac paste by holding down CTRL and selecting PASTE or using the keyboard combination COMMAND V.

TIP: The control panel will only display the icons where you filled in something in the PASTE LINK box. All empty boxes will be ignored.

I included all of the icons that I had available. If you know of a different social network I don't have in the list, please let me know at help@siterightnow.com, and I will see if I can add it to the system.

ICON BAR LOCATION:

Choose where you want your Social Icon Bar to show on the screen:

Right side of browser window (default): This is what I'm using on the SiteRightNow.com site. The icons will attach themselves to the right edge of your browser window and won't move with the page. They will stay attached to the browser window edge. If you reduce the size of your browser window, the icons will move over as well.

TOP of browser window: This will position your icon bar near the top edge of your browser window. Note that the icons do not attach themselves to the browser edge when located at the TOP. The reason for this became apparent after experimenting. It looked much better to have the icons stay with the header when scrolling instead of staying on top of text that you are scrolling. So, the position will stay the same on the header no matter where you scroll. Use the Distance from Screen Edge setting explained below to move the icon bar up and down on your header area.

Left side of browser window: This attaches the icon bar to the left edge of your browser window. The icon bar will stay attached to the window's edge as you scroll. 

Bottom of browser window: This will position your icon on the bottom edge of your browser window. The icon bar will stay in position at the bottom edge as you scroll.

Icon Bar Position: This option lets you control where to position the icon bar on the side of the screen you selected. Let's say you selected RIGHT as the location and you want to show the icon bar about half way down on the right side. Use a setting of 50 to position it exactly half way down.  The numbers under the position menu are percentage of the browser window, so a setting of 50 is really 50% which would be exactly half way. If you want the icons at the very top of the right side, you would choose 0. If you want them close to the very bottom of the right side, you may choose 90. TIP:  The position you choose is where the icons start drawing. You would need to leave yourself enough space for the icon bar. Starting them at 100 wouldn't leave you any room, but starting them at 90, may give you enough room to fit. If you choose 50 and expect the bar to center, it won't. That's where the bar STARTS drawing, so you may need to choose a setting such as  40 to start drawing further over depending on the number if icons you are displaying.

Let's say you selected TOP under location.  Changing position would move the icon bar left and right across the top edge of your browser. The default will be 50 starts drawing the icon bar at the mid way point of the top edge. Changing it to a lower number such as 30, would move it further over to the left, and changing it to a higher number such as 80 would move it further over to the right.  

Distance for Edge of Screen: This works hand in hand with the icon bar position choice to tell the control panel where you want your icon bar.  This is another feature I came up with during experimenting. I was trying out the TOP location where it puts the icon bar across the top edge of the browser window. I noticed I had some extra room on my header and I thought it would be cool to move the icon bar into that spot. With this setting, I moved the icon bar down 40 pixels into the open spot.  Whatever number you choose here will push the icon bar away from the window's edge.  I set a default of 6 pixels which looked good to me in most cases. If you want it right up to the edge, change it to 0 pixels.

Mouse Over (Hover Effect): One of the cool things you can do with CSS (Cascading Style Sheets) is to add a hover effect when you mouse over text or a picture. By default, the hover effect is turned on. When you mouse over the icons they appear to move. You can adjust how much they move by changing the number of pixels in the selection box.  The default is 6 pixels which looks good to me in most situations. If you don't want the icons to move, then just turn off the hover effect using the on/off box.

Icon Size: This controls how large or small your icons will appear in the icon bar. The default setting is 32 pixels which is the native size of the icon graphic. You can shrink or enlarge the icons as desired.

Show On: You have a choice of showing your icon bar on all pages of your website or just the home page. I thought that in many cases, people may just want to show the icons on their home page, and it may get in the way on other pages, so I gave this option. The home page seems like the most important place to show the social network links, but it's up to you. On SiteRightNow.com, I'm showing them on all pages.

Hide Icons With Header: This is a handy option if you decide you want to always show the icons even on pages where you hide the main header. The default is to hide the icons when the header is hidden. Select ALWAYS SHOW if you want to show the icon bar even when you hide the header. I recommend using the RIGHT, LEFT, or BOTTOM icon bar locations if you decide to do this. The TOP location is designed specifically to work with the header.

Go Back to the TOP and select another left side menu to continue with more of Mitch's Tips