이미지처럼 Facebook을 제어하려면 어떻게해야합니까? [닫은]

게시물이있는 블로그가 있으며 각 게시물에는 버튼과 같은 Facebook이 내장되어 있습니다. 버튼을 누르면 대화 상자가 열리고 방문자가 Facebook의 게시물을 댓글과 공유 할 수 있습니다.

그러나 공유 할 때 Facebook에서 선택한 이미지는 게시물 축소판이 아닌 일반 메일 아이콘입니다.

공유 할 때 사용되는 이미지를 어떻게 제어 할 수 있습니까?

공유에 사용되는 이미지는 다음과 같이 사이트 헤더에있는 코드 덩어리에서 가져옵니다.

<link rel="image_src" href="path/to/theme/screenshot.png" />

일반적으로 테마에서 사이트의 스크린 샷으로 연결됩니다. 파일의 헤더와 single.php에서 코드를 제거하면 루프 안에 넣고 post thumbnail image를 href 요소에 호출하면 작동한다고 생각합니다. 따라서 다음과 같이 보일 것입니다.

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

즉, 여러 게시물을 나열하는 페이지에 버튼이 있으면 이미지가 없을 것입니다. single.php에서만 제거한 조건부 코드를 포함 시키면 single.php 템플릿을 사용할 때 여러 게시물과 비슷한 버튼 및 게시물 축소판이있는 모든 페이지에 일반 이미지가 생깁니다. 따라서 헤더 코드는 다음과 같습니다.

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

그런 다음 여전히 코드를 사용하여 single.php에 게시물 썸네일을 포함시킵니다.

Facebook은 이제 오픈 그래프 프로토콜을 사용합니다. 다음을 사용하여 이미지를 추가 할 수 있습니다.

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

이 줄을 페이지 머리글에 추가하십시오.

또는 내 플러그인을 사용하여 자동으로 수행 할 수 있습니다.

이 작업 만 수행하며 설정이 필요하지 않습니다.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Facebook Open Graph Protocol을 사용해야합니다. 수락 된 답변이 많은 OG 중 하나가 아닌 이유는 확실하지 않습니다 (투표 한 관련 답변).

http://developers.facebook.com/docs/opengraph/

Open Graph를 사용하면 제목, 이미지, 설명, 카테고리, 마지막 업데이트 등을 포함하여 많은 것을 사용자 정의 할 수 있습니다. 이 다른 반 솔루션을 사용하면 전체 그림이 누락됩니다.

내가하는 모든 FB 작업에 대해 OG 프로토콜을 따르지 않으면 해고 될 것입니다.

다음을 수행하는 경우 :

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Wordpress는 실제로 원하는 SRC뿐만 아니라 이미지를 표시하는 데 필요한 html을 출력합니다.

같은 일을 :

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

URL 만 가져옵니다. 아마도 먼 길이고 아마도 단축 될 수 있지만 문제를 확실히 해결합니다.

이것이 올바른 길로 인도하기를 바랍니다.

매트.

지정된 이미지가 제대로 표시되지 않으면 여기에서 URL을 보푸라기하십시오 :

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

로고와 같은 대체 이미지가있는 미리보기 이미지로 게시물의 첫 번째 이미지를 사용하려면 내 플러그인 ( http://wordpress.org/extend/plugins/facebook-like-thumbnail/)을 사용해보십시오 . 대체 로고 이미지는 http://blog.ashfame.com/?p=888에 있습니다.

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

이 방법은 "like": s에 대해 작동하지만 나중에 ur 로그에 링크를 공유하려는 경우 (예 :)이 그림이 자동 선택됩니다.

이 메타 태그가 없으면 링크 된 사이트의 모든 이미지에서 선택할 수 있습니다.

누구나 정적 "유사"이미지를 유지하는 방법을 알고 있지만 URL을 공유 할 때 여전히 이미지를 선택하도록 하시겠습니까?

좋아, 메타 og : 이미지를 내가 선택한 특집 이미지로 채우는 약간의 자바 스크립트를 작성했다. 헤더 파일에 한 번만 추가하면됩니다.

내 워드 프레스 게시물에서 ID "기능 이미지"를 추가합니다 (나중에 워드 프레스로 이것이 내장되어 있음을 알고 있습니다. 나는 오래된 것입니다).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

블로그 로그와 같은 자리 표시 자와 함께 og : image의 메타 태그를 작성합니다. 태그에 "id ="meta-image "를 추가하십시오.

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

그런 다음 헤더에이 자바 스크립트를 추가하십시오.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});