Add and Customize Social Icons in Weebly Site
Add Social Icons in Weebly Site
Weebly "Social Icons" element enables social elements in your Weebly site to help the visitors easily follow your social contents in Facebook, Twitter or YouTube. This element only allows to add the follow link and not the share link. Once drag and dropped on the content area users can click on the "Manage Icons" option to enable or disable one of the available social links. Weebly offers the following social icons:
You have many options to add social icons in Weebly site using default social element or embed code element:
- In the site header
- In the site content area
- In blog sidebar
- Using embed code element
In addition to this Weebly Pro users can add social icons element in site footer also. Below is an example of custom spinning social icons for Weebly, read on further to get the code.
Enable Social Elements in Weebly Site Header
In your Weebly account select the site you want to edit. Under "Design" tab you can see "Design Elements" to enable or disable social media icons. Once you enable the option you can see four default icons visible in your site header. Align your social icons by moving it up or down or else remove it if you don't want it. Click on the "Add more" option to enable more icons from the drop down list.
Enable Social Elements in Weebly Site Content
You also have an option to drag and drop a social icons element in your site's content area. Social Icons element is available under More elements tab.
Some of the Weebly themes support only four basic social button like Facebook, Twitter, LinkedIn and RSS feed as shown below.
Change your site's theme to the latest one in order to enable the complete list of social buttons which include Flickr, Pinterest, YouTube and much more. You can add only the icons you want and reorder the icons as you need.
Blog Sidebar Elements
If you add a blog page then you have an addition option to use Flicker badge and LinkedIn button in the blog sidebar. Twitter badge and Delicious linkroll elements available in the old interface were removed in the new interface.
Custom Spinning Social Icons for Weebly Site
Though you can add and remove social elements it is not possible to style the element as you need, making the default Weebly social icons set less attractive. Below is an example of spinning social icons on mouse hover.
In order to add custom social icons set, you need to prepare images for your social links with approximate size of 60 x 60px. Upload the images under "Design > Edit HTML / CSS > Assets > Upload File(s)". The URL of an uploaded image will be like below:
http://<Your Site Name>.weebly.com/files/theme/<Image Name>
If you want to add icons set on more than one page then add the following CSS code in "Design > Edit HTML / CSS > Assets > main_style.css". If you want to add it only on particular pages then add it under "Pages > Select Page > Advanced Settings > Header Code".
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
Then drag and drop an "Embed Code" element and add the below HTML code by replacing the image URLs with your own.
<img border="0" src="https://img.webnots.com/2013/04/facebook_social.png" /></a>
<img border="0" src="https://img.webnots.com/2013/04/twitter_social.png" /></a>
<img border="0" src="https://img.webnots.com/2013/04/pinterest_social.png" /></a>
<img border="0" src="https://img.webnots.com/2013/04/youtube_social.png" /></a>
<img border="0" src="https://img.webnots.com/2013/04/googleplus_social.png" /></a>