Code to add social media icons to your websites
Most simple code to add social media icons to your website footer, sidebar or anywhere.
Their are many plugin available which can do the same job, but they will just increase more load on your website. So, better to add custom one with no extra http requests.
First of all, Find and download some catchy social media icons png files. You can also get some of them from: icomoon or Flat icon or icon finder
After downloading the icons, upload them into your website. (Either use build-in uploader or upload from your website cpanel).
For Wordpress,
1. Go to your wordpress dashboard and the click on Media button from left hand side menu. Now, upload all the icons. After uploading, copy the icons url
2. Go to Appearance> Widgets from dashboard. Now find Text widget and drag it into your footer or sidebar space. Give the Title (if you want) Examples: Follow Us, Join Our community, Our Social Media Link's.
3. Now, Add the following html in the blank Text Area:
Change all the orange colour text marked with your social links and Social icons URL.<div><a href="twitter link" target="_blank"><img title="Twitter" src="twitter icon URL" alt="Twitter" width="35" height="35" /></a> <a href="Facebook pagen url"target="_blank"><img title="Facebook" src="Facebook icon url" alt="Facebook" width="35" height="35" /></a> <a href="mailto:your email addres" target="_blank"><img title="Email" src="Email icon url" alt="Email" width="35" height="35" /></a><a href="RSS feed url" target="_blank"><img title="RSS" src="RSS icon url" alt="RSS" width="35" height="35" /></a></div>
Please note: All the url must start with https:// or http:// You can also add more if you want by simply adding below html code after any </a> tag
After editing everything, Press on Save button and check it on your website. If you get any problem then comment below. I will try to resolve it.<a href="link"><img title="Give Title" src="icon URL" alt="Give type" width="35" height="35" /></a>
For other website, the code is similar, just place on specific HTML document.
For any query comment below and bunch of us will try to help you.
Comments
Post a Comment