Add Facebook Pop up Widget in Your Website

Hi Friends ! Today i am giving you some codes which will help to in case of  Facebook pop up Widget.


If you create a website and there you want to show this type of pop up widget .then i am giving you some codes just copy that codes and paste into your code or blogger.i learn it from H+ zone


Steps are listed below for bloggers.......

  • Open you blogger and Go to layout section.
  • Then click on Add a Gadget in any section 
  • then select HTML/java Script

HTML/JavaScriptHTML/JavaScript
  • Copy the below code and paste it.and save it.(publish)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://24blogger-com.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjH1Sdze3yRhlaPMTVF-WQvzY8dy-GPquH8gGiESYL1sko6LoLJkEEo4ExtziR-y_dSGBUrES31mTX9ULHtW-qY3kFvMgJbrTUO8tNx3Ad8aXu1zJWHyFvdTbydk2dbOAoS5mCzNf3qs/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjH1Sdze3yRhlaPMTVF-WQvzY8dy-GPquH8gGiESYL1sko6LoLJkEEo4ExtziR-y_dSGBUrES31mTX9ULHtW-qY3kFvMgJbrTUO8tNx3Ad8aXu1zJWHyFvdTbydk2dbOAoS5mCzNf3qs/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4nJTL7UFNhpUeWxV7jtNxV-FVQheGTD2xWvxIa9NODob7JiGe1jzvTRO7sx1PbudI-EGzKNrXSyz-u4tyF4DTT30bWv7bratGtA91mDc1Zfyn0paLTegVgh_PLTQdN5qMPQfUcAM8jo/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhma7cidTNlCOkclu1y5ltzFdbcA0sW3b_8F45iSEKbN8NdcKEn7n_1fduJk3YBMqLmwPgKmBYZ6i2whDR8n9K4x7koPqkcDgJNovB6BJ2_9tquUAVFxbawFsArKrbeB7NEqXvgyxBn9ig/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTm0x2NPJPMf9WWOMR5tyU-wCu2-xNsb0pha-SarKizYFJ1W0WMHipfMyGy2k9wf6eN9XHwoQFBcjqTLwDyzdEjFGVv5UBnrZxDSPefr1SfBbY_GeOTameFyaPH5xMxJh1kP1HiQIprU/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title"><span style="color:#2EFE2E">Just Click on Like Button to receive all updates via Facebook !</span></h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FKnowledgeAndTrick&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" ><span style="color:#2EFE2E"></span>Get this <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.trickdefined.blogspot.in/2014/01/add-facebook-pop-up-widget-in-your.html" rel="Dofollow" >Here</a></p>
</div></div>

Customization......................
  •  Replace KnowledgeAndTrick With Your Facebook Username.
  • You can also customize the text by replacing it.
  • Just save it.
  • if you want that it will appear every reload then change the value true from false. 
You are Done !!!

If any1 having any problem regarding this then just comment below.and don't forget to share this.

    Thanks.......

    Share this:

    ABOUT THE AUTHOR

    Ceyron Louis

    Just a Comman Man,Tech Geek,Software Engineer,Web Designer,Social Media Outreach Specialist and a Pro Blogger.

      Blogger Comment
      Facebook Comment

    8 comments:

    1. At any rate, here could be an examination between each the advancements intended for displaying partner degree fair-minded correlation of every Java and PHP. Java

      ReplyDelete
      Replies
      1. Yes,This is the simple code that any blogger can edit in their blog for such changes.

        Delete
    2. Thanks for sharing the codes to add a Facebook pop-up widget! Super helpful for website customization. Excited to give it a try and enhance user engagement.
      New Jersey Expunge Order of Protection

      ReplyDelete
    3. For instructors and students alike, "Knowledge and Trick: Learn and Teach" is an important resource. This book provides a thorough method for learning and sharing information. It equips readers to improve their teaching methods and learning capacities with useful advice, perceptive strategies, and captivating ways. The author's proficiency is evident, offering readers a road map for achieving success in their academic pursuits. "Knowledge and Trick" is an essential read for anyone wishing to enhance their study habits, be it a student or an instructor searching for creative ways to instruct. This well-written manual encourages lifelong learning and a sharing of knowledge culture.
      abogado inmobiliario

      ReplyDelete
    4. Great tutorial! Adding a Facebook pop-up widget enhances user engagement. Your step-by-step instructions make it easy to implement. Thanks for sharing these valuable codes. Looking forward to more helpful tips!
      File Divorce in New York city

      ReplyDelete
    5. "The Facebook Pop-up Widget was a game-changer for our website! It effortlessly interacts with our website, making it simple for users to get in touch with us on Facebook. The user experience is improved by the pop-up's elegant appearance, which perfectly complements the aesthetics of our website. Furthermore, we can easily customize it to fit the distinct style of our company because of its high degree of customization. We've noticed a substantial rise in Facebook engagement and followers since putting the widget into place. It's a vital resource for developing and maintaining our virtual community. We heartily urge any website hoping to increase their social media presence to incorporate the Facebook Pop-up Widget!"
      chapter 7 bankruptcy attorney near me

      ReplyDelete
    6. To add a Facebook pop-up widget to your Blogger website, navigate to your dashboard, click on "Layout" in the left sidebar, and select "HTML/JavaScript Gadget." Copy the provided code snippet into the content area of the HTML/JavaScript gadget. The code includes jQuery libraries, a colorbox plugin, and CSS styles. The pop-up content includes a Facebook like box embedded within a hidden div. Customization options include replacing the Facebook username with your own, changing the text to customize the message, and setting the persistence option. deadly motorcycle accident virginia beach

      ReplyDelete

    it will be great if you share your view about the same.