फेसबुक पोस्ट लिंक छवि


95

जब कोई फेसबुक पर एक लिंक पोस्ट करता है, तो एक स्क्रिप्ट आमतौर पर किसी भी छवियों के लिए उस लिंक को स्कैन करती है, और पोस्ट के बगल में एक त्वरित थंबनेल प्रदर्शित करती है। हालांकि कुछ URL के लिए (मेरा सहित), FB कुछ भी लेने के लिए प्रतीत नहीं होता है, उस पेज पर कई चित्र होने के बावजूद।

मैंने पढ़ा है कि FB उस छवि के लिए "image_src" rel टैग को प्राथमिकता देता है जिसे उपयोगकर्ता निर्दिष्ट करना चाहता है, लेकिन यह मेरी साइट के लिए उस थंबनेल को उत्पन्न नहीं करता है।

मेरा url सीधे DNS में जाता है, और इसे अग्रेषित नहीं किया जाता है, इसलिए मुझे नहीं लगता कि यह समस्या हो सकती है।

क्या किसी को इस बात का अंदाजा है कि FB मेरी साइट से कोई थंबनेल क्यों नहीं बना सकता है?


यदि आपने हमें अपनी साइट का लिंक दिया (या कोई अन्य जो काम नहीं करता है) - तो यह कुछ विचारों को भड़काने में मदद करेगा।
निक फोर्टेस्क्यू

यहाँ आप देख सकते हैं कि यह कैसे काम करता है! मैं इसे PHP + jQuery का उपयोग करके बनाता हूं। स्रोत कोड डाउनलोड करने के लिए उपलब्ध है। उम्मीद करता हु आपको आनंद मिला हो! lab.leocardz.com/facebook-link-preview-php--jquery
लियोनार्डो

और अगर आप Google प्लस पर भी यही करना चाहते हैं, तो यहां सबसे अच्छा संदर्भित लिंक मुझे मिल सकता है: stackoverflow.com/questions/7985398/…
cregox

जवाबों:


119

सबसे आसान तरीका सिर्फ एक लिंक टैग है:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

लेकिन कुछ अन्य चीजें हैं जो आप अपनी साइट पर जोड़ सकते हैं ताकि इसे अधिक सोशल मीडिया के अनुकूल बनाया जा सके:

ग्राफ टैग खोलें

ओपन ग्राफ़ टैग वे टैग होते हैं, जिन्हें आप <head>अपनी वेबसाइट पर जोड़कर उस इकाई का वर्णन करते हैं, जो आपके पृष्ठ का प्रतिनिधित्व करता है, चाहे वह एक बैंड, रेस्तरां, ब्लॉग या कुछ और हो।

एक खुला ग्राफ़ टैग इस तरह दिखता है:

<meta property="og:tag name" content="tag value"/> 

यदि आप ओपन ग्राफ़ टैग का उपयोग करते हैं, तो निम्नलिखित छह आवश्यक हैं:

  • og:title - इकाई का शीर्षक।
  • og:type- इकाई का प्रकार। आपको ओपन ग्राफ़ प्रकारों की सूची से एक प्रकार का चयन करना होगा।
  • og:image- इकाई का प्रतिनिधित्व करने वाली छवि का URL। छवियाँ 50 पिक्सेल से कम से कम 50 पिक्सेल होनी चाहिए। चौकोर छवियां सबसे अच्छा काम करती हैं, लेकिन जब तक आप लंबे होते हैं तब तक आपको तीन गुना तक की छवियों का उपयोग करने की अनुमति होती है।
  • og:url- इकाई का प्रतिनिधित्व करने वाले पृष्ठ का कैनोनिकल, स्थायी URL। जब आप ओपन ग्राफ़ टैग का उपयोग करते हैं, तो लाइक बटन og:urlयूआरएल के बजाय लाइक बटन कोड में एक लिंक पोस्ट करता है ।
  • og:site_name - आपकी साइट के लिए एक मानव-पठनीय नाम, उदाहरण के लिए, "IMDb"।
  • fb:adminsया fb:app_id- पृष्ठ प्रशासकों की फेसबुक आईडी या फेसबुक प्लेटफॉर्म एप्लिकेशन आईडी की अल्पविराम से अलग सूची। कम से कम, केवल अपनी खुद की फेसबुक आईडी शामिल करें।

ओपन ग्राफ़ टैग के बारे में अधिक जानकारी और आपके पेज को प्रशासित करने के विवरण को ओपन ग्राफ़ प्रोटोकॉल दस्तावेज़ पर पाया जा सकता है।

http://developers.facebook.com/docs/reference/plugins/like


5
मैंने इस त्रुटि को लिंट टूल से रिसीव किया। All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.। बस एक फी
ट्रेवर

मैंने अपने कोड में og टैग जोड़े हैं और जब मैंने इसे facebook के ऑब्जेक्ट ऑब्जेक्ट डिबगर टूल के साथ परीक्षण किया, तो यह मुझे सही जानकारी दिखाता है जैसा कि मैंने ogs टैग में सहेजा है, लेकिन जब मैं पृष्ठ को अपने fb खाते पर लिंक करने का प्रयास करता हूं, तो यह दिखाता है कैश्ड कॉपी। कैश्ड कॉपी में कितना समय रहता है? कैश्ड कॉपी को फ्लश करने का कोई और तरीका है?
KAsh

बस आपको बता दें कि, फेसबुक ऐप के भीतर AppLinks ( applinks.org ) का उपयोग करते हुए किसी पोस्ट में एक छवि जोड़ने का एकमात्र तरीका <लिंक> टैग का उपयोग करना है, एक ओग के साथ <मेटा> टैग का उपयोग करना: छवि काम नहीं करेगी ।
एमिनो

इसमें प्रकारों आदि की एक सूची है, और कुछ अन्य उपयोगी जानकारी है।
विल्फ

61

मुझे पता है कि यह सवाल पुराना है, लेकिन मैंने हाल ही में एक ही समस्या से निपटा है और कुछ हफ़्ते के लिए इस पर चक्कर लगा रहा हूं। Google पर एकाधिक खोजों ने बहुत सारी उपयोगी जानकारी को बदल दिया, लेकिन इसका अधिकांश भाग Open Graph टैग पर केंद्रित था, जिसे उपयोग करने में मेरी कोई दिलचस्पी नहीं थी। मेरी साइट के कई मुद्दे थे, लेकिन यहाँ कुछ मूल बातें हैं।

  1. जैसा कि EightyEight ने कहा, सुनिश्चित करें कि आपका HTML वैध है - और वही आपके जावास्क्रिप्ट और सर्वर-साइड कोड (PHP, ASP, आदि) के लिए जाता है। मेरे पास कोड के एक टुकड़े में एक छोटी सी PHP त्रुटि थी जो मुख्य पृष्ठ से सर्वर को एक अलग कॉल के रूप में निष्पादित कर रही थी। कई विचित्र संयोगों के कारण, वह कोड 500 त्रुटि उत्पन्न कर रहा था - लेकिन केवल IE6 और W3C सत्यापनकर्ता और फेसबुक पेज क्रॉलर जैसे सख्त पार्सिंग इंजनों के लिए। समस्या आधुनिक ब्राउज़रों (Chrome 4, FF 3.5, IE 8, आदि) में दिखाई नहीं दी, इसलिए मैंने इसे तुरंत नहीं देखा, लेकिन पुराने / सख्त ग्राहक हर बार 500 दिखा रहे थे और यही मुख्य कारण था FB wasn हमारे पृष्ठ को रेंगना नहीं है (जब बाकी सब सही लग रहा था)।

  2. रैंडी की प्रतिक्रिया के बारे में, वह सही है कि आपके अपडेट किए जाने के लंबे समय बाद तक फेसबुक आपके पेज की एक पुरानी कैश्ड कॉपी रखेगा। एफबी का दावा है कि यह केवल 24 घंटे के लिए आयोजित किया जाता है, लेकिन मैंने इससे कहीं अधिक समय का अनुभव किया। FORTUNATELY, FB ने अपना "URL Linter" टूल जारी किया है जो आपको यह दिखाएगा कि FB पर साझा किए जाने पर आपका पृष्ठ कैसे दिखाई देगा, और यह FB को आपके पृष्ठ के कैश को तुरंत अपडेट करने के लिए बाध्य करेगा। यह एक जीवनरक्षक उपकरण था। आप इसे http://developers.facebook.com/tools/lint/ पर देख सकते हैं

  3. URL लिंटर टूल के बारे में, ध्यान रखें कि फ़ेसबुक पर किसी URL का प्रत्येक भिन्न रूप अलग-अलग कैश किया गया है, इसलिए "www.example.com" "example.com" के समान नहीं है। साथ ही, अद्वितीय पूंजीकरण भी संग्रहीत किया जाता है, इसलिए "ExampleOne.com" "exampleone.com" के समान नहीं है। (इससे मेरे मुवक्किल और स्वयं के बीच बहुत भ्रम पैदा हो गया जब मुझे यह दिखाई दिया कि कैश ठीक-ठाक अपडेट हो गया है और क्लाइंट का दावा है कि वे अपडेट नहीं देख रहे थे। मुझे लगता है कि मैं exampleone.com देख रहा था और इस्तेमाल किया था। कैश को अपडेट करने के लिए लाइनर, लेकिन वे exampleOne.com को देख रहे थे, जिसे मैंने लाइनर को सबमिट नहीं किया था। नतीजतन, मैंने URL को लाइनर्स को कवर करने के लिए URL के कुछ भिन्नरूपों को सबमिट करना समाप्त कर दिया।)

  4. Image_src लिंक टैग का उपयोग करने के लिए WyrdNEXUS की सलाह स्पॉट-ऑन है। यह आपको यह सुनिश्चित करने की अनुमति देता है कि एफबी आपके पृष्ठ के लिए सबसे अच्छी संभव छवि को स्क्रैप कर रहा है। वहाँ कुछ अलग दिशा निर्देशों के बारे में क्या छवि फ़ाइल होना चाहिए चश्मा है, लेकिन मैं सफलतापूर्वक एक 128px वर्ग छवि का उपयोग किया है और एक 130x97 छवि के रूप में अच्छी तरह से इसे बनाने देखा है। यहाँ http://developers.facebook.com/docs/reference/plugins/like/ से फेसबुक का आधिकारिक दस्तावेज है :

    छवियाँ 50 पिक्सेल से कम से कम 50 पिक्सेल होनी चाहिए। चौकोर छवियां सबसे अच्छा काम करती हैं, लेकिन जब तक आप लंबे होते हैं तब तक आपको तीन गुना तक की छवियों का उपयोग करने की अनुमति होती है।

    जाहिर है, एफबी आपके लिए एक बड़ी छवि का आकार बदल देगा, लेकिन यदि आप पहले से ही इसका आकार बदल देते हैं तो आपको लगभग हमेशा बेहतर परिणाम मिलेंगे।

  5. माइक कूपर के eHow लेख के लिंक के बारे में, उस लेख में चरण # 1 का उपयोग करने से बचें। जब लेख लिखा गया था और जब माइक ने लिंक पोस्ट किया था, तो यह वैध सलाह थी, लेकिन अब यह बेहतर है कि पूर्वावलोकन के लिए URL लाइनर टूल का उपयोग करें, यह साझा करने के दौरान कि आपका पृष्ठ कैसे दिखाई देगा। Linter का उपयोग करके, आप FB को पृष्ठ को कॉपी (संभावित) खराब कॉपी करने से पहले इसका कारण नहीं समझ पाएंगे।


मैं दिनों से संघर्ष कर रहा था और अपना थंबनेल सही ढंग से अपडेट नहीं था। फ़ेसबुक लिंटर टूल तत्काल ने मेरी समस्या हल कर दी - यह फेसबुक को अपने कैश को अपडेट करने के लिए मिला है! हुर्रे!
हादी

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

4
लिंट टूल ने अपना नाम बदल दिया। अब यह सिर्फ डिबग है : Developers.facebook.com/tools/debug - सब से मैं बता सकता हूं, यह tl है; इस सब के डॉ संस्करण: बस उपकरण का उपयोग करें!
cregox

11

यहां उपलब्ध फेसबुक लिंटर का उपयोग करें। http://developers.facebook.com/tools/lint/

यह आपके लिंक की जाँच करेगा और किसी भी चित्र को पुनः प्राप्त करेगा। यह किसी पुराने कैश को भी साफ करता है।

या यह कोशिश करें - https://developers.facebook.com/tools/debug


11

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

चरण 1: हेड टैग के तहत मेटा टैग जोड़ें

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

NEXT STEP: नीचे दिए गए लिंक https://developers.facebook.com/tools/debug पर क्लिक करें

अपने URL को टेक्स्ट बॉक्स में जोड़ें (जैसे http://www.test.com/ ) जहाँ आपने टैग्स का उल्लेख किया है। DEBUG बटन पर क्लिक करें।

हॊ गया।

आप यहां https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/ को सत्यापित कर सकते हैं

उपरोक्त यूआरएल में, यू = आपकी वेबसाइट लिंक

का आनंद लें !!!!


कृपया कई प्रश्नों के सटीक उत्तर न दें: यह या तो सभी के लिए अच्छा नहीं है या प्रश्न डुप्लिकेट हैं जिन्हें ध्वजांकित / बंद किया जाना चाहिए।
क्लियोपेट्रा

हैलो क्लियोपेट्रा, मैं दूसरों की मदद करने के लिए उत्तर पोस्ट करने के लिए सोच रहा था। मुझे लगता है कि आपकी बात पूरी तरह से मान्य है। में इसका ध्यान रखूँगा। धन्यवाद मित्र
गौरव १२

@ Gaurav123 परीक्षण लिंक मृत है। हालाँकि, मैंने खुद फेसबुक पर मैसेज करके इसकी जाँच की। बहुत मददगार जवाब के लिए बहुत बहुत धन्यवाद!
gsamaras



2

दरअसल, यदि आपने पहले ही फेसबुक पर उस पेज को जोड़ने की कोशिश की है, तो "image_src" लिंक को जोड़ने से पहले, फेसबुक पुरानी कैश्ड कॉपी का उपयोग करता रहेगा और आपके परिवर्तन भी नहीं देखेगा। 'Www' को हटाकर या जोड़कर, या परीक्षण करने के लिए अपने पृष्ठ को डुप्लिकेट करके URL को संशोधित करने का प्रयास करें।


1

मैंने देखा है कि फेसबुक वेबसाइटों से थंबनेल नहीं लेता है यदि वे https से शुरू करते हैं, तो क्या यह आपका मामला है?


1

एक ही समस्या थी और पता चला कि मेरा सिर बंद करने का टैग गलत जगह पर था


0

पुराना सवाल है लेकिन हाल ही में मुझे फेसबुक पर स्टेटस अपडेट में नहीं दिखाई दे रहे लिंक से थंबनेल इमेज के साथ एक ही इश्यू में चल रहा था। मैं कई ग्राहकों के लिए पोस्ट करता हूं और यह अपेक्षाकृत नया है।

FB अब लंबे URL को पसंद नहीं करता है - यदि आप एक URL शॉर्टनर जैसे goo.gl या bitly.com का उपयोग करते हैं, तो आपके लिंक / पोस्ट से थंबनेल आपके FB अपडेट में दिखाई देगा।


0

कुछ इस तरह का उपयोग करके देखें:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

जब तक आप अपनी छवि के लिए एक पूर्ण पथ का उपयोग करते हैं, तब तक फ़ायरफ़ॉक्स पर ठीक काम करता है।

परेशानी यह है कि यह किसी कारण से नीचे की ओर लंबवत हो जाता है। छवि 200 x 200 है जैसा कि मैंने कहीं पढ़ा है।


मैं एक लिंक टैग के लिए कोड पोस्ट करने का इरादा रखता हूं जो पोस्ट नहीं किया क्योंकि मैं बेवकूफ हूं। माफ़ करना।
user2494810

-1

यदि आपने seo के लिए किसी भी प्लगइन का उपयोग किया है, तो 1 अपनी seo plugin सेटिंग की जांच करें। फिर Noindex सेटिंग का पता करें यदि Enable Media for Noindex है तो इसे अक्षम करें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.