How to Add Facebook Like Box Widget With Social Sharing below each Post ?
Now Today i am going to tell you how to add a Fb like Box with Social button like Email Subscribe box,twitter and many more in a very easy way .
Demo
.........................................................................................................................................ADD SOCIAL WIDGET BELOW EACH AND EVERY POST.........................................................................................................................................
.........................................................................................................................................
Adding CSS - (1/2)
.........................................................................................................................................
- Login to blogger >>go to Template >Edte HTML >>Proceed >> Expand Widget Templates
- Now Find ]]></b:skin>
- and Just above it copy and paste Below code
#mdpost-likebox{display:block;min-height:250px}#post-likebox h2{font-size:30px;font-style:italic;font-variant:small-caps}#mdpost-likebox div.row{text-align:center;margin-bottom:10px}#mdpost-likebox img{display:inline-block}#mdpost-likebox .email{clear:none}#mdpostfblikebox{margin:10px 10px 0 0;text-align:left;float:left;overflow:hidden}.button,.emailbutton{background:#f7f8f9;background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888 !important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none !important}.button:hover,.emailbutton:hover{background:#f1f1f1;background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important}.widget-button{color:#AAA !important;display:block;font-size:18px;margin:30px auto;padding:8px 30px;text-align:center;text-shadow:1px 1px 0 #FFF;text-transform:uppercase;width:30%;font-weight:bold}.email{clear:none}.email{clear:both;width:50%;margin:10px 0}.emailform{position:relative;width:250px;background:#fff;margin:0 auto;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ddd}.searchinput,.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:none;background:none;font-family:georgia;font-style:italic;font-size:14px;color:#666}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:-1px;bottom:-1px;display:block;line-height:16px}.emailbutton{padding:8px !important}.emailinput{padding-right:70px !important;width:170px !important}.emailform, .emailinput { width: 98% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:auto; }
.........................................................................................................................................
Adding HTML - (2/2)
.........................................................................................................................................
- Find <div class='post-footer-line post-footer-line-1'/> If not found then find <p class='post-footer-line post-footer-line-1'> and Paste below code just above it
<b:if cond='data:blog.pageType == "item"'><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td width='50%'> <div id="mdpostfblikebox"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMYFACEBOOK&width=300&height=255&colorscheme=light&show_faces=true&border_color=%23e1e1e1&stream=false&header=false&appId=328967870473940" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300; height:255px;" allowTransparency="true"></iframe></div></td><td width='50%'><div id="mdpost-likebox"><h2>Do you Like this Article?</h2><div class="row"><div class="fb-like" data-href="https://www.facebook.com/MYFACEBOOK" data-send="true" data-width="450" data-show-faces="false"></div></div><div class="row"> <a href='http://feeds.feedburner.com/MYFEED' target='_blank' title='Suscribe to RSS feed'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YvaE8egmY-OZYZybWwiX_-It642vNDYRCsFbx_IU2QI7q7o-DKb0NXD6zK5KyhCmYtNWDkwOWRno-rCaHgurAfC7FPcRo567ljQaoZqAxbTkGFOm1X7zPpWKycK_PQHRAi0_tpW5-JGZ/s1600/mdRSS.png' alt="rss"/></a> <a href='http://twitter.com/MYTWITTER' target='_blank' title='Follow me on Twitter'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERZL0shrGA4iCCD20GRG9hwxjn6RrRaxwMlqoc5tCiXzhoqsvJNBICwgKAB0LxrFosTgIiE84749K1LimSMaKSe1n1X7oQxPQijoFkt4jCWIip71YN5ooImluhEiW86B7hZW4kb-VHeGb/s1600/mdTwitter.png' alt="twitter"/></a> <a href='http://www.facebook.com/MYFACEBOOK' target='_blank' title='Became Fan on Facebook'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFjoH0nWUB-MVhIVrJnHUwfVSTFk7d3a845hEpCkI-LWVa8FCDrqnhHavc3QiJSWbiYDDD3OlyLocEKwmmeJdLJXNMJw6vCSxwXIToLK5_9et7wYjqooy4kW6Z5PQzcvmUMzzQE0JO8rv/s1600/mdFaceBook.png' alt="facebook"/></a></div><div class="row"><h6>Get Subscribe to Free Email Updates!!</h6></div><div class="row"><div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="MYFEED" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="SignUp" title=''/></form></div></div><div class="row"> <small>*Your email address will not be shared with anyone.</small></div></div></td></tr></table></b:if>
REPLACE - ALL "MYTWITTER" WITH YOUR TWITTER URL
REPLACE - ALL "MYFACEBOOK" WITH YOUR FACEBOOK URL
REPLACE - ALL "MYFEED" WITH YOUR FEED URL
Now all Done you can Save your Template ..,if any question or problem them comment below
