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:

  • Facebook
  • Twitter
  • Google+
  • YouTube
  • LinkedIn
  • Flickr
  • Pinterest
  • Vimeo
  • Yahoo!
  • RSS
  • Mail
Adding Social Icons in Weebly
Adding Social Icons in Weebly

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 Header
Enable Social Elements in Weebly Header

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.

Enable Social Elements in Weebly Site Content
Enable Social Elements in Weebly Site Content

Some of the Weebly themes support only four basic social button like Facebook, Twitter, LinkedIn and RSS feed as shown below.

Partial Social Elements in Weebly
Partial Social Elements in Weebly

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.

Complete Social Elements in Weebly
Complete Social Elements in Weebly

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.

Social Elements in Blog Sidebar
Social Elements in Blog Sidebar

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“.

<style type="text/css">
p#socialicons img{ 
-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;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

Then drag and drop an “Embed Code” element and add the below HTML code by replacing the image URLs with your own.

<p id="socialicons">
<a href="https://facebook.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/facebook_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://twitter.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/twitter_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://pinterest.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/pinterest_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://youtube.com/user/webnots">
<img border="0" src="https://img.webnots.com/2013/04/youtube_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://google.com/+WebNots">
<img border="0" src="https://img.webnots.com/2013/04/googleplus_social.png" /></a>
</p>

Other than social icons element, Weebly also allows to add social sharing icons of Facebook and Twitter on blog posts.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

5 thoughts on “Add and Customize Social Icons in Weebly Site”

Leave your response.

  1. Thanks for this very cool script and customization! After some time, I’ve finally gotten it to work (I’m a complete noob at CSS). I’m curious now how/where to add an target attribute (blank) so that the social links open in new tabs. I’ve tried placing a target attribute at several places in the html code but it always messes up the link or makes the logo disappear. Any help would be much appreciated!

    Reply
  2. once you paste the URL into the weebly social media URL slot what do you do to finish attaching the social media sites to your weebly website?
    Basically I don’t know whats the next step after pasting the URL in order to finish authenticating the link
    any help would be greatly appreciated

    Reply
    • You don’t need to do anything other than pasting your social user URLs. (For example, you need to add your channel URL for YouTube). You are not authorizing to post on your social profile, this is kind of follow us links that users can view your social updates.

      Reply

Leave a Comment