ウェブサイトにFacebookの共有ボタンを追加するにはどうすればよいですか？

99

動作すると思われるこのコードがありますが、動作しません。これがとにかくあなたを助けるならそれは素晴らしいでしょう。

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Facebookの共有ボタンを自分のWebサイトに追加したいのですが、これは私のWebサイトのコンテンツを壁に投稿するだけです。それを共有したい人。

私はたくさん研究しましたが、何も得られませんでした。喜んでこれを手伝ってください。

前もって感謝します。

javascript  facebook  facebook-javascript-sdk  share  facebook-social-plugins 
— サヒブジョット・シン
ソース
2
— ロニー・ロイストン

回答:

252

そのすべてのコードは必要ありません。必要なのは次の行だけです。

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

ドキュメントはhttps://developers.facebook.com/docs/reference/plugins/share-links/にあります。

— asifrc
ソース
7
このオプションはあまり好きではありません...ツイートボタンのようなスタイルのリンクがあっ
— たらいいのに
104
リンクをスタイル設定してみませんか？私は間違いなくこのオプションを好みます。私は自分のデザインがどのように見えるかを制御したいです。
— シェリフデレク2013
6
また、この方法ではFacebookのジャンクコードが追加されないため、ページが遅くなります。sharrre.com jqueryプラグインをご覧ください。見た目をカスタマイズし、いくつかのソーシャルな「いいね」ボタンを1つにまとめることが簡単にできます。
— pixeline 2013年
3
はい、シンプルな共有リンクを使用できます。：また、すべての人気のソーシャルメディアサイトのためのシンプルなリンクを構築する助けのために、この単純なページをチェックアウトsharelinkgenerator.com
— ピストルピート
1
重要な注意：モバイルでのこのアイデアにより、FacebookのWebサイトが開きます（FBアプリではありません）。少し（または大きい）詐欺。
— エズラシトン
26

Facebookが提供する非同期Javascript SDKを使用してこれを行うことができます

次のコードを見てください

FB Javascript SDKの初期化

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

注：APP IDをFacebook AppIdに置き換えてください。Facebook AppIdがなく、作成方法がわからない場合は、こちらを確認してください

JQueryライブラリを追加します。Googleライブラリを優先します

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

共有ダイアログボックスの追加（このダイアログボックスは、パラメータを設定してカスタマイズできます。

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

最後に画像ボタンを追加します

<img src = "share_button.png" id = "share_button">

より詳細な情報については。こちらをクリックしてください

— Virat Gaywala-CSM
ソース
7
...これをTwitterの初期化と比較してください。ナッツ。
— マイケル
6
あなたのアプローチはアプリIDを必要とします、それは途方もない苦痛です。
— horseyguy 2015
これはまだ魅力のように働いています！素晴らしい作品！
— コーディングフリーク2017年
いいね！わかりやすい。しかし、ユーザーが実際に私たちのコンテンツを共有しているかどうかは、どうすればわかりますか？PS：response.error_messageは、アプリを使用している誰かがアプリを認証した場合にのみ表示されます
— Pearl
14

共有ボタンの詳細については、こちらのFacebook開発者Webサイトをご覧ください。

動作中のJSFIDDLE

また、カスタムFacebook共有ボタンJSFIDDLEもご覧ください。

開始<body>タグの直後にFacebook JavaScript SDKコードを含める

<div id="fb-root"></div>
<script>(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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

そしてFacebookの共有ボタンを表示したいところはどこでもコードの下に配置します

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

ここに画像の説明を入力してください

動作しているJSFIDDLEを確認する

— スボドグラックス
ソース
8
このコードが機能しない可能性はありますか？jsfiddleでさえも
— erdomester
8
うん、これを自分で機能させるのに深刻な問題があります...私は空白のdivになってしまいます。
— Michael
@erdomesterフィドルはChromeまたはFirefoxでは表示されません。これは、ブラウザーのセキュリティがサンドボックス化されたiframeを妨げているためです。Safariでjsfiddleを開くと表示され、jsfiddleの外部に実装すると、他のブラウザーで表示されるはずです。
— JisuKim82
4

APIなしで画像をFacebookで共有し、サブページへのディープリンクを使用する場合、トリックは画像​​を 変数として共有することでした#picture=

mainUrlをhttp://yoururl.com/ 

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
— tq
ソース
2

共有ダイアログFacebookログインを必要とせずにを

リンクを共有するために、shareメソッドパラメーターを指定したFB.ui関数を使用して共有ダイアログをトリガーできます。このダイアログは、URLへの完全なリダイレクトを実行することにより、JavaScript、iOS、およびAndroidのFacebook SDKで使用できます。

この呼び出しをトリガーできます。

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

このURLのページにオープングラフメタタグを含めて、Facebookに共有されるストーリーをカスタマイズすることもできます。

response.error_messageは、アプリを使用しているユーザーがFacebookログインでアプリを認証した場合にのみ表示されることに注意してください。

また、JavaScript Facebook SDKを使用することで、通話とリンクを直接共有できます。

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id =>アプリの一意の識別子。（必須。）

  • redirect_uri =>ユーザーがダイアログのボタンをクリックした後にリダイレクトするURL。URLリダイレクトを使用する場合に必要です。

  • display =>ダイアログのレンダリング方法を決定します。

URLリダイレクトダイアログの実装を使用している場合、これはFacebook.com内に表示される全ページ表示になります。この表示タイプはページと呼ばれます。iOSまたはAndroid SDKのいずれかを使用してダイアログを呼び出す場合、これは自動的に指定され、デバイスに適切な表示タイプが選択されます。JavaScriptのFacebook SDKを使用している場合、これは、アプリにログインしたユーザーのモーダルiframeタイプ、またはFacebook.comのゲーム内で使用する場合は非同期になり、他のすべてのユーザーにはポップアップウィンドウになります。必要に応じて、Facebook SDK for JavaScriptを使用するときに、ポップアップまたはページタイプを強制することもできます。モバイルWebアプリのデフォルトは常にタッチディスプレイタイプです。パラメータを共有する

  • href =>この投稿に添付されたリンク。メソッド共有を使用する場合に必要です。このURLのページに開いているグラフのメタタグを含めて、共有するストーリーをカスタマイズします。
— サムナス・ムルック
ソース
1

あなた自身の特定のサーバーまたは異なるページと画像ボタンには、このようなものを使用できます（PHPのみ）

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

私はこれとスニペットを共有することはできませんが、あなたはアイデアを得るでしょう...

— ダジッククロス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.