फेसबुक पर शेयर लागू करते समय थंबनेल के रूप में विशेष छवि कैसे दिखाएं?


98

मैं इस विधि को साझा करने का प्रयास कर रहा हूं। मैं निम्नानुसार कोड का उपयोग कर रहा हूं

http://www.facebook.com/share.php?u=my_website_url

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

आप इसे मेरे ब्लॉग पते से देख सकते हैं


जवाबों:


80

इस ब्लॉग पोस्ट से आपका जवाब लगता है: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

विशेष रूप से, निम्न जैसे टैग का उपयोग करें:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

उदाहरण में छवि का नाम समान होना चाहिए।

"बनाना सुनिश्चित करें पूर्वावलोकन कार्य"

नोट: टैग सही हो सकता है लेकिन फेसबुक केवल हर 24 घंटे में स्क्रैप करता है, उनके प्रलेखन के अनुसार। छवि को फेसबुक में लाने के लिए फेसबुक लिंट पेज का उपयोग करें।

http://developers.facebook.com/tools/lint/


6
फेसबुक ने खुद बताया है कि लिंक रिले विशेषता का उपयोग हमेशा कुछ लोगों के लिए काम नहीं करता है। मुझे मेटा प्रॉपर्टी = "og: image" बहुत अधिक विश्वसनीय लगती है। नीचे दिया गया उत्तर सही होना चाहिए।
ड्वेन चारिंगटन

शायद दोनों विकल्पों का सबसे अच्छा उपयोग करें
योसेफ

6
इस मामले में छवि का प्रकार 'छवि / जीआईएफ' होना चाहिए, क्या ऐसा नहीं होना चाहिए?
जोकिन एल। रोबल्स

98

फेसबुक की युक्ति से, इस तरह एक कोड का उपयोग करें:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

सोर्स: फेसबुक शेयर


यह केवल नए एपीआई, नहीं पुराने share.php लिंक के लिए काम करने के लिए लगता है
chrismarx

34

मेरे टैग सही थे लेकिन फेसबुक केवल हर 24 घंटे में स्क्रैप करता है, उनके प्रलेखन के अनुसार। फेसबुक लिंट पेज का उपयोग करने से फेसबुक में छवि मिल गई।

यहां अपना URL दर्ज करें और FB आपके पृष्ठ से मेटाडेटा को अपडेट करेगा:

https://developers.facebook.com/tools/debug (अद्यतन लिंक)


22

फ़ेसबुक डायलॉग या फ़ेसबुक पर न्यूज़ फीड में अपने URL का पूर्वावलोकन करते समय कौन-सी जानकारी प्रदर्शित करनी है, इसे समझने के लिए फ़ेसबुक उपयोग og:tagsऔर ओपन ग्राफ़ प्रोटोकॉल का उपयोग करता है ।

इस og:tagsतरह की जानकारी शामिल हैं:

  • पृष्ठ का शीर्षक
  • पेज का प्रकार
  • URL
  • वेबसाइटों का नाम
  • पृष्ठ का विवरण
  • फेसबुक user_id पृष्ठ के प्रशासकों की (फेसबुक पर)

यहाँ कुछ का ( फेसबुक प्रलेखन से लिया गया ) एक उदाहरण हैog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

एक बार आपने सही मार्कअप लागू कर दिया og:tagsऔर उनके मान सेट कर दिए, तो आप यह परीक्षण कर सकते हैं कि फेसबुक फेसबुक डीबगर का उपयोग करके आपके URL को कैसे देखेगा । डिबगर टूल og:tagsपेज पर मौजूद किसी भी समस्या को उजागर करेगा या उसमें कमी नहीं होगी।

ध्यान में रखना एक बात है कि फेसबुक है करता है इस जानकारी के संबंध में कुछ कैशिंग करते हैं, आदेश परिवर्तनों को प्रभावी करने के लिए अपने पृष्ठ टी जा होगा में इतना स्क्रैप के रूप में दस्तावेज में कहा गया है:

मेटा टैग का संपादन

आप अपने पेज के टैग को अपडेट करके अपने पेज की विशेषताओं को अपडेट कर सकते हैं। ध्यान दें कि ओग: शीर्षक और ओग: प्रकार केवल शुरुआत में संपादन योग्य हैं - आपके पेज को 50 लाइक मिलने के बाद टाइटल तय हो जाता है, और आपके पेज को 10,000 लाइक मिलने के बाद टाइप तय हो जाता है। ये गुण आश्चर्यचकित उपयोगकर्ताओं से बचने के लिए तय किए गए हैं, जिन्हें पहले ही पृष्ठ पसंद आया है। इन सीमाओं तक पहुंचने के बाद शीर्षक या प्रकार टैग बदलने से कुछ नहीं होता है, आपका पृष्ठ मूल शीर्षक और प्रकार बरकरार रखता है।

फेसबुक पर होने वाले परिवर्तनों के लिए, आपको अपने पृष्ठ को स्क्रैप करने के लिए बाध्य करना होगा। जब पृष्ठ के लिए कोई व्यवस्थापक लाइक बटन पर क्लिक करता है या जब URL को फेसबुक URL लिंटर फेसबुक डीबगिंग में दर्ज किया जाता है, तो पृष्ठ को स्क्रैप कर दिया जाता है ...


1
मैंने नीचे टैग का इस्तेमाल किया: <meta property = "og: url" content = "72.5.167.17:8003/"; /> <meta property = "og: image" सामग्री = "72.5.167.17:8003/img/header-logo.png"; /> <meta property = "og: title" content = "यह मेरा शीर्षक है" /> <meta property = "og: description" सामग्री = "यह मेरा वर्णन है" /> शीर्षक और विवरण सफलतापूर्वक बदल गया है, लेकिन छवि अभी भी है नहीं आ रहे हैं।
गौरव

11

मैं देखता हूं कि प्रदान किए गए सभी उत्तर सही हैं। हालांकि, एक महत्वपूर्ण विवरण को अनदेखा किया गया था: छवि का आकार कम से कम 200 X 200 px होना चाहिए, अन्यथा फेसबुक पहले उपलब्ध छवि के साथ थंबनेल को स्थानापन्न करेगा जो पृष्ठ पर मानदंडों को पूरा करता है। एक और तथ्य यह है कि न्यूनतम 3 मेटा को शामिल करना है जो फेसबुक को ओग के लिए आवश्यक है: प्रभाव लेने के लिए छवि:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

फेसबुक डिबगर के साथ अपने पृष्ठ को डीबग करें और सभी चेतावनियों को ठीक करें और यह एक आकर्षण की तरह काम करना चाहिए! https://developers.facebook.com/tools/debug


ऊपर दिए गए पाठ का प्रस्ताव (गलत तरीके से) दूसरे उत्तर पर संपादित के रूप में किया गया था। इसे बाद में अस्वीकार कर दिया गया था , लेकिन यह महत्वपूर्ण जानकारी थी, इसलिए मैंने यहां संपादित किया है।
च्यू एक्स

2

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

यहां बताया गया है कि मैंने अपनी साइट http://gnorml.com/blog/facebook-link-thumbnails/ कैसे तय की है


2

यहां बताया गया है कि यह सब कैसे काम करता है:

  1. आपके द्वारा साझा किए जा रहे विशेष वेबपेज पर आपको HTML तक पहुंचने की क्षमता चाहिए। यदि आप एक सामान्य हेडर फ़ाइल का उपयोग करते हैं तो यह संभवतः साइट को भी व्यापक रूप से काम करेगा। मैंने यह कोशिश नहीं की है, लेकिन यह काम करना चाहिए। यदि आप ऐसा करते हैं तो आपको सभी पृष्ठों के लिए एक ही छवि मिलेगी।

  2. आपको इन HTML मेटा टैग को पेज में जोड़ना होगा। इसे अंदर डालने पर काम नहीं होगा। अपनी प्रति) a, छवि, b) विवरण, c) URL और d) शीर्षक को अनुकूलित करना सुनिश्चित करें।

एक वास्तविक उदाहरण।

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />
  1. सहेजें
  2. एक नया फेसबुक पोस्ट खोलें, और उस पृष्ठ को पुनः प्रयास करें जिसे आप साझा करना चाहते थे।
  3. अगर आपको परेशानी हो रही है ... तो आप इसे इस फेसबुक टूल से डीबग कर सकते हैं। यह जितना दिख रहा है, उससे कहीं ज्यादा भद्दा है। यह बताता है कि जब आप URL को साझा करने के लिए पोस्ट कर रहे हैं तो फेसबुक क्या देख रहा है।

https://developers.facebook.com/tools/debug/og/object/

बिग टिप .. सुनिश्चित करें कि आपके HTML में "उद्धरण चिह्न" समान हैं (उन्हें 2 सीधे चिह्नों की तरह दिखना चाहिए और कोई घटता नहीं है ... कभी-कभी प्रोग्राम इन्हें अलग-अलग फोंट में बदल देते हैं और यह कोड को नासमझ बना देता है।


1

फेसबुक पर साझा करना: छवि, शीर्षक और पाठ को अनुकूलित करके अपने परिणामों में सुधार कैसे करें

ऊपर दिए गए लिंक से सर्वोत्तम संभव शेयर के लिए, आप अपने HTML में 3 टुकड़े डेटा का सुझाव देना चाहेंगे:

  • शीर्षक
  • संक्षिप्त वर्णन
  • छवि

यह निम्नलिखित द्वारा पूरा किया गया, जो आपके HTML के 'हेड' टैग के अंदर रखा गया है:

  • शीर्षक: <title>INSERT POST TITLE</title>
  • छवि: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • विवरण: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

यदि आप वेबसाइट स्थिर HTML है, तो आपको अपने HTML संपादक का उपयोग करके प्रत्येक पृष्ठ के लिए यह करना होगा।

यदि आप Drupal जैसे CMS का उपयोग कर रहे हैं, तो आप इसे बहुत अधिक स्वचालित कर सकते हैं (ऊपर लिंक देखें)। यदि आप वर्डप्रेस का उपयोग करते हैं, तो आप संभवतः दिशानिर्देश के रूप में Drupal उदाहरण का उपयोग करके कुछ समान लागू कर सकते हैं। मुझे आशा है कि आपको ये उपयोगी लगे।

अंत में, आप हमेशा अपने शेयर पोस्ट को मैन्युअल रूप से संपादित कर सकते हैं। इस उदाहरण को दृष्टांतों के साथ देखें ।


0

पिछले सप्ताह मैं जिस साइट पर काम कर रहा था, उस पर भी मेरा एक मुद्दा था। मैंने एक बॉक्स की तरह लागू किया और बॉक्स की तरह परीक्षण किया। फिर मैं अपने हेडर (ओब: इमेज मेटा) में एक छवि जोड़ने के लिए आगे बढ़ा। फिर भी मेरी फेसबुक अधिसूचना पर सही छवि नहीं दिखी।

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

कैश को रीसेट करने के लिए, आपको लिंट डीबगर टूल का उपयोग करना होगा जो ऊपर उल्लिखित है, और जो कैश हैं उनके लिए सभी Urls को मान्य करें ... यह केवल एक चीज है जो मेरे लिए काम करती है।


0

हर जुमला लेख में फेसबुक ओपन ग्राफ को सेट करने का सबसे आसान तरीका मुझे com_content / article / default.php ओवरराइड, अगले कोड में रखना था:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

यह वर्तमान लेख के विवरण के साथ मेटा ओग टैग को सिर में रखेगा।

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