2012-07-25 12 views
7

Używam jak i wysyłam wtyczkę na dole mojej strony. Jednak po kliknięciu przycisku Wyślij okno podręczne otwiera się i nie jest wyświetlane jako pełne. Jak mogę zrobić wyskakujące okienko otwiera się powyżej? ale nie zmieniaj się jak i wysyłaj pozycje przycisków. Aby zmienić tylko pozycje popup.Jak zmienić wyskakujące pozycje na Facebooku?

+0

dowolny zrzut ekranu lub łącze gdzie to robisz ?? – AlphaMale

+0

Mam zrzut ekranu, ale nie można go tutaj umieścić, sprawdzanie poprawności witryny nie pozwala. –

+0

http://www.flickr.com/photos/[email protected]/7642219502/in/photostream –

Odpowiedz

4

Musisz więc dodać trochę negative margin od lewej strony, aby przenieść wyskakujące okno z widżetem w lewo, aż pojawi się visible area. Można to wykorzystać w css:

.fb_edge_comment_widget { 
    margin-left: -370px !important; //use any figure appropriate to you 
} 

Trzeba będzie dodać trochę margin-bottom do nadrzędnej div gdzie pojawiają się przyciski tak zmusi okno popup wydaje się trochę w lewo i jest całkowicie widoczna ...

Tu jest link do podobnego pytania: Facebook Like Widget on Fan page, Comment area out of visible area

Nadzieja to pomaga.

2

W rzeczywistości jest to możliwe.

Nasze rozwiązanie to coś więcej niż tylko okno dialogowe podobne do Facebooka, które jest w pełni asynchroniczne, a więc nie blokuje strony, automatycznie tworzy właściwy wpis URL, więc ten sam javascript jest używany na wszystkich naszych stronach. zaktualizuj i pokaż go dopiero po poznaniu faktycznego rozmiaru, zabijając w ten sposób 3 ptaki z jednym kamieniem.

1) włączamy się we wszystkich naszych stron jest "pusty" div, który jest ponad wypełnione javascript:
<div id="social-media-bar"><div id="social-media"></div></div>

PS: przyczyna 2 poziomach div dlatego będę później rozszerzyć to na google +, Twitter itp

2) ładujemy facebook asynchronicznie
użyciu ładowarka LazyLoad ale każdy zrobi a można też zrobić synchroniczny jeśli chcesz: LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js');

3) w facebook init my:
- wypełnić dedykowany div,
- zapytaj FB aby analizować wstawione znaczniki
- wykorzystywać czas, po parsowania, aby zapewnić wyświetlanie został odświeżony, a zatem szer i wysokość są prawidłowe.

window.fbAsyncInit = function() { 
     var d = document,n,nn,url,url_ref,i;` 

     // due to bug in facebook need to delay the actual access to data after parse 
     function FBUpdateSize(){ 
      var h,str; 
      // show facebook entry using actual element size 
      h = nn.firstChild.clientHeight; 
      str = h+'px'; 
      nn.style.height= str; 
      n.style.height= str; 
      n.style.overflow='visible'; 
     } 

     FB.init({ channelUrl : 'http://www.plixo.com.sg/channel.html', 
        //appId : '228760567272221', 
        status  : false, 
        xfbml  : false}); 

     // create facebook entries in the DOM 
     n = d.getElementById('social-media'); 
     url = d.URL; 
     i = url.lastIndexOf('/')+1; 
     url_ref = url.slice(i,url.indexOf('.',i)); 
     nn = d.createElement('fb-like'); 
     nn.innerHTML = '<div id="fb_like_bottom"><fb:like href="' + url + '" ref="' + url_ref + '" send="false" layout="standard" width="360px" show_faces="false"></fb:like></div>'; 
     nn = n.appendChild(nn); 

     // call facebook to fill DOM entries 
     // use a timeout in callback to ensure browser has refreshed internal clientHeight 
     FB.XFBML.parse(nn,function(){setTimeout(FBUpdateSize,50)}); 
    };` 

4) i tylko 3 dedykowane style css do zmiany położenia okna:
#social-media{position:relative;display:block;width:auto;z-index:200;overflow:hidden;height:0;background-color:#f2f2f2;border:1px solid #bdc7d8}
#fb_like_bottom{padding:4px;position:absolute}
#fb_like_bottom .fb_iframe_widget_lift{bottom:0;background-color:#f2f2f2;border:1px solid #bdc7d8!important;margin:-5px;padding:4px}

Możesz zajrzeć na przykład którymś z naszych stron www, EX, http://www.plixo.com.sg/large-format-printing-services.html.

Zapraszam do ponownego wykorzystania/modyfikować itp, po prostu docenić, jeśli nie odwołuje się do żadnego z naszej strony ;-)

Powiązane problemy