Blog website me facebook like page box ko add karne se fan followers ko increase kar sakte hai. Aur bahut sare blog per facebook like page box add hote hai. Basically wo sirf Fan follwers ko badane ke liye add kiya jate hai. taki jab facebook page per khoi post publish kare to jayda se jayda logo ko notification mil sake.

Blog website me facebook like page box Kaise lagaye.


Me yaha per apko 2 type ke facebook like widget provide kar rha hu. In me se ek blog floting bottom facebook fan page, aur dusra aap khi bhi use kar sakte hai. To Chaliye jante hai. Blog website me Stylish facebook like page box kaise add kare. Complete Guide.

2 different style facebook like page box design for blog.

Blog me facebook like widget ko add karne ke liye niche diye gaye sabhi steps ko follow kare.



How to Floting facebook like page box widget.

how to add floating facebook like box in blogger

Step 1.
  1. Sabse phale apne blog dashboard me theme per click kare.
  2. ab edit html per click kare.
  3. Ab templete par click karke Ctrl+f Press kare.
  4. Aur search box </style> ko seach kare.
  5. Ab</style>ke piche is code ko paste kar de.

#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;

animation-duration: 1s;
-webkit-animation-duration: 1s;

animation-timing-function: ease;
-webkit-animation-timing-function: ease;

visibility: visible !important;
}

@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}

@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}


Step 2.
  1. Ab Search box me </body> type karke enter kar de.
  2. Aur ab </body> piche niche diye gaye css code ko paste kar de.
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide('open-fb')' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/msdesign.rtml' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmsdesign.rtml&width=187&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>

function show(target) {
document.getElementById(target).style.display = 'block';
}

function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>

Coustomization.
  1. 2nd Wale code me apne page ya profile ke link  https://www.facebook.com/Sultansingh ke jagah per add kare.
  2. Finally ab Save templete per click kar de.



Is traike se blog website ke bottom me facebook like page box ko add kar skate hai.

Blog me sider me facebook like page box kaise add kare.

Blog ke sidebar yaha top, Down me facebook like widget ko kaise add karna bahut assan hai. Niche diye gaye sabhi step ko follow karke facebook like box ko add kar skate hai.

Step 1

  1. Sabse phale apne blog ke dashboard me layout per click kare.
  2. Ab aap jah bhi khi facebook like page box ko add karna cahte hai. wha add Getget per click kare.
  3. add facebook like box in blogger
  4. Ab new window me htmt/javascrift per click kare.
  5. Ab niche diye gaye css code ko box me paste karke save button per click kare.


<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like-box" data-href="https://www.facebook.com/blognetbook/" data-width="300" data-colorscheme="light" data-show-faces="true" data-stream="false" data-header="false"></div>
Customization.
  1. blognetbook ke jagah per apna page ka url add kare.
  2. Aur width 300 ke jagah per apne hisab se arenge kar skate hai.
IS traike se blog website me facebook like page box ko add kar skate hai. Aur blog me facebook like widget ko add karne ke bahut fayde. becouse jo apke page ko like karta hai. Wo ek trah se apke page ke subscriber ban jate hai. Aur jab bhi aap apne facebook page per post ko publish karoge. To Unhe post ka notification mil jata hai Aur wo post ko read karne ke liye present ho jate hai.
Ye blog ke traffic badane ke best way hai. Aur lagbag sabhi blogger facebook like page box ya facebook like widget ko apne blog me add karte hai.

Asha karta hu apko ache se samjh aha gaya hoaga. Blog website me facebook like page box ko kaise add karte hai. Aur agar apko facebook like wiget ko add karne me khoi bhi problem ho to hame comment karke bate skate hai. Aur post ko others blogger ke sath jarur share kare.