🕵🏽 👨🏼‍🏫 ⏬ सामाजिक नेटवर्क या "लाइक लाइक" के साथ वेब एप्लिकेशन का एकीकरण 🕌 😿 🖥️

क्या आवश्यक था: सबसे अधिक फेसबुक और ट्विटर बटन जोड़ें
आवेदन के वर्गों।
क्या था: स्थिर पतों के बिना एक-पृष्ठ का आवेदन।

इसलिए, हमें 3 कार्य करने होंगे:

हैश बैंग पतों के लिए समर्थन जोड़ें;
फेसबुक के "रोबोट" के लिए स्थैतिक पृष्ठ बनाएं;
वास्तव में बटन की व्यवस्था।

#! पता

हमें पृष्ठ के पते और अधिमानतः आवेदन के वर्गों के लिए शीर्षक को बांधने की आवश्यकता है।
मैं jquery.address और मेरे का उपयोग करता हूं
नियमित अभिव्यक्ति के साथ बैसाखी। यहाँ सब कुछ सरल और अत्यधिक निर्भर है
अनुप्रयोगों, इसलिए यह विस्तार से बात करने के लिए कोई मतलब नहीं है।

स्थैतिक पेज

चूंकि सामाजिक नेटवर्क के सभी बटन "हैश" के साथ पतों को पसंद नहीं करते हैं, हम
आपको "#!" के बिना विशेष पृष्ठ बनाने होंगे। रोबोट में प्रवेश करते समय
फेसबुक उनसे जानकारी लेगा, और उस व्यक्ति को "#!" वाले पेज पर भेज दिया जाएगा।

ऐसा करने के लिए, हमें फ़ॉर्म का टेम्पलेट चाहिए:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title></title> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" /> <meta property="og:type" content="" /> <meta property="og:site_name" content="" /> <meta property="fb:app_id" content="" /> <meta property="fb:admins" content="" /> <link rel="image_src" href="" /> </head> <body onload="document.location = 'http://' + document.location.host + '/#!' + document.location.pathname"> <img src='' /> </body> </html>

सभी क्षेत्रों की आवश्यकता है।
Fb में : app_id facebook पर एप्लिकेशन आईडी है।
Fb में: प्रवेश , अल्पविराम द्वारा अलग किए गए एप्लिकेशन का उपयोगकर्ता / व्यवस्थापक आईडी।
ओग में: छवि , image_src और img छवि का पूर्ण पता लिखें,
डोमेन सहित।
कई परीक्षणों के बाद, यह स्पष्ट हो गया कि छवि के लिए
पूर्वावलोकन डुप्लिकेट किया जाना चाहिए। अन्यथा, एक स्थिति संभव है,
जब पूर्वावलोकन के बिना पोस्ट किया गया।
शेष क्षेत्रों की सामग्री उनके नामों से स्पष्ट है।

बटन सेट करें

इस भाग में पहली समस्याएं सामने आएंगी: आप पृष्ठ में नहीं जोड़ सकते
कई फेसबुक बटन। लेकिन यह बहुत आसानी से js पर हल हो जाता है:

 function addLike(holder, url) { try { $(holder).html('<fb:like href="'+ url + '" ></fb:like>'); FB.XFBML.parse(); } catch(err) {} }

ट्राइ / कैच में इसे तब से लपेटा जाता है जब से क्रॉस-डोमेन पर शपथ लेना शुरू होता है
अनुरोध। कोशिश / पकड़ के साथ - उपेक्षा।
आप कोई भी बटन कोड डाल सकते हैं, मुख्य बात बाद में FB.XFBML.parse () को खींचना है।

ट्विटर फेसबुक से दूर नहीं है। इसे गतिशील रूप से जोड़ा जाता है
बटन काम नहीं करता है। यह भी आसानी से हल है:

 function addTwitter(holder, url, title) { try { $(holder).html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + title + '">Tweet</a>'); $.getScript("http://platform.twitter.com/widgets.js"); } catch(err) {} }

try / catch का उपयोग facebook के समान कारण के लिए किया जाता है।

अब यह "#!" के बिना इन कार्यों पर एक पता सेट करने के लिए रहता है और सब कुछ काम करेगा।

सामाजिक नेटवर्क या "लाइक लाइक" के साथ वेब एप्लिकेशन का एकीकरण

#! पता

स्थैतिक पेज

बटन सेट करें

More articles: