फेसबुक की तरह बटन संवाद

Question

दिखा रहा है मैंने एक "सोशल स्लाइडर" रखा है जो आगंतुकों को "पसंद" और "+" पृष्ठ पर अनुमति देता है ... इस स्लाइडर के लिए कंटेनर पूर्ण नीचे दाएं हाथ में प्रदर्शित होता है ब्राउज़र के कोने। सभी काम अच्छी तरह से काम करते हैं, सिवाय जब आप पसंद बटन पर क्लिक करते हैं, तो एक टिप्पणी के लिए पॉप अप करने वाला संवाद पृष्ठ से बाहर होता है।

क्या ऐसा कोई तरीका है जिसे मैं नहीं देख रहा हूं जो आपको कॉन्फ़िगर करने की अनुमति देता है कि वह संवाद कहां दिखाता है?

<div id="social-container"> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div> 
</div> 

और सीएसएस:

#social-container { 
     clear: both; 
     z-index: 999; 
     position: fixed; 
     bottom: 120px; 
     right: 20px; 
    } 

Answer 1

कुछ समय पहले, आप (सीएसएस के साथ सामाजिक प्लग-इन में से कुछ चीजों को बदल सकता है सामाजिक करने के लिए एक सीएसएस फ़ाइल का url पास करके प्लगइन कोड), लेकिन afaik अब यह संभव नहीं है और आप उन्हें उतना ही ले जाना है जितना वे हैं। तो, नहीं, यह संभव नहीं है, उन सामाजिक प्लगइन्स एक बंद प्रणाली हैं। केवल एक चीज जो आप कर सकते हैं वह सब कुछ डिज़ाइन करना है ताकि जैसे बटन बाईं ओर कहीं भी हो।

Answer 2

यदि आपके लेआउट को दाहिने हाथ से ट्रिगर करने के लिए बेहद जरूरी है कि 'क्या आपको यह पृष्ठ पसंद आया' बॉक्स, क्या आप बॉक्स को चौड़ा करने और सामग्री को छोड़कर विचार कर सकते हैं?

यह पॉप-अप सामग्री प्रकट होने के लिए और अधिक जगह बनाना चाहिए।

आपको यह भी सुनिश्चित करना चाहिए कि आपके पृष्ठ के निचले हिस्से में सीएसएस का उपयोग करके पर्याप्त स्थान जोड़ा जाए ताकि इसे विस्तारित किया जा सके। यह स्थिति होने पर स्थिति की स्थिति सबसे अधिक संभावना नहीं जोड़ती है।

Answer 3

आप यह नहीं चुन सकते कि पॉपअप बॉक्स एक आईफ्रेम के बाद से कहां दिखाई देगा और आप क्रॉस डोमेन आईफ़्रेम के सीएसएस को नियंत्रित नहीं कर सकते हैं (और इसके लिए कोई पैरामीटर नहीं है)।

केवल एक चीज है जो आप कर सकते की तरह बटन आइफ्रेम के आकार को सीमित ताकि संवाद छिपा रहता है:

#fb-like iframe { 
    width: 62px !important; height: 24px !important; 
} 

Answer 4

यह स्पष्ट लग सकता है, का निरीक्षण किया जो कुछ ब्राउज़र उपकरण आप पसंद करते हैं के साथ तत्व, लगता है पॉपअप कंटेनर का नाम, तदनुसार जोड़ें और समायोजित करें।

पूर्व:

#social-container.popup { 
    position: absolute; 
    right: 150px; 

Answer 5

इसलिए, यह, संभावना नहीं यह आपकी समस्या का समाधान होगा, क्योंकि आपके पास पर्याप्त सक्षम पता करने के लिए ऐसा करने के तरीके लगते हैं, कोई वास्तविक कोड के लिए वास्तव में समस्या का अंदाजा तैनात है, और मैं नहीं कर सकता आप जिस फेसबुक एपीआई का उपयोग कर रहे हैं, उसे समझें, लेकिन

क्या आप सिर्फ क्लिक ईवेंट और आईफ्रेम की चौड़ाई या जो कुछ भी हो और केवल ऑफसेट की तुलना नहीं कर सकते? की तरह कुछ - verbose-

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var h = $(window).height() - facebookSelector.height(); 
    var w = $(window).width() - facebookSelector.width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    facebookSelector[0].style.top = (e.clientY > h) ? h + "px" : e.clientY + "px"; 
    //Set the left based on where mouse click occured 
    facebookSelector[0].style.left = (e.clientX > w) ? winWidth-iframeWidth + "px" : e.clientX + "px"; 
    } 
} 

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var iframeHeight = facebookSelector.height(); 
    var iframeWidth = facebookSelector.width(); 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    if (e.clientY > (winHeight-iframeHeight)){ 
     facebookSelector[0].style.top = winHeight-iframeHeight + "px"; 
    } 
    else { 
     facebookSelector.style.top = e.clientY + "px"; 
    } 
    //Set the left based on where mouse click occured 
    if (e.clientX > (winWidth-iframeWidth)){ 
     facebookSelector[0].style.left = winWidth-iframeWidth + "px"; 
    } 
    else { 
     facebookSelector[0].style.left = e.clientX + "px"; 
    } 
    } 
} 

ऊपर के उदाहरण कम तुम भी (या जो भी आप चाहते हैं वास्तव में) के बजाय बटन क्लिक स्थान की तरह फेसबुक की स्थिति इस्तेमाल कर सकते हैं।

चेतावनी और परिशिष्ट:
1।यह इतनी आसानी से काम नहीं करेगा अगर आपके आइफ्रेम (या जो भी) की आईडी गतिशील फेसबुक द्वारा उत्पन्न की जा रही है और आप कोई नियंत्रण नहीं के साथ यह
2. इस इतनी आसानी से काम नहीं करेगा अगर की तरह बटन iframe में है और आपके कंटेनर पर बुलबुले घटना को रोकता है।
3. इस उदाहरण में वर्तमान में jQuery की आवश्यकता है।
4. अपने आइफ्रेम (या जो भी) position: absolute या position: fixed

Answer 6

होना चाहिए यह शायद अतिप्रवाह विशेषता के साथ एक समस्या है। # सामाजिक-कंटेनर या शरीर में इस जोड़ने का प्रयास करें:

overflow: auto; 

या

overflow: visible; 

या

overflow: scroll; 

Answer 7

ऊपर समाधान में से कोई भी मेरे लिए काम किया। मुझे एक त्वरित फिक्स about facebook like button showing outside page मिला और यह काम किया।

आशा है कि यह, दूसरों के समय बचा सकते हैं चीयर्स!