Blog Me Smart Slider Facebook Like & Follow Box Kaise Add Kare

Hi friends aapne apne blog par bahut se alag alag design ke facebook popup like box, facebook like widget box and facebook follow box use kiye honge. But aaj is post me mai aapko facebook like and follow service ke liye facebook smart slider ke bare me bta chuka hu. Jiske bare me mujhse bahut sare visitor puch chuke hai.

Add facebook smart slider like box in your blog

Maine apni pichli post Blogger Me Facebook Popup Like Box Widget Kaise Add Kare me facebook pop up like box ke bare me btaya tha. But is article me left side me slider hone wale facebook like and follow facebook slider ke bare me bta raha hu. I sure ye facebook follow box aapko bahut pasand aayega.

Jab bhi koi aapki website ko open karega to scroll karne par left side me ye facebook like box show hoga. Iski sabse achi bat ye hai ki ye visitor ke “Don’t show again” par click karte hi fir se show nahi hoga.

Agar user apne browser ki history cookies and chaching delete karke fir se aapki site ko open karega to hi ye facebook like box open hoga.

Blog Me Facebook Smart Slider Like & Follow Box Kaise Add Karte Hai?

Yaha mai aapko jo code bta raha hu aapko bas wo code copy karke apne blog par kahi bhi kisi bhi widget me add karna hai. Ye slider facebook like box WordPress, Blogger and other sabhi websites par work karega. Aap bhi ise apne blog par use kar sakte ho.

Step 1:

Sabse pahle aap ye code copy kare.

<style>
 #ej-plugin-socialslideout {
  overflow: hidden;
  font-family: Roboto, sans-serif;
  font-weight: normal;
  width: 320px;
  display: none;
  height: 200px;
  padding: 0px;
  background-color: #fff;
  position: fixed;
  bottom: 30px;
  left: 60px;
  -moz-box-shadow: 1px 0px 6px #555;
  -webkit-box-shadow: 1px 0px 6px #555;
  box-shadow: 1px 0px 6px #555;
  color: #ffffff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  z-index: 9999;
 }
 #ej-plugin-socialslideout p a#ej-plugin-socialslideout-close {
  color: #fff !important;
  position: absolute;
  top: 5px;
  right: 10px;
  text-decoration: none;
  font-size: 12px;
 }
 #ej-plugin-socialslideout h3 {
  color: #ffffff !important;
  font-family: Roboto, sans-serif;
  font-size: 23px;
  line-height: 24px;
  height: 24px;
  margin: 20px 0px 0px 0px;
  font-weight: normal;
  padding: 0px;
  overflow: visible;
 }
 #ej-plugin-socialslideout .ejp-ss-top-box {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
 }
 #ej-plugin-socialslideout .ejp-ss-top-box.ejp-ss-facebook {
  background-color: #1365a1;
 }
 #ej-plugin-socialslideout .ejp-ss-btn-container {
  overflow: visible;
  position: absolute;
  left: 80px;
  width: 225px;
 }
 #ej-plugin-socialslideout .ejp-ss-btn-container.ejp-ss-facebook {
  margin: 27px 0 0 5px;
 }
 #ej-plugin-socialslideout .ej-ss-slider-photo {
  float: left;
  width: 80px;
 }
 #ej-plugin-socialslideout .ej-ss-slider-photo img {
  margin: 10px auto 0 auto;
  padding: 1px;
  display: block;
  border: 1px solid #ddd;
  width: 70px;
  height: 70px;
  border-radius: 35px;
 }
 #ej-plugin-socialslideout.ej-ss-with-powered-by {
  height: 220px;
 }
 #ej-plugin-socialslideout.ej-ss-with-powered-by .ej-ss-slider-photo img {
  margin-bottom: 10px;
 }
 #ej-plugin-socialslideout .ej-ss-powered-by {
  clear: both;
  text-align: right;
  padding-right: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #555;
  background-color: #EEE;
  padding-bottom: 10px;
  padding-top: 6px;
 }
 #ej-plugin-socialslideout .ej-ss-powered-by a {
  color: #555;
  text-decoration: none;
 }
 </style>
 <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/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <script type="text/javascript">
  var EjSocialSlideoutJsApi_Settings =
  {
  SocialProfiles: {"Facebook":{"Name":"Facebook","NetworkId":"Facebook","IsActive":true,"Id":"Jumedeen",}},
  Preview: false,
  slideOutAfterTime: 0,
  slideOutAfterTimeNoScroll: 50,
  showPoweredBy: false,
  dontShowAgainText: "Don't show again",
  poweredByLink: "http:\/\/https://www.supportmeindia.com\/",
  };
if (typeof (EjSocialSlideoutJsApi) !== "undefined")
  EjSocialSlideoutJsApi.SettingsLoaded(EjSocialSlideoutJsApi_Settings);
  </script>
 <script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout.js'></script>
 <script>
  if ( 'undefined' !== typeof window.navigator.serviceWorker ) {
  window.navigator.serviceWorker.getRegistration("/wp-content/plugins/roost-for-bloggers/includes/chrome/").then( function( registration ) { if ( 'undefined' !== typeof registration && registration.scope === '/wp-content/plugins/roost-for-bloggers/includes/chrome/' ) { registration.unregister(); navigator.serviceWorker.register("/?roost=true&roost_action=worker", {scope: "/"}) } } );
  }
  </script>
 <div id="ej-plugin-socialslideout" class="" style="display: block; left: -340px; opacity: 1;"><div class="ejp-ss-top-box ejp-ss-facebook"> <p><a href="JavaScript:void(0)" id="ej-plugin-socialslideout-close">Don't show again | <strong>X</strong></a></p><h3>Follow Me on Facebook</h3><p class="ej-ss-description">Join me on social media.</p></div><div class="ej-ss-slider-photo"><img width="75" height="76" src="https://www.supportmeindia.com/wp-content/uploads/2016/04/Jk.jpg" alt="Jumedeen-Facebook" /></div><div class="ejp-ss-btn-container ejp-ss-facebook"><div class="fb-like" data-href="https://www.facebook.com/Jumedeenkhan" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div></div></div>

Step 2:

Ab aapko ye code apne blog par widget me add karna hai.

WordPress:-

Apne blog ke Dashboard >> Appearance >> Widgets >>Text >> Choose location >> Add widget par click karke code paste kare.

  1. WordPress blog ke dashboard par jaye.
  2. Appearance par click kare.
  3. Widget par click kare.
  4. Text par click kare.
  5. Ab kahi bhi location choose kare.
  6. Add widget par click kare.

Add widget in WordPress

Blogger:-

Apne blog ke Dashboard >> Layout >> Add a widget >> HTML/Javasript par click karke code paste kare.

  1. Sabse pahle aap blogger dasboard par jaye or drop down menu me layout par click kare.
  2. Ab kahi bhi add a gadget par click kare.
  3. HTNL/Javascript par click kare code paste kare.

Add widget in Blogger

Bas  ab aapke blog me facebook popup like box add ho chuka hai. Chaho to aap ek bar browser ki history delete karke check kar sakte ho.

Agar aapko blog me facebook smart slider like and follow box add karne me koi problem aaye to aap comment me apni problem hume bta sakte ho. adhik jankari ke liye aap facebook slider box ki site 101helper.blogspot.com par visit kare.

Really me ye ek aysa facebook popup like box hai jis se aapke facebook page par per day 20% jyada likes aayenge. Or agar aap chaho to aap isse apne facebook account par followers bhi badha sakte ho.

Agar aapko ye article pasand aaye to ise social media par apne friends ke sath share jarur kare.

Avatar for Jumedeen Khan

by: Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

Comments ( 89 )

  1. Sir me chahta muje koi request na bhej ske Add krne ki jagah follow Aye kaise kare
    help me

    Reply
    • Privacy setting me jao or who can send me friend request ke samne only friends of friends set karo.

      Reply
  2. Sir, jab main facebook share krta hu post to wo post share hhi hoti ye likha aata hai……………..URL Not Found: We had trouble using the URL you provided. Please try again later.
    help me sir…

    Reply
    • Aap sahi URL share karo.

      Reply
  3. Sir isme jo fb ka code hai usko box me kar dijiye kyuki code copy nhi ho rha hai.

    Reply
    • Thanks for suggestion. Aap ab code copy kar sakte ho.

      Reply

Leave a Comment