Social Network Links

Social icon setup in Allwebco web templates

30 x 30 Free Icons
Right click any of the icons below to save them to your computer. These icons are 30 x 30 pixels in white with a transparent background, so the background can be colored using css (see section below for css code).




Editing template icon links
See your template "help.html" for details on where the social links code is located and how to edit, or remove them if they are not desired. In the example below replace the allwebco twitter link (highlighted in red) with your twitter link:

Variable to edit in the "social-links.js" near the top of the file.

var twitlink = "https://twitter.com/allwebcodesign"

In some templates the links may be in the "footer.htm" or in one of the HTML pages. In this case edit the following highlighted link code:

<a href="https://twitter.com/allwebcodesign"><img src="picts/social_twitter.png" alt="Twitter"></a><br>


Social links location
In a few templates, the social icons are "floating" on the pages and can be easily moved. Edit the "#sociallinks" class in your .css file. Or search your .css file for "social" to find the style code. Your .css code will appear similar to the following if you have floating social icons:

#sociallinks {
width: 103px;
z-index: 8;
text-align: center;
position: absolute;
right: 8px;
top: 159px;
padding: 0px;
border: #C0C0C0 0px solid;
}


Social icons not showing on mobile devices
See pro footer social links on mobile for help.


Social icon colors, padding and margins
Search your .css file for "social" to find the section used for the icons. Some icon backgrounds are colored in the image file, and some have the code defined in the .css file that you can edit. The margin code is the space above, below and between icons. There may be a hover effect in the .css file that you can edit.


Creating icons
You can create your own icon images, search on-line for them or check out ICONSDB for a nifty on-line custom icon maker. Edit the image name in the "social-links.js" or "footer.htm".


Note for sites that include a mobile sub-site
In templates that include a mobile website inside a "mobile" folder, there is a variable for the social links icon folder "var socfolder". This variable is located in the "javascripts.js" for the main website and in the "header.js" for the mobile website. Read more about sub-sites.


Icon background color & css
In some templates the icons already have the background color set in the style .css file. Search in this file for "social" to locate the code. Look in your "social-links.js" for the icon code.

If your template does not include icon background colors you can add them. Using the transparent icons above on this page, add a class to each icon like the following:

<img src="picts/social-facebook-30x30.png" class="socicon" alt="Facebook">

Then add the following to your style .css file for the color, margins and padding:

.socicon { background-color: #3C599F; margin: 1px; padding: 0px; }

If you increase the padding to something like 10px you can make the icons appear larger like the following example. Editing the margin 1px will change the spacing around the icon.



Add your link to the icon HTML code like the following:

<a href="https://www.facebook.com/youraccountname"><img src="picts/social-facebook-30x30.png" class="socicon" alt="Facebook"></a>


Social network providers
Included in the templates are the following social network links. Click on the links to setup a free account with any or all of the following:

• Facebook
• Google+
• LinkedIn
• Pinterest
• Twitter

Adding social links to a website that has none

• CUSTOM ORDER: See Allwebco Custom Design & Setup Services.
• WIDGETS: See Tell-a-Friend & Share Scripts for widget recommendations.
• DO IT YOURSELF: Login to your Facebook, Twitter, LinkedIn or Google+ account (links above) and generate a link there or create a widget. Check in the help section of your account to see how to create the links.
• OPTION #1: Paste your generated code into any one of your HTML pages in the content area. To optionally locate this using CSS float code. See: adding a div element to place an item.
• OPTION #2: You can add these globally by including the code you generate into one of your .js files like the sidebar.js or other .js file. See adding new items to a .js file.

Related Links:
Wikipedia Viral Marketing
Add This
Share This