In our previous two posts we have discussed about how to Create Free Weebly Website and how to Learn Web Development Using Weebly. In today's post we will present a step by step guide to integrate a plugin in Weebly website. If you want to extend the functionality of your website by integrating a plugin in you Weebly Website or having a problem in integrating a plugin in Weebly Website then this step by step guide will be helpful for you.
What is a Plugin?
A plugin is an independent set of files or block of code which can be integrated in a website to extend the functionality of a website. Some examples may include Header Slideshow Plugin, Mailchimp Newsletter Plugin, Twitter Feed Plugin, Disqus Comments Plugin, Facebook Comments Plugin etc. The plugins work independent of the other pieces , sections or elements of the website.
Where to Get these Plugins?
Both free and premium plugins are available on the internet. Mostly jQuery plugins are used on different websites. There are many websites which provide free jQuery plugins like www.jqueryscript.net/, jquery-plugins.net/ etc.
Steps To Integrate A Plugin In Weebly Website
So after having a basic introduction of plugins and how to get free plugins we will now present basic steps to integrate a plugin in Weebly Website.
Download A Copy of Your Plugin
So in first step, select your favorite plugin that you want to implement in your Weebly website and download a copy of that plugin. You will get a folder containing all necessary files and resources (Fonts or Images) which will be uploaded in your Weebly editor.
Go into Html / Css Editor
After getting all the required files and resources, now is the time to upload them in Weebly Editor. Go in to your Weebly Website Editor > Design > Edit Html / Css. For clarification see following screenshot.
Uploading Files in Weebly Code Editor
Inserting Main Html Markup of Plugin
Now is the time to insert the main html code of your plugin in different pages of your website. Html markup can be added into the required page either by using "Embed Code" element of Weebly Editor or by editing the html code of Header Type (used by the page) in Weebly Code Editor. Copy the code from your index file (file name may be different) i.e main html markup of the plugin and paste it where you want the plugin to be inserted.
Referencing Your Assets in Html Markup
<link rel="stylesheet" href="css/jquery.cslider.css" />
<img src="images/Slider01.png" alt="image01" width="320">
Correct Ways In Weebly
<link rel="stylesheet" href="/files/theme/yourpluginfolder/css/jquery.cslider.css" />
<img src="/files/theme/yourpluginfolder/images/Slider01.png" alt="image01" width="320">
After completing all above mentioned steps, hopefully your plugin will work and will make your website more professional. We have tried to list all possible steps and difficulties that may come while integrating a plugin in Weebly website. If you have any question or problem in integrating a plugin in Weebly Website, comment it below.