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