"उपयोगकर्ता फ़ीड" विजेट की उपस्थिति बदलें

Twitter टाइमलाइन विजेट एक ऐसा टूल है जिसकी मदद से आप अपनी वेबसाइट पर ट्विटर फीड एम्बेड कर सकते हैं। दुर्भाग्य से, सेटिंग्स का मानक सेट आपको सीमित संख्या में प्रदर्शन विकल्प बदलने की अनुमति देता है और विजेट तत्वों के लिए मनमाने ढंग से सीएसएस शैलियों के आवेदन की अनुमति नहीं देता है। यह आलेख वर्णन करता है कि इस प्रतिबंध के आसपास कैसे जाएं और रिबन को स्टाइल करें ताकि यह आपके डिजाइन में फिट हो।

एक विजेट जोड़ना

साइट में ट्विटर फीड जोड़ने के लिए, आपको विजेट कोड डालना होगा। यह, बदले में, निम्न लिंक https://twitter.com/settings/widgets पर प्राप्त किया जा सकता है। इस पृष्ठ पर, आप प्रारंभिक सेटअप भी कर सकते हैं (ट्वीट प्रदर्शन विकल्प सेट करें, ऊंचाई निर्दिष्ट करें, एक थीम चुनें) और विजेट कोड कॉपी करें। कोड में दो तत्व होते हैं: एक एंकर जिसमें एट्रिब्यूट्स (विजेट सेटिंग्स) और एक जावास्क्रिप्ट कोड होता है जो ट्विटर लाइब्रेरी को लोड करता है।

<a class="twitter-timeline" href="https://twitter.com/zewa4ka" data-widget-id="362933628772163584">  @zewa4ka</a> 

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

लेकिन यह सब नहीं है कि हम विजेट को अनुकूलित करने की पेशकश कर रहे हैं। आप https://dev.twitter.com/docs/embedded-timelines#customization पर अतिरिक्त मापदंडों से परिचित हो सकते हैं । लेकिन किसी भी मामले में, मानक तरीकों से विजेट तत्वों की शैली को बदलने की समस्या को हल करने से काम नहीं चलेगा।

शैलियों को लागू करें

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

हमारे पृष्ठ के पहले से लोड होने के बाद फ़्रेम की सामग्री लोड हो गई है और इसके साथ कुछ भी करने से पहले, आपको इसकी तत्परता की जांच करने की आवश्यकता है।

 $(function () { var $cont = $(".twitter-container"), prd = setInterval(function () { if ($cont.find("> iframe").contents().find(".twitter-timeline").length > 0) { clearInterval(prd) //      } }, 100); }); 

अगला, हम अपने पेज पर शैलियों के साथ एक ब्लॉक रखेंगे और "twitterStyle" पहचानकर्ता को लटकाएंगे:

 #twitterStyled .tweet { padding: 10px 10px 5px 10px; margin:10px; border-radius: 10px; background-color: #9bcfe2; } #twitterStyled .tweet:nth-child(odd) { margin-right:50px; } #twitterStyled .tweet:nth-child(even) { margin-left:50px; } #twitterStyled .profile > img { display: none; } #twitterStyled .tweet .tweet-actions { visibility: hidden; } #twitterStyled .tweet:hover .tweet-actions { visibility: visible; } #twitterStyled .stream { background-color: #7AC0DA; color:#fff; } #twitterStyled .header { border-bottom: 1px dashed #fff; margin-bottom:10px; padding-bottom:5px; } #twitterStyled .p-name { color: #207290; } #twitterStyled .p-nickname, #twitterStyled .dt-updated { color: #2b8fb4; } 

हम फ्रेम के साथ निम्नलिखित जोड़तोड़ करेंगे: आईडी को लटकाएं = "# twitterStyled" विशेषता इसके शरीर पर (ताकि शैलियों की प्राथमिकताओं के बारे में चिंता न करें) और अंदर शैलियों के साथ एक ब्लॉक जोड़ें।

 $body.attr("id", "twitterStyled") .append($("#twitterStyle")); 

क्या वह सब है?

बिल्कुल नहीं! आइफ्रेम तक पहुँच प्राप्त करने के बाद, हम उनके साथ जो चाहें कर सकते हैं। आप अनावश्यक ब्लॉकों को हटा सकते हैं, एनीमेशन जोड़ सकते हैं, स्वैप तत्वों को जोड़ सकते हैं। विजेट की आंतरिक संरचना को हमेशा अपने पसंदीदा ब्राउज़र के डेवलपर टूल का उपयोग करके देखा जा सकता है। और फिर सब कुछ केवल आपकी कल्पना द्वारा सीमित है।

एक उदाहरण यहाँ देखा जा सकता है: http://jsfiddle.net/SCbsW/