सामाजिक मीडिया एकीकरण के लिए 8 एएमपी घटक

सबसे बड़ा संघर्ष जो Google के मोबाइल वेब मानक है, त्वरित मोबाइल पेज हल करने की जरूरत है मोबाइल साइटों को तेजी से बनाना, जबकि उन्हें कार्यात्मक और सामग्री में समृद्ध बनाए रखना. इन दिनों समृद्ध और आकर्षक सामग्री की कल्पना शायद ही लोकप्रिय सोशल मीडिया साइटों से एम्बेड किए बिना की जा सकती है - ट्वीट, वीडियो, ऑडियो, पोस्ट, फ़ोटो.

विस्तारित AMP घटक - अन्य महान विशेषताओं के बीच - एकीकृत करने का एक शानदार तरीका प्रदान करते हैं एएमपी विभिन्न सामाजिक सामग्री प्रकारों के साथ दस्तावेज़.

कैसे विस्तारित एएमपी घटक काम करते हैं

AMP के दर्शन के मूल में Google के हैं सबसे अच्छा प्रदर्शन प्रथाओं. पृष्ठ लोड समय को बेहतर बनाने के लिए, एएमपी मानकों को प्रतिबंधित करता है आप फ्रंट-एंड तकनीकों का उपयोग कैसे कर सकते हैं. उदाहरण के लिए, आप कस्टम जावास्क्रिप्ट, बाहरी स्टाइलशीट और बाहरी संसाधनों को लोड करने वाले किसी भी HTML तत्व का उपयोग नहीं कर सकते, जैसे कि टैग.

बदले में, आपको एक गुच्छा मिलता है एएमपी अवयव आप के लिए उपयोग कर सकते हैं बाहरी संसाधनों को प्रदर्शित करें, जैसे कि आपकी साइट पर चित्र, वीडियो, ऑडियो, विज्ञापन आदि.

एएमपी घटक हैं विशिष्ट HTML टैग जिसे साधारण HTML टैग के समान उपयोग किया जा सकता है। उनमें से कुछ हैं में बनाया गया AMP रनटाइम के लिए, जबकि बहुमत एक्सटेंशन के रूप में काम करता है. एएमपी पृष्ठों पर सामाजिक मीडिया एकीकरण को संभव बनाने वाले घटक सभी विस्तारित घटक हैं.

विस्तारित एएमपी घटकों की आवश्यकता होती है संबंधित स्क्रिप्ट आयात करें में आपके AMP HTML डॉक्यूमेंट का सेक्शन। जैसा कि एएमपी एक ओपन-सोर्स प्रोजेक्ट है, भविष्य में विस्तारित घटकों की संख्या बढ़ सकती है.

इस पोस्ट में हमने मुट्ठी भर एएमपी अवयव एकत्र किए हैं जो आपकी सहायता कर सकते हैं सोशल मीडिया एकीकरण के साथ. ध्यान रखें कि स्क्रिप्ट के संस्करण समय के साथ बदल सकता है, इसलिए हमेशा अपनी साइट पर उन्हें शामिल करने से पहले दस्तावेज़ देखें.

1. amp-फेसबुक

यह संभव बनाता है फेसबुक पोस्ट या वीडियो एम्बेड करें AMP पेज में.

आपको हमेशा की जरूरत है एम्बेडेड पोस्ट के आयाम निर्दिष्ट करें, जिसका मतलब है कि आपको एक जोड़ने की जरूरत है चौड़ाई और ए ऊंचाई पूर्णांक पिक्सेल में मानों के साथ विशेषता। आप फेसबुक पोस्ट के शीर्ष पर "एंबेड" मेनू पर क्लिक करके उचित आयाम पा सकते हैं.

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

यदि आप चाहते हैं संबंधित फेसबुक पोस्ट के बिना एक वीडियो एम्बेड करें, वैकल्पिक जोड़ें डेटा-एम्बेड-के रूप में = "वीडियो" गुण

यदि आप चाहते हैं अपने एम्बेड को उत्तरदायी बनाएं उपयोग ख़ाका के साथ विशेषता "उत्तरदायी" मूल्य। आप वैकल्पिक का उपयोग भी कर सकते हैं ख़ाका इसके लेआउट को नियंत्रित करने के लिए किसी अन्य एएमपी घटक पर विशेषता.

कोड उदाहरण:

कोड पूर्वावलोकन:

शामिल करने के लिए स्क्रिप्ट:

2. amp-चहचहाना

आप ऐसा कर सकते हैं ट्वीट एम्बेड करें का उपयोग करके एएमपी पृष्ठों में अंग.

ऐसा करने के लिए, आपको करने की आवश्यकता है ट्वीट की आईडी निर्दिष्ट करें में डेटा-tweetid विशेषता। आप संशोधित कर सकते हैं कि Twitter APi के किसी भी thedisplay विकल्प को जोड़कर ट्वीट को कैसे प्रदर्शित किया जाता है डेटा-* HTML5 विशेषता.

उदाहरण के लिए, नीचे दिए गए उदाहरण में मैंने ट्विटर एपीआई का उपयोग किया है लिंक रंग प्रदर्शन विकल्प के रूप में डेटा-लिंक रंग (आईटी इस डेटा-* प्रारूप) अपने ट्विटर अकाउंट पर Hongkiat.com का उपयोग करने के लिए डिफ़ॉल्ट लिंक रंग को बदलने के लिए.

कोड उदाहरण:

कोड पूर्वावलोकन:

घटक अभी तक सही नहीं है, गितुब डॉक्स का कहना है कि ट्विटर वर्तमान में एक एपीआई प्रदान नहीं करता है जो निश्चित पहलू अनुपात ट्वीट एम्बेड करता है.

इसका मतलब आपको चाहिए मैन्युअल रूप से सेट करें चौड़ाई तथा ऊंचाई गुण, एएमपी रनटाइम के रूप में कभी-कभी ट्वीट का एक हिस्सा (आमतौर पर नीचे) प्रदर्शित नहीं होता है.

यह हमेशा एक अच्छा विचार है कि एएमपी पृष्ठ को प्रकाशित करने से पहले आपके एम्बेडेड ट्वीट कैसे दिखते हैं, यह जांचने के लिए एक अच्छा विचार है.

एक प्लेसहोल्डर जोड़ें

हालांकि इसकी आवश्यकता नहीं है, प्रलेखन की सिफारिश की गई है एक प्लेसहोल्डर जोड़ना यदि ट्वीट एक बार में लोड नहीं होता है.

प्लेसहोल्डर प्रत्येक एएमपी घटक पर विशेषता का उपयोग किया जा सकता है। प्लेसहोल्डर है तुरंत दिखाया गया यदि अंतिम संसाधन उपलब्ध नहीं हैं। जब एएमपी तत्व लोड होता है, तो यह अपने प्लेसहोल्डर को छुपाता है.

उपरोक्त उदाहरण कोड कैसा दिखता है, इस पर एक नज़र डालें एक प्लेसहोल्डर के साथ. ट्विटर पर, मैंने केवल एंबेड ट्वीट ट्वीट बटन पर क्लिक किया, एम्बेड किए जाने योग्य ब्लॉकक्वाट (अंत में स्क्रिप्ट के बिना) को कॉपी-पेस्ट किया, और जोड़ा प्लेसहोल्डर को विशेषता

टैग.

प्लेसहोल्डर के साथ कोड उदाहरण:

  
 
त्वरित मोबाइल पृष्ठों को कैसे मान्य करें (#AMP) #गूगल #seo https://t.co/eVOSAtr5Ax 
 - होंगकीट (@hongkiat)  15 अगस्त, 2016 
  

शामिल करने के लिए स्क्रिप्ट:

3. amp-instagram

साथ में , आप ऐसा कर सकते हैं Instagram फ़ोटो और वीडियो एम्बेड करें अपने AMP पृष्ठों में.

आप के लिए आवश्यक हैं आयाम निर्दिष्ट करें के साथ एम्बेड की चौड़ाई तथा ऊंचाई विशेषताएँ, और आपको भी करना होगा पहचानकर्ता जोड़ें इंस्टाग्राम फोटो या वीडियो का उपयोग करते हुए डेटा-शोर्ट गुण.

आप URL के अंत में पहचानकर्ता पा सकते हैं, उदाहरण के लिए URL के नीचे की तस्वीर है https://www.instagram.com/p/-PFt7tF8Km/, इसलिए मुझे उपयोग करने की आवश्यकता है -PFt7tF8Km के लिए मूल्य के रूप में डेटा-शोर्ट गुण.

कोड उदाहरण:

कोड पूर्वावलोकन:

उत्तरदायी लेआउट के लिए, एएमपी स्वचालित रूप से आवश्यक स्थान की गणना करता है जो भी शामिल है “इंस्टाग्राम क्रोम” (खाता नाम, दिनांक, पसंद की संख्या, आदि).

इसका मतलब है कि आप किसी भी मूल्य का उपयोग कर सकते हैं चौड़ाई तथा ऊंचाई, जब तक दो मूल्य समान हैं (इंस्टाग्राम तस्वीरें आमतौर पर चौकोर होती हैं), क्योंकि एएमपी रनटाइम उपलब्ध स्थान के अनुसार छवि को आकार देगा.

यदि फोटो एक वर्ग नहीं होता है, तो आपको उसका वास्तविक उल्लेख करना होगा चौड़ाई तथा ऊंचाई मान.

के लिये निश्चित लेआउट, आपको अतिरिक्त स्थान शामिल करें (ऊपर और नीचे: +48 px, बाएँ और दाएँ: + 8px) जब आप चित्र आयामों की गणना करते हैं तो Instagram क्रोम के लिए आवश्यक.

शामिल करने के लिए स्क्रिप्ट:

4. amp-Pinterest

आपको अनुमति देता है या तो पिन विजेट या पिन इट बटन एम्बेड करें AMP HTML डॉक्यूमेंट में.

एक पिन विजेट एम्बेड करें

पिन विजेट को एम्बेड करने के लिए, आपको आयामों को निर्दिष्ट करना होगा, पिन के URL का उपयोग करके डेटा-यूआरएल विशेषता, और आपको भी जोड़ना होगा डेटा करते हैं = "embedPin" गुण.

कोड उदाहरण (डिफ़ॉल्ट आकार):

जैसे कि डिफ़ॉल्ट पिन विजेट काफी छोटा है, आप उपयोग करके बड़े संस्करण का विकल्प भी चुन सकते हैं डेटा-चौड़ाई = "मध्यम" गुण.

कोड उदाहरण (मध्यम आकार):

कोड पूर्वावलोकन (मध्यम आकार):

एक पिन यह बटन प्रदर्शित करें

आप भी कर सकते हैं पिन इट बटन जोड़ें की मदद से अपने AMP पेज पर जाएं घटक। इससे अलग चौड़ाई तथा ऊंचाई आयाम, तुम हो चार विशेषताओं को निर्दिष्ट करने की आवश्यकता है पिन यह बटन एम्बेड करने के लिए:

1. डेटा करते हैं = "buttonPin" एएमपी रनटाइम को यह बताने के लिए कि यह पिन इट बटन होगा
2. डेटा-यूआरएल उस URL के साथ जिसे आप साझा करना चाहते हैं
3. डेटा मीडिया छवि के निरपेक्ष URL के साथ आप उपयोगकर्ताओं को पिन करना चाहते हैं
4. डेटा-वर्णन विवरण में आप पिन बनाने के फॉर्म में दिखना चाहते हैं

वहां कई अलग बटन आकार, से चुनने के लिए, उपलब्ध सभी आकारों के लिए डॉक्स जांचें.

कोड उदाहरण:

इस उदाहरण में, मैंने एक पिन इट बटन बनाया, जो उपयोगकर्ताओं को इस पूर्व Hongkiat.com पोस्ट से एक छवि को पिन करने की अनुमति देगा। मैंने छोटे आयताकार बटन आकार का उपयोग किया.

कोड पूर्वावलोकन:

ध्यान दें कि आपको छवि के शीर्ष पर पिन इट बटन प्रदर्शित करने के लिए अतिरिक्त सीएसएस का उपयोग करने की आवश्यकता है.

आप का उपयोग करके एक Pinterest फ़ॉलो बटन भी बना सकते हैं डेटा करते हैं = "buttonFollow" नाम में फॉलो बटन के अंदर आप जिस नाम को दिखाना चाहते हैं उसे निर्दिष्ट करें डेटा लेबल और में अपने खाते का URL डेटा-href गुण.

कोड उदाहरण (फॉलो बटन):

शामिल करने के लिए स्क्रिप्ट:

5. amp-SoundCloud

साउंडक्लाउड एक लोकप्रिय ऑडियो वितरण मंच है जहाँ उपयोगकर्ता अपने संगीत को साझा कर सकते हैं। की मदद से घटक आप कर सकते हैं साउंडक्लाउड ट्रैक खेलें आपके AMP HTML पेज से ही सही.

यह घटक कर सकते हैं के साथ ही इस्तेमाल किया जा सकता है निश्चित ऊंचाई ख़ाका जिसका अर्थ है कि आपको केवल निर्दिष्ट करने की आवश्यकता है ऊंचाई, और चौड़ाई की गणना एएमपी रनटाइम द्वारा की जाएगी। नतीजतन एम्बेडेड साउंडक्लाउड ऑडियो प्लेयर होगा सभी उपलब्ध क्षैतिज स्थान भरें.

घटक प्रदर्शित किया जा सकता है या तो क्लासिक या दृश्य मोड. का मान सेट करके आप दो मोड में से चुन सकते हैं डेटा दृश्य या तो विशेषता सच या असत्य (डिफ़ॉल्ट है असत्य).

दोनों मोड में, आपको मोड का उपयोग करना होगा डेटा-TrackID की वजह से पहचानकर्ता निर्दिष्ट करें ऑडियो का; आप SoundCloud.com पर ऑडियो प्लेयर के नीचे शेयर बटन पर क्लिक करके ऑडियो आईडी पा सकते हैं, और एम्बेड कोड के लंबे-लंबे URL को देख सकते हैं.

क्लासिक मोड

क्लासिक मोड बाईं ओर एक छोटा थंबनेल चित्र प्रदर्शित करता है, और दाईं ओर ऑडियो प्लेयर। आप के लिए उचित मूल्य प्राप्त कर सकते हैं ऊंचाई SoundCloud.com पर एम्बेड कोड से विशेषता.

क्लासिक मोड में, यदि आप उपयोग करना चाहते हैं, तो आप ऑडियो प्लेयर का रंग निर्दिष्ट कर सकते हैं डेटा रंग विशेषता (आप इसे विज़ुअल मोड में नहीं कर सकते).

कोड उदाहरण (क्लासिक मोड):

कोड पूर्वावलोकन (क्लासिक मोड):

दृश्य मोड

में दृश्य मोड, चित्रित छवि ऑडियो प्लेयर के पीछे फैली हुई है। यहां, आप उचित भी पा सकते हैं ऊंचाई SoundCloud.com पर एम्बेड कोड में विज़ुअल मोड से संबंधित.

कोड उदाहरण (दृश्य मोड):

कोड उदाहरण (दृश्य मोड):

यदि आप चाहते हैं एक निजी ऑडियो एम्बेड करें, वैकल्पिक का उपयोग करें डेटा गुप्त-टोकन गुण.

शामिल करने के लिए स्क्रिप्ट:

6. amp-बेल

Vine एक शॉर्ट-फॉर्म वीडियो शेयरिंग साइट है जिस पर आप अपने दोस्तों के साथ 6-सेकंड लंबे वीडियो साझा कर सकते हैं। घटक आसानी से संभव बनाता है Vine वीडियो एम्बेड करें अपने AMP HTML पृष्ठों में.

यह एएमपी घटक काफी सरल है, आपको केवल आयाम जोड़ने की जरूरत है, और बेल वीडियो की आईडी डेटा-vineid विशेषता। आप प्रत्येक Vine के URL से ID प्राप्त कर सकते हैं.

जैसा कि वाइन स्क्वायर हैं, यदि आप उत्तरदायी लेआउट का उपयोग करते हैं, तो इंस्टाग्राम एम्बेड के साथ भी यही नियम लागू होता है; आप किसी भी मूल्य को जोड़ सकते हैं चौड़ाई तथा ऊंचाई गुण, जब तक वे बराबर नहीं हो जाते वे ठीक से काम करेंगे.

कोड उदाहरण:

कोड पूर्वावलोकन:

शामिल करने के लिए स्क्रिप्ट:

7. amp-यूट्यूब

आप ऐसा कर सकते हैं YouTube वीडियो एम्बेड करें की मदद से AMP पृष्ठों पर अंग.

ऐसा करने के लिए, आपको आयाम जोड़ने की आवश्यकता है, साथ ही वीडियो की आईडी भी डेटा-videoid विशेषता। जब निर्दिष्ट किया जा रहा हो चौड़ाई तथा ऊंचाई, यह महत्वपूर्ण है पहलू अनुपात पर ध्यान दें.

आप भी कर सकते हैं YouTube एम्बेड के पैरामीटर का उपयोग करें एएमपी दस्तावेजों में, बस पैरामीटर का नाम डालें के बाद डेटा-परम- उपसर्ग.

कोड उदाहरण:

इस उदाहरण में, मैंने इसका उपयोग किया शुरु में YouTube पैरामीटर डेटा-परम शुरू वीडियो को 43 के दशक में शुरू करने के लिए विशेषता.

कोड पूर्वावलोकन:

शामिल करने के लिए स्क्रिप्ट:

अन्य वीडियो साझाकरण सेवाएँ

एएमपी में अन्य वीडियो साझाकरण सेवाओं से संबंधित घटक भी हैं, जो के समान काम करते हैं . आप YouTube के अलावा अन्य प्रदाताओं से वीडियो एम्बेड के लिए निम्न विस्तारित एएमपी घटकों का उपयोग कर सकते हैं:

• Vimeo एम्बेड के लिए
• Dailymotion एम्बेड के लिए
• Brightcove के लिए एम्बेड करता है

8. amp-सामाजिक-शेयर

सोशल मीडिया एम्बेड के अलावा, आप भी कर सकते हैं सामाजिक शेयर बटन प्रदर्शित करें का उपयोग करके अपने AMP पृष्ठों पर अंग.

सोशल शेयर फीचर है कुछ प्रदाताओं के लिए preconfigured, लेकिन सही सेटिंग्स के साथ आप उपयोग कर सकते हैं किसी भी अन्य सामाजिक शेयर बटन के लिए घटक.

पूर्व-कॉन्फ़िगर शेयर बटन

पूर्व-कॉन्फ़िगर शेयर बटन बहुत अधिक सेटिंग्स की आवश्यकता नहीं है; आपको परिभाषित करना होगा चौड़ाई (डिफ़ॉल्ट 60px है) और ऊंचाई (डिफ़ॉल्ट 44px है) विशेषताएँ, और में सोशल मीडिया प्रदाता का नाम प्रकार गुण.

फेसबुक के साथ, आपको फेसबुक ऐप आईडी को भी निर्दिष्ट करना होगा डेटा-परम-APP_ID गुण.

कोड उदाहरण:

कोड पूर्वावलोकन:

पूर्व विन्यास धारणा बनाता है जो URL आप साझा करना चाहते हैं वह वर्तमान पृष्ठ का कैनोनिकल URL है, और जिस पाठ को आप अपने हिस्से में शामिल करना चाहते हैं वह पृष्ठ का शीर्षक.

यदि आप किसी अन्य कॉन्फ़िगरेशन का उपयोग करना चाहते हैं, तो आप निम्न के साथ कर सकते हैं तीन वैकल्पिक विशेषताएँ:

1. डेटा-पाठ उस पाठ के लिए जिसे आप शेयर में शामिल करना चाहते हैं
2. डेटा-यूआरएल उस URL के लिए जिसे आप साझा करना चाहते हैं
3. डेटा-रोपण उस व्यक्ति या प्रदाता के नाम के लिए जिसे आप चाहते हैं कि आपके हिस्से को जिम्मेदार ठहराया जाए

असंबद्ध शेयर बटन

के सामाजिक शेयर बटन प्रदर्शित करने के लिए अपुष्ट प्रदाता, जैसे कि व्हाट्सएप, आपको चाहिए प्रदाता के कस्टम प्रोटोकॉल को निर्दिष्ट करें में डेटा शेयर-endpoint विशेषता। डॉक्स में देखें कि आप यह कैसे कर सकते हैं.

शामिल करने के लिए स्क्रिप्ट: