How to use(include) lightning component in visualforce page(salesforce)

Steps :
Step 1: Develop the lightning component which you need to include/display in vf page.
Lightning Component :LightningComponentInVF.cmp
<aura:component >
    <ltng:require styles="{!$Resource.SLDS100 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <div class="slds">
         <h1>Lets see how to include this component in visualforce Page</h1>
    </div>
</aura:component>
Note : Replace "SSLDS100" with the static resource which holds lightning files.
Step 2: Create a lightning app to hold this lightning component.
Lightning app : LightningComponentInVFPage.app
<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="ksk:LightningComponentInVF"/>
</aura:application>
Imp Note : In order to make this app available for vf page ,we need to give global access for this and also need to use "ltng:outApp" interface as shown in the above app code.
Step 3: Create a visualforce page and use this app in it.
Visualforce Page : LightningComponentInVfPage
<apex:page standardStylesheets="false" showHeader="false" sidebar="false">
<!-- include the lightning.out.js file -->
    <apex:includeScript value="/lightning/lightning.out.js" />
<!-- Provide a section/div for lightning component-->
    <div id="lightningComponentDiv" />
    <script>
        $Lightning.use("ksk:LightningComponentInVFPage", function() {
          $Lightning.createComponent("ksk:LightningComponentInVF",
          {},
          "lightningComponentDiv",
          function(cmp) {
          });
        });
    </script>
</apex:page>
Note : Replace "ksk:LightningComponentInVFPage" with your lightning app and also replace "ksk:LightningComponentInVF" with your lightning component in the above vf page code.
Output : Once you run the vf page,the output will be like this.