How to insert a pop-up with a Like box for Fanpage in Blogger

Who I am
Marie-Ange Demory
@marie-angedemory
EXTERNAL REFERENCES:

vgr.com gamedesigning.org Reddit.com

Author and references

Facebook Pages offer a world of possibilities for content creators. It's a way to connect with the community and if you use Blogger you can place a pop-up on your blog in so that your followers appreciate your Fanpage.

      The advantages of having a Fanpage

      A Fanpage can unite people with the same tastes and preferences. As well as offering the possibility to followers of a certain type of content to have a more direct communication with customers .



      Your corporate or personal brand will have greater visibility and you will also have the opportunity to position yourself in a global social network. Not to mention it's a great option for drive traffic to your blog and execute digital marketing campaigns.

      Creating a Blogger popup with Facebook Fan Page is an easy task with just a few clicks.

      How to insert a pop-up with a Like box for Fanpage in Blogger

      • Sign in to your Google account and access Blogger from the Google Apps button. Select the Design option from the menu and choose the Add a Gadget option.
      • A new window opens where you need to select the HTML/JavaScript option .
      • There is a new window where the code must be placed in the content area . The title field can be left blank and you can select whether it is visible or not.



      #fanback {

      display:none;
      background:rgba(0,0,0,0.8);
      width: 100%;
      height: 100%;
      position:fixed;
      top:0;
      left:0;
      index z:99999;
      }
      #fan-out {
      width:100%;
      height: 100%;
      }
      #JasperRoberts {
      White background;
      width: 420px;
      height: 270px;
      ;
      upper: 58%;
      left: 63%;
      margin:-220px 0 0 -375px;
      -webkit-box-shadow: inserto 0 0 50px 0 #939393;
      -moz-box-shadow: inserto 0 0 50px 0 #939393;
      box-shadow: inserto 0 0 50px 0 #939393;
      -webkit-edge-radius: 5px;
      -moz-radius-edge: 5px;
      border radius: 5px;
      margin: -220px 0 0 -375px;
      }
      #TheBlogWidgets {
      float:right;
      cursor:pointer;
      background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) ripetere;
      height: 15px;
      padding:20px;
      position:relative;
      right-fill:40px;
      top margin:-20px;
      margin-right:-22px;
      }
      .remove-edge {
      height:1px;
      width: 366px;
      margin:0 auto;
      background:#F3F3F3;
      top margin:16px;
      position:relative;
      left margin:20px;
      }
      # links, # links a.visited, # links a, # links a: hover {
      color: #80808B;
      font size: 10px;
      margin: 0 auto 5px auto;
      float:center;
      }


      //
      jQuery.cookie = function(key, value, options) {
      // key and at least given value, set cookie...
      if (arguments.length > 1 && String(value) !== "[oggetto oggetto]") {
      options = jQuery.extend({}, options);
      if (value === null || value === undefined) {
      options.expiration = -1;
      }
      if (typeof options.expires === 'numero') {
      var giorni = options.expires, t = options.expires = new Date();
      t.setDate(t.getDate() + days);
      }
      value = String(value);
      return (document.cookie = [
      URIComponentencoding(key), '=',
      options.raw ? value: encodeURIComponent(value),
      options.expires ? '; scade =' + options.expires.toUTCString() : '', // usa l'attributo scade, max-age non è supportato da IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
      ].join(''));
      }
      // key and possibly options provided, get cookie...
      options = value || {};
      var result, decode = options.raw ? function(s) { return s; } : decodeURIComponent;
      return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
      };
      //]]>


      jQuery(document).ready(function($){
      if($.cookie('popup_user_login') != 'yes'){
      $('#fanback').delay(15000).fadeIn('medium');
      $('#TheBlogWidgets, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
      });
      }
      $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
      });



      </div>


      </div>

      </div>
      <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
      href = http://www.facebook.com/gatosgraciososHD &width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
      style='border: none; overflow: hidden; top margin: -19px; width: 402px; height: 230px;'>
      Provided by Jasper Roberts Consulting - Widgets
      </div>
      </div>



      Search the code www.facebook.com/gatosgraciososHD e replace it with your Fanpage link . If you have knowledge of HTML you can even change the look and exact time the notification should appear . It's an edit that won't take more than five minutes and will give your blog a professional look.

      add a comment of How to insert a pop-up with a Like box for Fanpage in Blogger
      Comment sent successfully! We will review it in the next few hours.