फेसबुक की तरह बटन सही

Question

मैं अपनी साइट पर बटन की तरह फेसबुक का उपयोग कर रहा करने के लिए iframe में पाठ संरेखित करें, एक iframe के माध्यम से।

अब आप iframe की चौड़ाई निर्दिष्ट करना होगा। जैसे बटन की विभिन्न भाषाओं के कारण, इसका मतलब है कि मुझे चौड़ाई को कम से कम 70px पर सेट करना होगा।

अब मैं चाहता हूं कि बटन को मेरी साइट के दाएं दाएं से गठबंधन किया जाए, अब मैं iframe की सीएसएस शैली में "टेक्स्ट-एलाइन: दाएं" जोड़कर ऐसा कर सकता हूं। Iframe दाईं ओर दिखाता है, लेकिन दाईं ओर सभी तरह से नहीं।

यह आइफ्रेम चौड़ाई, अपने 70px की वजह से होता है, और उदाहरण के लिए बटन की तरह अंग्रेज़ी केवल 55px है।

अब मैं क्या चाहता हूं: वास्तविक आईफ्रेम के दाईं ओर आईफ्रेम की वास्तविक सामग्री को संरेखित करने के लिए।

http://pastehtml.com/view/1dnwtbh.html

यहाँ मैं एक उदाहरण के निर्माण की है। इसके div Ive निर्माण के अधिकार पर गठबंधन है, लेकिन क्योंकि आइफ्रेम वास्तविक तरह बटन से बड़ा है, इसकी पूरी तरह से सही करने के लिए गठबंधन नहीं। मैं iframe में दाईं ओर बटन को गठबंधन करना चाहता हूं।

मुझे आशा है कि आप लोग मदद कर सकते हैं

Answer 1

सीएसएस नियम केवल, iframe तत्व, नहीं iframe की सामग्री पर लागू होते हैं क्योंकि यह किसी अन्य वेब पेज पूरी तरह से है।

आप के साथ आइफ्रेम पृष्ठ पर CSS स्टाइलशीट जोड़ने के लिए जावास्क्रिप्ट का उपयोग कर सकेंगे 'हो सकता है':

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink); 

लेकिन मुझे यकीन है कि अगर सभी ब्राउज़रों पर काम करेंगे नहीं हूँ। आपका सबसे अच्छा शर्त AJAX के साथ पेज कॉल करने के लिए है।

$.ajax({ 
     type: "GET", 
     url: "facebookURL", 
     dataType: "html", 
     success: function(html) { 
      processData(html); 

     } 
    }); 

function processData(fbData) { 
    $('#injectFBLikeHere').html(function() { 
     return $(fbData).find('#LikePluginPagelet').html(); 
    }); 
} 

नोट मैं यह परीक्षण नहीं किया है, केवल एक प्रारंभिक के रूप में उपयोग: इस तरह से पहले आप प्रदर्शित यह

एक उदाहरण jQuery AJAX समारोह इस प्रकार दिखाई देंगे आप पेज की सामग्री को संशोधित कर सकते हैं बिंदु या एक गाइड

Answer 2

इस तरह? http://d.pr/Cbkd

यदि हां, तो यहाँ मैं भी 60px की तरह कुछ करने के लिए iframe चौड़ाई बदल क्या मैं Firebug

.connect_widget_number_cloud, 
.connect_widget_connect_button {float: right !important;} 

के माध्यम से किया है।

Answer 3

एक iFrame की सामग्री को संशोधित करना आम तौर पर आधुनिक वेब मानकों के द्वारा असंभव है: http://en.wikipedia.org/wiki/Cross-site_scripting

क्योंकि आप iframe के अंदर की तरह बटन की चौड़ाई निर्धारित नहीं कर सकता है, तो आप के लिए न्यूनतम चौड़ाई करने के लिए iframe आकार परिवर्तन नहीं कर सकते दाईं ओर घोंसला हो।

एक ही रास्ता मैं के बारे में सोच सकते हैं आइफ्रेम आकार बदलने है, लेकिन जैसा कि आप ने कहा, आप इसे कई भाषाओं, जो मैं तो लगता है कि अगर आप उपयोगकर्ता की भाषा (JavaScript for detecting browser language preference) पता लगाने के लिए जावास्क्रिप्ट इस्तेमाल किया समर्थन करने के लिए की जरूरत है। आप भाषा के आधार पर बटन की आइफ्रेम चौड़ाई को मैन्युअल रूप से स्टाइल करने में सक्षम हो सकते हैं। क्रॉस साइट स्क्रिप्टिंग के कारण, मैं ऐसा करने के किसी भी स्वचालित तरीके से नहीं सोच सकता।

Answer 4

यहां क्या करना है।

सम्मिलित एक DIV से पहले आपको टैग #like कहा जाता है, तो अब #like सीएसएस है कि आप के रूप में नीचे दिखाया गया है और उन्हें आवश्यकतानुसार समायोजित ऊपर DIV के लिए आवेदन किया बनाने के रूप में नीचे

<div id="like"> 

    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
    <fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like> 
</div> 
<!-- End Like 

दिखाया अंदर अपने फेसबुक कोड रखो ।

/* की तरह */

#like { 
     position: fixed; 
     top: 300px; 
     right: -20px; 
     float: right; 
     height: auto; 
     width: 130px; 
} 

नोट फेसबुक के लिए सीएसएस: किसी भी पिछले सीएसएस कि आप मैं फ्रेम करने के लिए लागू है, तो यह इस एक से विरोध नहीं करता हटा दें।

Answer 5

शायद this आपके लिए काम करेगा: जब आप यहां कोड उत्पन्न करते हैं, तो चौड़ाई 0 पर सेट करें।