Facebook에서 공유를 구현하는 동안 특정 이미지를 축소판으로 표시하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

문제

이 방법을 공유하려고합니다. 코드를 다음과 같이 사용하고 있습니다

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

이제 Facebook이 왼쪽에 약간의 썸네일을 보여줄 때. 이 이미지는 내 웹 사이트에서 선택되었습니다. 특정 이미지를 썸네일로 선택하거나 최소한 썸네일 표시를 중지하려면 어떻게해야합니까?

당신은 내와 함께 확인할 수 있습니다 블로 그 주 소.

도움이 되었습니까?

해결책

이 블로그 게시물은 귀하의 답변이있는 것 같습니다.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" />

이미지의 이름은 예제와 동일해야합니다.

"미리보기가 작동하는지 확인"을 클릭하십시오.

참고 : 태그는 정확할 수 있지만 Facebook은 문서에 따라 24 시간마다 긁습니다. Facebook Lint 페이지를 사용하여 이미지를 Facebook으로 가져옵니다.

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

다른 팁

Facebook의 사양에서 다음과 같은 코드를 사용하십시오.

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

원천: 페이스 북에 공유

내 태그는 정확했지만 Facebook은 문서에 따라 24 시간마다 긁습니다. Facebook Lint 페이지를 사용하면 이미지를 Facebook으로 가져 왔습니다.

여기에 URL을 입력하면 FB가 페이지에서 메타 데이터를 업데이트합니다.

https://developers.facebook.com/tools/debug (업데이트 된 링크)

Facebook 사용 og:tags 그리고 그래프 프로토콜을 엽니 다 URL을 미리 볼 때 표시 할 정보를 해독하려면 대화 상자를 공유하십시오 또는 Facebook의 뉴스 피드에서.

그만큼 og:tags 다음과 같은 정보를 포함합니다.

  • 페이지 제목
  • 페이지 유형
  • URL
  • 웹 사이트 이름
  • 페이지 설명
  • Facebook user_id 페이지의 관리자 (Facebook)

다음은 예입니다 ( 페이스 북 문서 ) 일부의 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 값을 설정하면 Facebook이 다음을 사용하여 URL을 보는 방법을 테스트 할 수 있습니다. 페이스 북 디버거. 디버거 도구는 또한 og:tags 페이지에 있거나 부족합니다.

명심해야 할 한 가지는 Facebook입니다 하다 이 정보와 관련하여 약간의 캐싱을 수행하므로 변경 사항이 적용되기 위해서는 페이지가 스크랩 문서에 명시된 바와 같이 :

메타 태그 편집

페이지의 태그를 업데이트하여 페이지의 속성을 업데이트 할 수 있습니다. OG : Title and OG : Type은 처음에만 편집 가능합니다. 페이지를 수신 한 후 50 개가 좋아하는 후 제목이 고정되고 페이지가 10,000 개가 수신되면 유형이 고정됩니다. 이 속성은 이미 페이지를 좋아했던 놀라운 사용자를 피하기 위해 고정되어 있습니다. 제목 또는 유형 태그를 변경하면이 제한에 도달 한 후에는 아무것도하지 않으며 페이지 페이지는 원래 제목과 유형을 유지합니다.

변경 사항이 Facebook에 반영 되려면 페이지를 긁어 져야합니다. 페이지의 관리자가 Like 버튼을 클릭하거나 URL을 입력 할 때 페이지가 긁히는 경우 Facebook URL Linter 페이스 북 디버거...

제공된 모든 답변이 정확하다는 것을 알 수 있습니다. 그러나 한 가지 중요한 세부 사항은 간과되었습니다. 이미지의 크기는 최소 200 x 200 px이어야합니다. 그렇지 않으면 Facebook은 썸네일을 페이지의 기준을 충족하는 첫 번째 사용 가능한 이미지로 대체합니다. 또 다른 사실은 필요한 최소 값은 Facebook이 요구하는 3 개의 메타를 OG : 이미지를 발효시키기 위해 포함하는 것입니다.

<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" />

Facebook 디버거로 페이지를 디버깅하고 모든 경고를 수정하면 매력처럼 작동해야합니다!https://developers.facebook.com/tools/debug

나는 같은 문제를 겪고 있었고 그것을 해결했다고 믿는다. 여기에 언급 된대로 링크 메타 태그를 사용하여 원하는 이미지를 가리키했지만 열쇠는 FB를 선택하면 다른 이미지를 선택하지 않을 것입니다. 또한 이미지가 너무 크면 선택의 여지가 없습니다.

내 사이트를 수정 한 방법은 다음과 같습니다 http://gnorml.com/blog/facebook-link-thumbnails/

이것이 모두 작동하는 방법은 다음과 같습니다.

  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. 새로운 Facebook 게시물을 열고 공유하고 싶은 페이지를 다시 시도하십시오.
  3. 문제가있는 경우…이 Facebook 도구로 디버깅 할 수 있습니다. 그것은 그것보다 더 괴짜처럼 보입니다. URL에 게시 할 때 Facebook이 무엇을보고 있는지 알려줍니다.

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

큰 팁 .. HTML에서 "Quote Marks"가 동일했는지 확인하십시오 (그들은 2 개의 직선 마크와 곡선이 없어야합니다 ... 때로는 프로그램이 다른 글꼴로 변경하고 코드를 위로 올리십시오.

Facebook 공유 : 이미지, 제목 및 텍스트를 사용자 정의하여 결과를 개선하는 방법

위의 링크에서. 가능한 최상의 공유를 위해 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를 사용하는 경우 많은 것을 자동화 할 수 있습니다 (위의 링크 참조). WordPress를 사용하는 경우 Drupal 예제를 가이드 라인으로 사용하여 유사한 것을 구현할 수 있습니다. 나는 당신이 이것들이 유용하다는 것을 알기를 바랍니다.

마지막으로 공유 게시물을 수동으로 수동으로 편집 할 수 있습니다. 보다 이 예는 그림이 있습니다.

나는 또한에 문제가 있었다 대지 나는 지난주에 일하고 있었다. 같은 상자를 구현하고 같은 상자를 테스트했습니다. 그런 다음 헤더에 이미지를 추가하기 위해 진행했습니다 (OB : 이미지 메타). 여전히 올바른 이미지가 내 Facebook 알림에 표시되지 않았습니다.

나는 모든 것을 시도했고, 같은 버튼의 모든 단일 구현이 캐시되었다는 결론에 도달했습니다. URL A에서 Like 버튼을 클릭 한 다음 헤더의 이미지를 지정하고 URL A에서 Luke 버튼을 다시 클릭하여 테스트합니다. 페이지가 캐시되었으므로 이미지가 표시되지 않습니다. 페이지 B의 Like 버튼을 클릭하면 이미지가 나타납니다.

캐시를 재설정하려면 위에서 언급 한 보풀 디버거 도구를 사용하고 캐시 된 사람들에 대한 모든 URL을 검증해야합니다. 이것이 저에게 도움이 된 유일한 것입니다.

내가 Facebook Open 그래프를 모든 Joomla 기사에 설정하는 가장 쉬운 방법은 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;

이것은 현재 기사의 세부 사항과 함께 메타 OG 태그를 헤드에 배치합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top