FB.ui 공유 제목, 메시지 및 이미지 설정

Question

FB.ui를 사용하여 Facebook에 페이지를 공유하고 제목과 메시지 (가능하면 중요하지만 중요하지 않은 이미지)를 설정하려고합니다. 나는 내 사이트 헤더

<meta property="og:title" content="Your title here" /> 
<meta property="og:description" content="your description here" /> 

이이 그리고 내 자바 스크립트 코드는 내가 읽은 내가 그냥 필요에서

FB.ui({ 
     method: 'share', 
     href: document.URL, 
    }, function(response){ 

     //TODO Proper response handling 
     log(response); 
     if (typeof response != 'undefined') { 
      alert('Thanks for sharing'); 
     } 
    }); 

되는 OG : titleand OG : 제목과 메시지를 설정하는 설명하지만, 그게 효과가없는 것 같아.

현재 제목은 부분 제목의 일부 또는 이미지의 alt 태그에서 나오며 메시지는 무작위 단락 태그로 채워집니다.

Answer 1

메타 데이터는 Facebook에서 캐시 할 수 있습니다. Facebook 디버거에 URL을 입력 해보십시오. https://developers.facebook.com/tools/debug/

이렇게하면 캐시가 지워집니다. 이미지 사용이 들어

:

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

Facebook recommends using images with a min size of 1200x630 pixels

Answer 2

톰, 저도 같은 문제를 겪고 난 당신의 게시물을 볼 수있는 솔루션을 찾고. 아마도 당신은 그것을 풀었지만 다른 사람들에게 유용 할 수 있기 때문에 내가 찾은 것을 나눠주고 싶었습니다. 페이스 북 문서는 "공유"방법에는 href 매개 변수 만 있지만 사실이 아니라고 판별했습니다. "피드"메소드와 매우 유사한 매개 변수를 사용할 수 있습니다. 이것은 제가 사용하고 작동 한 것입니다 :

FB.ui(
    { 
     method: 'share', 
     href: 'your_url',  // The same than link in feed method 
     title: 'your_title', // The same than name in feed method 
     picture: 'path_to_your_picture', 
     caption: 'your_caption', 
     description: 'your_description', 
    }, 
    function(response){ 
     // your code to manage the response 
    }); 

Answer 3

이 게시물을 발견하고 위에서 언급 한 단계를 구현하려고했습니다. 몇 시간을 낭비하고 나서 위의 @SMT로부터의 코멘트를 보았습니다 ...

더 이상 v2.10에서 작동하지 않습니다.

고객이 이미이 기능을 기다리고 있으므로 해결 방법을 찾아야했습니다. 참고 : WordPress 용으로이 솔루션을 작성 했으므로 몇 줄을 변경하여 사이트에서 작동하게 할 수 있습니다. 나는 URL에 매개 변수로 이미지 URL을 추가 내 JS 코드에서

<div class="my-image-container"> 
    <img src="http://example.com/image.jpg"> 
    <a href="#" class="fb-share-image">Share</a>'); 
</div> 

내가 공유하려는 :

의 내 HTML 코드 이미지와 버튼을 포함하는 래퍼 시작하자 :

는

window.fbAsyncInit = function() { 
    FB.init({ 
     appId   : 'YOUR APP ID', 
     status   : true, 
     cookie   : true, 
     version   : 'v2.10'     
    }); 

    $('.fb-share-image').click(function(e){ 
     e.preventDefault(); 
     var image = $(this).siblings('img').attr('src'); 

     FB.ui(
       { 
        method: 'share', 
        href: $(location).attr('href') + '?og_img=' + image, 
       }, 
       function (response) { 

       } 
      ); 
    }) 
}; 

(function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

다음 단계는 URL 매개 변수를 처리하는 것입니다. 이 코드는 YOAST의 WordPress 및 WordPress SEO 용이지만 단순히 CMS로 작동하도록 변경할 수 있습니다. 당신의 functions.php이 추가 :

add_filter('wpseo_opengraph_image',function($img){ 
    if(array_key_exists('og_img', $_GET)) 
     return $_GET['og_img']; 
    return $img; 
}); 

add_filter('wpseo_opengraph_url',function($url){ 
    if(array_key_exists('og_img', $_GET)) 
     return $url . '?og_img=' . $_GET['og_img']; 
    return $url; 
}); 

일반적인 아이디어는 페이스 북이 개별적으로 각을 긁어있다, 그래서 오직 OG 매개 변수를 변경 각 이미지에 대한 개별 URL을 생성하는 것입니다. SEO 문제를 피하려면 헤더에 원본 URL을 가리키는 정식 태그가 있어야합니다. 여기에 complete article이 있습니다.

Answer 4

사용중인 코드는 더 이상 사용되지 않습니다. 자세한 작업 예를 들어

FB.ui({ 
    method: 'share_open_graph', 
    action_type: 'og.shares', 
    display: 'popup', 
    action_properties: JSON.stringify({ 
    object: { 
     'og:url': override_url, 
     'og:title': override_title, 
     'og:description': override_description, 
     'og:image': override_image_url' 
    } 
    }) 
}, function(response) { 
    // Action after response 
}); 

, 체크 아웃 : http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript 동적으로 오버라이드 (override) 속성을 다음 공유 대화 상자를 사용할 수 있습니다.

나중에 페이스 북에 웹 페이지 (og 메타 태그 있음)를 공유하고 제목과 설명 등을 업데이트하면 페이스 북에서 웹 페이지를 캐시하고 2 일 후에 다시 스크랩하므로 페이스 북에서 즉시 업데이트되지 않습니다 .

Facebook에서 제목, 설명 등을 즉시 업데이트하려면 Facebook debug 도구를 사용하여 웹 페이지를 다시 스크랩해야합니다.

Answer 5

이것은 share-open-graph 방법을 사용하여 2018-01-01 현재 저에게 적합합니다. 이것은 효과가 있지만 마술적이고 문서화되지 않은 것 같습니다. 따라서주의해야합니다.

shareOnFB: function() { 
    var img = "image.jpg"; 
    var desc = "your caption here"; 
    var title = 'your title here'; 
    var link = 'https://your.link.here/'; 

    // Open FB share popup 
    FB.ui({ 
     method: 'share_open_graph', 
     action_type: 'og.shares', 
     action_properties: JSON.stringify({ 
      object: { 
       'og:url': link, 
       'og:title': title, 
       'og:description': desc, 
       'og:image': img 
      } 
     }) 
    }, 
    function (response) { 
     // Action after response 
    }); 

Answer 6

공용 물통을 가지고 페이스 북이 다음 백엔드 S3 버킷 이미지 업로드 코드를 확인 여전히 당신이 당신의 이미지를 공유 할 수없는 경우.

var data = { 
    Bucket: bucketName, 
    Key: fileName, 
    Body: buf, 
    ContentEncoding: 'base64', 
    ContentType: 'image/jpeg', 

}; 
s3Bucket.putObject(data, function(err, data){ 
    if (err) { 
     console.log(err); 
     console.log('Error uploading data: ', data); 
     callback(err); 
    } else { 
     console.log('succesfully uploaded the image!'); 
     callback(null,""); 
    } 
}); 

데이터 개체에서 ContentType: 'image/jpeg',을 제거하십시오.