web-dev-qa-db-ja.com

FB.ui共有は、タイトル、メッセージ、画像を設定します

私は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：titleとog：descriptionをする必要があるだけですが、それはうまくいかないようです。

現在のタイトルは、パーツのタイトルの一部、または画像のaltタグからのものであり、メッセージはランダムな段落タグからのみ入力されています。

javascriptfacebookfb.ui
9
TMH

メタデータはFacebookによってキャッシュされる可能性があります。 FacebookデバッガーにURLを入力してみてください： https://developers.facebook.com/tools/debug/

これにより、キャッシュがクリアされます。

画像にはこれを使用してください：

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

Facebookは最小サイズ1200x630ピクセルの画像の使用を推奨しています

7
intCoffee

トム、私は同じ問題を抱えていて、あなたの投稿を見つけた解決策を探していました。たぶんあなたはそれを解決しましたが、それが他の人々に役立つかもしれない場合に備えて、私が見つけたものを共有したいと思いました。 Facebookのドキュメントには、「共有」メソッドには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
     });
36
Janbalik

使用しているコードは非推奨です。次の共有ダイアログを使用して、動的にオーバーライドされた属性を使用できます。

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.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript 。

Facebookで（ogメタタグを含む）Webページを共有し、後でタイトルや説明などを更新した場合、Webページがキャッシュされ、2日後に再びスクラップされるため、Facebookですぐに更新されません。

Facebookのタイトルや説明などをすぐに更新したい場合は、 Facebook debug ツールを使用してWebページを再度スクラップする必要があります。

18
Faisal Raza

これは、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
    });
12
OxC0FFEE

私はこの投稿を見つけ、上記の手順を実行しようとしました。数時間を無駄にした後、上の@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 by YOAST向けですが、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を作成して、FacebookがそれぞれのURLを個別に取得することです。 SEOの問題を回避するには、元のURLを指す正規タグをヘッダーに含める必要があります。これが 完全な記事 です。

1
Hannes

公開バケットがあり、それでもFacebookで画像を共有できない場合は、バックエンドの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',データオブジェクトから。

0
radhey shyam