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

98

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

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

이제 Facebook이 왼쪽에 일부 썸네일을 표시 할 때. 이 이미지는 내 웹 사이트에서 선택되었습니다. 특정 이미지를 축소판으로 선택하거나 적어도 축소판 표시를 중지하려면 어떻게해야합니까?

내 블로그 주소로 확인할 수 있습니다 .

facebook  sharethis 
— Tanmoy
소스
— user94154

답변:

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

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

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

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

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

— Gdeglin
소스
6
Facebook은 link rel 속성을 사용하는 것이 일부 사람들에게 항상 작동하는 것은 아니라고 스스로 지적했습니다. meta property = "og : image"가 훨씬 더 안정적이라는 것을 알았습니다. 아래의 답변이 정확해야합니다.
— Dwayne Charrington
두 가지 옵션을 모두 사용하는 것이 가장 좋습니다
— Yosef
6
이 경우 이미지 유형은 '이미지 / gif'여야합니다. 그렇지 않나요?
— Joaquín L. Robles 2011
98

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

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

출처 : Facebook Share

— Efektiivsus Saavutamine
소스
이것은 단지 새로운 API를하지 이전 share.php 링크에 대한 작동하는 것 같다
— chrismarx
34

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

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

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

— 팀 스 콜릭
소스
22

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

다음 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 디버거 를 사용하여 Facebook에서 URL을 보는 방법을 테스트 할 수 있습니다 . 디버거 도구는 og:tags페이지에서 발견 되거나 부족한 문제를 강조 표시합니다 .

한 가지 유념해야 할 점은 페이스 북이 있다는 것입니다 않습니다 그래서 페이지가 t이 될 것입니다 변경 사항을 적용하려면이 정보와 관련하여 몇 가지 캐싱을 긁어 문서에 명시된 바와 같이 :

메타 태그 편집

페이지의 태그를 업데이트하여 페이지의 속성을 업데이트 할 수 있습니다. og : title 및 og : type은 처음에만 편집 할 수 있습니다. 페이지에서 좋아요를 50 개 받으면 제목이 고정되고 페이지에서 좋아요를 10,000 개 받으면 유형이 고정됩니다. 이러한 속성은 이미 페이지를 좋아하는 놀라운 사용자를 방지하기 위해 수정되었습니다. 이러한 제한에 도달 한 후 제목 또는 유형 태그를 변경하면 아무 작업도 수행되지 않으며 페이지는 원래 제목과 유형을 유지합니다.

변경 사항을 Facebook에 반영하려면 페이지를 강제로 스크랩해야합니다. 페이지 관리자가 좋아요 버튼을 클릭하거나 URL이 Facebook URL Linter Facebook Debugger에 입력되면 페이지가 스크랩됩니다 .

— Lix
소스
1
아래 태그를 사용했습니다. <meta property = "og : url"content = "72.5.167.17:8003/"; /> <meta property = "og : image"content = "72.5.167.17:8003/img/header-logo.png"; /> <meta property = "og : title"content = "This is my title"/> <meta property = "og : description"content = "This is my description"/> 제목 및 설명이 성공적으로 변경되었지만 이미지는 여전히 남아 있습니다. 오지 않습니다.
— Gaurav123 2014
11

제공된 모든 답변이 정확하다는 것을 확인했습니다. 그러나 한 가지 중요한 세부 사항을 간과했습니다. 이미지의 크기는 최소 200X200 픽셀이어야합니다. 그렇지 않으면 Facebook이 페이지의 기준을 충족하는 첫 번째 사용 가능한 이미지로 축소판을 대체합니다. 또 다른 사실은 최소 요구 사항은 og : image가 적용되기 위해 Facebook에 필요한 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" />

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

— chue x
소스
위의 텍스트는 다른 답변에 대한 편집으로 (잘못) 제안되었습니다. 나중에 거부 되었지만 중요한 정보가 포함 된 것 같아서 여기로 편집을 옮겼습니다.
— chue x
2

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

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

— Rob
소스
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. 새로운 Facebook 게시물을 열고 공유하려는 페이지를 다시 시도하십시오.
  3. 문제가있는 경우이 Facebook 도구로 디버깅 할 수 있습니다. 실제보다 더 괴상 해 보입니다. 공유 할 URL에 게시 할 때 Facebook에 표시되는 내용을 알려줍니다.

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

큰 팁 .. "따옴표"가 HTML에서 동일한 지 확인하십시오 (2 개의 직선 표시와 곡선이 없어야합니다… 때때로 프로그램이 이러한 글꼴을 다른 글꼴로 변경하고 코드를 망칠 수 있습니다.

— Aminul 이슬람
소스
1

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

위의 링크에서. 최상의 공유를 위해 HTML에서 3 가지 데이터를 제안하는 것이 좋습니다.

  • 표제
  • 간단한 설명
  • 영상

이는 HTML의 'head'태그 안에 다음과 같이 배치됩니다.

  • 표제: <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 예제를 지침으로 사용하여 비슷한 것을 구현할 수 있습니다. 도움이 되었기를 바랍니다.

마지막으로 언제든지 공유 게시물을 수동으로 편집 할 수 있습니다. 그림과 함께이 예를 참조하십시오 .

— Rickmaneluis
소스
0

지난주에 작업 하던 사이트 에도 문제가있었습니다 . 좋아요 상자를 구현하고 좋아요 상자를 테스트했습니다. 그런 다음 헤더에 이미지를 추가했습니다 (ob : image 메타). 그래도 올바른 이미지가 내 Facebook 알림에 표시되지 않았습니다.

나는 모든 것을 시도했고, 좋아요 버튼의 모든 구현이 캐시된다는 결론에 도달했습니다. 따라서 URL A에서 좋아요 버튼을 클릭 한 다음 헤더에 이미지를 지정하고 URL A에서 Luke 버튼을 다시 클릭하여 테스트한다고 가정 해 보겠습니다. 페이지가 캐시 될 때 이미지가 표시되지 않습니다. B 페이지에서 좋아요 버튼을 클릭하면 이미지가 표시됩니다.

캐시를 재설정하려면 위에서 언급 한 Lint 디버거 도구를 사용하고 캐시 된 URL에 대한 모든 URL의 유효성을 검사해야합니다. 그게 저에게 효과적이었습니다.

— Gerard
소스
0

모든 Joomla 기사에 Facebook Open Graph를 설정하는 가장 쉬운 방법은 다음 코드 인 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;

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

— A. D' Alfonso
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.