मेरा URL साझा करते समय फ़ेसबुक शेरर इमेज और अन्य मेटाडेटा का चयन कैसे करता है?

393

फेसबुक शेरर का उपयोग करते समय, फेसबुक उपयोगकर्ता को उनके लिंक के लिए पूर्वावलोकन के रूप में स्रोत से खींची गई कुछ छवियों में से 1 का उपयोग करने का विकल्प प्रदान करेगा। इन छवियों को कैसे चुना जाता है, और मैं यह कैसे सुनिश्चित कर सकता हूं कि मेरे पेज पर कोई विशेष छवि हमेशा इस सूची में शामिल हो?

facebook facebook-opengraph facebook-sharer

— सैम्पसन
स्रोत

मेटा प्रॉपर्टी का उपयोग करते समय यह वास्तव में काम करता है, लेकिन यह अमान्य html है, जो मुझे बहुत अजीब लगता है! एक सत्यापनकर्ता के माध्यम से इसे चलाने का प्रयास करें और आप देखेंगे। यह मुझे चकित करता है कि पृथ्वी पर वे वैध HTML के साथ काम करने के लिए क्यों नहीं मिल सकते हैं ??

1

देख developers.facebook.com/docs/opengraph ओग = ": <html xmlns opengraphprotocol.org/schema " ...

— cope360

3

परिवर्तन करने के बाद टिप .. लिंटर के माध्यम से अपने पेज भागो और फेसबुक थंबनेल, आदि के लिए उस पृष्ठ अद्यतन करेगा developers.facebook.com/tools/lint

मुझे निम्नलिखित लेख भी बहुत उपयोगी लगे: किस URL, पाठ और IMG को साझा करने के लिए कैसे अनुकूलित करें

— J0ANMM

593

मैं फेसबुक को कैसे बताऊं कि मेरे पेज को साझा करने पर किस छवि का उपयोग करना है?

फेसबुक में ओपन-ग्राफ मेटा टैग का एक सेट है जो यह तय करता है कि किस छवि को दिखाना है।

फेसबुक छवि के लिए कुंजी एक हैं:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

और यह <head></head>आपके पृष्ठ के शीर्ष पर टैग के अंदर मौजूद होना चाहिए ।

यदि ये टैग मौजूद नहीं हैं, तो यह एक छवि को निर्दिष्ट करने के उनके पुराने तरीके की तलाश करेगा <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>:। यदि न तो मौजूद हैं, तो फेसबुक आपके पेज की सामग्री को देखेगा और आपके पेज से ऐसी छवियां चुनेगा जो इसके शेयर की छवि मानदंड को पूरा करें: छवि को 200px तक कम से कम 200px होना चाहिए, अधिकतम 3: 1 का पहलू अनुपात है, और पीएनजी में, JPEG या GIF प्रारूप।

क्या मैं उपयोगकर्ता को छवि का चयन करने की अनुमति देने के लिए कई छवियां निर्दिष्ट कर सकता हूं?

हां, आपको बस कई छवि मेटा टैग जोड़ने की जरूरत है, जिस क्रम में आप उन्हें दिखाना चाहते हैं। उपयोगकर्ता को तब एक छवि चयनकर्ता संवाद के साथ प्रस्तुत किया जाएगा:
फेसबुक छवि चयनकर्ता

मैंने उचित छवि मेटा टैग निर्दिष्ट किया है। फेसबुक परिवर्तनों को स्वीकार क्यों नहीं कर रहा है?

एक बार एक यूआरएल साझा किए जाने के बाद, फेसबुक के क्रॉलर, जिसके पास एक उपयोगकर्ता एजेंट है facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), आपके पेज तक पहुंच जाएगा और मेटा जानकारी को कैश करेगा। फेसबुक सर्वर को कैशे को खाली करने के लिए मजबूर करने के लिए, फेसबुक यूआरएल डिबगर / लाइनर टूल का उपयोग करें जो उन्होंने कैश को रीफ्रेश करने के लिए जून 2010 में लॉन्च किया था और आपके पेज पर किसी मेटा टैग मुद्दों का निवारण करें।

साथ ही, पेज पर मौजूद छवियां सार्वजनिक रूप से फेसबुक क्रॉलर तक पहुंचनी चाहिए। आपको केवल /yourimage.jpg के बजाय http://example.com/yourimage.jpg जैसे पूर्ण यूआरएल को निर्दिष्ट करना चाहिए ।

क्या मैं इन मेटा टैग्स को क्लाइंट साइड कोड जैसे जावास्क्रिप्ट या jQuery के साथ अपडेट कर सकता हूं? सर्च इंजन क्रॉलरों की तरह, फेसबुक स्क्रैपर स्क्रिप्ट को निष्पादित नहीं करता है, इसलिए जब भी पेज डाउनलोड किया जाता है तो जो भी मेटा टैग मौजूद होते हैं वे मेटा टैग होते हैं जो छवि चयन के लिए उपयोग किए जाते हैं।

इन टैगों को जोड़ने से मेरा पृष्ठ अब मान्य नहीं होता है। मैं इसे कैसे ठीक करूं?

आप अपने टैग में आवश्यक फेसबुक नामस्थान जोड़ सकते हैं और आपके पेज को तब सत्यापन पास करना चाहिए:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">

— bkaid
स्रोत

1

एक और जगह यह दिखती है: <link rel="apple-touch-icon" href="...">(यह है कि यह एसओ छवि कैसे मिलती है)

— यारिन

2

@ यारिन मुझे यकीन नहीं है कि यह सच है। StackOverflow में image_src प्रॉपर्टी सेट है, जो वह उपयोग कर रहा है। ऐप्पल-टच-आइकन के लिए फ़ाइल का नाम अलग है और इसका उपयोग नहीं किया जा रहा है।

— बकायदा

3

क्या मैं छवि का ऑर्डर चुन सकता हूं? मेरे मामले में, मेटा टैग की छवि से पहले एक और चित्र दिखाई देता है।

— vicenrele

23

न्यूनतम छवि आकार अब 200x200px है।

— Tr1stan

1

यहाँ प्रारंभ करें मैंने 300g पर img का आकार निर्धारित किया है, अब यह काम करने लगता है। धन्यवाद @ Tr1stan

— उर्स

37

जब आप फेसबुक के लिए साझा करते हैं, तो आपको अपने HTML को अगले मेटा टैग्स के हेड सेक्शन में जोड़ना होगा:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

और बस!

एफबी आपको जो बताता है, उसके अनुसार आपको बटन जोड़ना चाहिए।

आपके लिए आवश्यक सभी जानकारी www.facebook.com/share/ पर है

— मटीस
स्रोत

28

2013 तक, यदि आप facebook.com/sharer.php (PHP) का उपयोग कर रहे हैं, तो आप बस किसी भी बटन / लिंक को बना सकते हैं जैसे:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

लिंक क्वेरी पैरामीटर:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

यह सरल है: आपको किसी भी js या अन्य सेटिंग्स की आवश्यकता नहीं है। सिर्फ एक HTML कच्चा लिंक है। किसी भी तरह से आप चाहते हैं एक टैग शैली।

— एंटोनियो मैक्स
स्रोत

p[images][0]ठीक वैसा ही था जैसा मुझे चाहिए था। ogटैग एक ही छवि को साझा करने के लिए काम करते हैं, लेकिन मुझे एक ही पृष्ठ से कई छवियों को साझा करने की आवश्यकता है।

— वाकिंगफ्रूट

4

यह नया 'स्वीकृत उत्तर' होना चाहिए - इतना सरल और सीधा। इसके लिए धन्यवाद, दोस्त।

— माइक

एंटोनियो, क्या आपके पास एक स्रोत लिंक है जो आपने ऊपर दिखाया है? मैं developers.facebook.com में यह देखने के लिए कोशिश कर रहा हूँ, लेकिन सिवाय कुछ भी खोजने में असमर्थ इस । कृपया मदद कीजिए।

— Mr_Green

@Mr_Green इसके बारे में है। यह सुविधा 'पदावनत' कर दी गई थी, लेकिन अब आधिकारिक डॉक्स पर वापस आ गई है। वैसे भी, मेरा मानना है कि मेरा जवाब काम करने के लिए मूल सेटिंग्स को कवर करता है।

— एंटोनियो मैक्स

@AntonioMax कृपया बताएं कि s=100आपकी पोस्ट में क्या है ?

— Mr_Green

13

निम्नलिखित टैग को इसमें डालें head:

<link rel="image_src" href="/path/to/your/image"/>

से http://www.facebook.com/share_partners.php

जहां तक यह इस टैग के अभाव में डिफ़ॉल्ट के रूप में क्या चुनता है, मुझे यकीन नहीं है।

— मैट ब्रिज
स्रोत

12

मेरे अनुभव से, http://www.facebook.com/sharer.php मेटा टैग का उपयोग नहीं करता है। यह आपके द्वारा पारित स्ट्रिंग का उपयोग करता है। निचे देखो।

http://www.facebook.com/sharer.php?s=100&p[title]=THIS मेरा शीर्षक एंड पी [सारांश] है = यह मेरा सारांश और इस पी है [यूआरएल] = http: //www.MYURL.com&&p [छवियों] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

मेटा टैग्स फेसबुक के डेवलपर के साथ काम करते हैं जैसे / बटन भेजते हैं, जैसा कि अन्य ओपन ग्राफ़ की जानकारी है। इसलिए यदि आप फेसबुक के वास्तविक तत्वों में से एक का उपयोग करते हैं जैसे कि टिप्पणी और इस तरह, यह सब ओपन ग्राफ़ सामान में टाई जाएगा।

UPDATE: क्वेरी स्ट्रिंग
1 == ? यू मूल्य में शेरर * नोट? एस? यू मूल्य के उपयोग के दो तरीके हैं : http://www.facebook.com/sharer.php?s + सामग्री ऊपर से
~ ~> स्ट्रिंग से जानकारी खींचेंगे।
2 ==> URL: http://www.facebook.com/sharer.php?u=url जहां url एक वास्तविक url के बराबर होता है
~~> url मान में दिए गए पृष्ठ को परिमार्जन करेगा
~~> आप मूल्यों का परीक्षण कर सकते हैं यहाँ: https://developers.facebook.com/tools/debug

— जेसन लिडॉन
स्रोत

बहुत मददगार। धन्यवाद! : डी

— आरोन ग्रे

क्या कोई कानूनी तरीका है कि किसी अन्य वेबसाइट में एक यूआरएल से सामग्री प्राप्त करने के लिए उस हिस्सेदार का उपयोग करें? मैं फेसबुक एपीआई और सामान के बारे में ज्यादा नहीं जानता ...

— Lyth

URL विकल्प का उपयोग करके देखें। यदि पृष्ठ में OG टैग हैं, तो FB उन्हें परिमार्जन करेगा। उस पृष्ठ का परीक्षण करें जिसे आप यहां उपयोग करना चाहते हैं: Developers.facebook.com/tools/debug

— जेसन लिडॉन

11

पुराना तरीका, अब काम नहीं करता:

<link rel="image_src" href="http://yoururl/yourimage"/>

नए तरीके से रिपोर्ट किया गया, यह भी काम नहीं करता है:

<meta property="og:image" content="http://yoururl/yourimage"/>

इसने बेतरतीब ढंग से काम किया और पहले दिन के दौरान मैंने इसे लागू किया, तब से काम नहीं किया।

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

— थियो
स्रोत

मुझे भी यह दिक्कत है। लिंटर बिना किसी त्रुटि के रिपोर्ट करता है और मेरी छवि को सही ढंग से दिखाता है, लेकिन जब मैं अपनी साइट पर शेयर बटन पर क्लिक करता हूं तो शेयर इंटरफ़ेस में बिल्कुल कोई छवि नहीं होती है।

— ल्यूक ग्रिफिथ्स

image_src अब फेसबुक के लिए काम नहीं करता है, लेकिन कुछ सेवा अभी भी इसका इस्तेमाल करते हैं (टेलीग्राम क्लाइंट, आदि)

— एंड्रेस एसके

10

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

चरण 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." />

अगला चरण:
नीचे दिए लिंक पर क्लिक करें
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
स्रोत

डीबगर मददगार था।

— konsolebox

2

सुरक्षित HTTPS के लिए

<meta property="og:image:secure_url" content="https://image.path.png" />

— स्टीफन मिशेव
स्रोत

1

मुझे यह समस्या थी और इसे मैनुअल -84 के सुझाव के साथ तय किया। 400x400px छवि का उपयोग करना बहुत अच्छा काम करता है, जबकि मेरी छोटी छवि कभी भी हिस्सेदार में दिखाई नहीं देती है।

ध्यान दें कि फेसबुक ओग के रूप में एक न्यूनतम 200px वर्ग छवि की सिफारिश करता है: छवि टैग: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

— विलियम
स्रोत

1

यह मेरे लिए काम कर रहा है: मैंने टैग के ठीक बाद पेज पर वांछित थंबनेल छवि रखी और इसे देखने के लिए बहुत छोटा बना दिया।

<img src="imagename.jpg" width="1" height="1" />

मैंने इसकी ऊंचाई 0 और चौड़ाई 0 के साथ परीक्षण नहीं किया है, लेकिन यह शायद अभी भी काम करेगा .. यह गारंटी नहीं है कि उपयोगकर्ता इस छवि का चयन करेगा ..

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

— डेनियल बर्नाल
स्रोत

1

टैग के बाद - क्या आपका मतलब है: "बॉडी टैग के बाद"?

— एलेक्सिस विल्के

हां, मेरा मानना है कि उनका यही मतलब है। मैंने यह एक साइट पर बहुत पहले किया था, लेकिन style="display:none;"इसे 1x1 पिक्सेल पर सेट करने के बजाय उपयोग किया ।

— माइक

1

कस्टम इमेज दिखाने के लिए शेयर डायलॉग के बजाय फेसबुक फीड डायलॉग का इस्तेमाल करें

उदाहरण:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description

— kittu
स्रोत

0

मुझे एक विशिष्ट पोस्ट से सही छवि चुनने के लिए फेसबुक नहीं मिला, इसलिए मैंने वही किया जो इस पृष्ठ पर उल्लिखित है:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

दूसरे शब्दों में, कुछ इस तरह से:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

मूल रूप से, यदि आप इस पोस्ट के लिए जो कुछ भी बदले हैं, उसके लिए मेटा सामग्री को बदलने के लिए इसे प्राप्त करने के लिए अपनी साइट के HTML में एक कठिन कथन को कोड करने जा रहे हैं। यह एक गन्दा समाधान है, लेकिन यह काम करता है।

— मिशेल ग्लोसर
स्रोत