ФБ.UI share установите заголовок, сообщение и изображение

Я использую FB.ui, чтобы поделиться страницей на Facebook, и я пытаюсь установить заголовок и сообщение (изображение, если это возможно, но не важно). У меня это в заголовке моего сайта

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

и мой код JavaScript

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:description, чтобы установить заголовок и сообщение, но это, похоже, не работает.

Current заголовок поступает либо из части заголовка детали, либо из тега alt на изображении, и сообщение заполняется только из случайного тега абзаца.

6 ответов


метаданные могут быть кэшированы Facebook. Попробуйте ввести url-адрес в отладчике Facebook:https://developers.facebook.com/tools/debug/

это очистит кэш.

для изображения используйте это:

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

Facebook рекомендует использовать изображения с минимальным размером 1200x630 пикселей


том, у меня была та же проблема, и я искал решение, которое нашел ваш пост. Возможно, вы ее решили, но я хотел поделиться тем, что нашел, на случай, если это может быть полезно для других людей. В документах Facebook говорится, что метод" share " имеет только параметр href, но я обнаружил, что это не так. Вы можете использовать очень похожие параметры для метода" feed". Это то, что я использовал и работает:

    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
     });

код, который вы используете устарел. Вы можете использовать следующее поделиться диалогом с динамически переопределенными атрибутами:

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  display: 'popup',
  action_properties: JSON.stringify({
    object: {
      'og:url': 'https://your-url-here.com',
      'og:title': 'Title to show',
      'og:description': 'The description',
      'og:image': 'https://path-to-image.png'
    }
  })
}, function(response) {
  // Action after response
});

для детального рабочего примера, проверка:http://drib.технология / Программирование / динамическое изменение-facebook-open-graph-meta-data-javascript.

Если вы разделяете веб-страницу (с метатегами og) на Facebook и обновляете заголовок и описание и т. д. Позже, они не будут мгновенно обновляться на Facebook, поскольку он кэширует ваши веб-страницы и скрап-страницу снова через 2 дня.

поэтому, если вы хотите мгновенно обновить заголовок, описание и т. д. На Facebook, вам нужно снова удалить веб-страницу с помощью Facebook debug.


это работает для меня с 2018-01-01, используя share-open-graph метод. Это работает, но кажется волшебным и недокументированным, поэтому будьте осторожны с кодером.

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
    });

Я нашел этот пост и попытался осуществить указанные выше действия. Потратив несколько часов, я увидел комментарий от @SMT выше...

Я определенно больше не работаю в v2.10.

мой клиент уже ждал этой функции, поэтому мне пришлось искать обходной путь. Обратите внимание: я написал это решение для WordPress, поэтому вы можете изменить несколько строк, чтобы он работал на вашем сайте.

давайте начнем с моего HTML-кода обертка содержит изображение и кнопку:

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

в своем JS-код я добавляю url изображения в качестве параметра к URL, который я хочу поделиться:

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. Этот код предназначен для WordPress и WordPress SEO от YOAST, но вы можете просто изменить его для работы с вашей CMS. Добавьте это в свой функции.в 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;
});

общая идея состоит в том, чтобы создать отдельный URL для каждого изображения, которое только изменяется параметры OG, поэтому Facebook должен очистить каждый из них индивидуально. Чтобы избежать каких-либо проблем SEO, вы должны иметь канонический тег в заголовке, указывающий на исходный URL. Вот полная версия статьи.


Если у вас есть публичное ведро, и вы все еще не можете поделиться своим изображением с facebook, проверьте код загрузки изображения backend S3 bucket.

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', из данных объекта.