web-dev-qa-db-ja.com

カスタムボタンからFacebookのようなボタンをトリガーする方法は？

ボタンのようなカスタムFacebookを作成しました。

Custom Like Button

ボタンをクリックすると、以下のようなFacebookが提供する「いいね」ボタンをトリガーするようにするにはどうすればよいですか？

Facebook Like Button

facebookfacebook-like
50
Eralph

ソーシャルプラグインの facebook policy によると、ポイント4の状態：

「ソーシャルプラグインの要素を不明瞭にしたり、覆ったりしないでください。」

Facebookから提供されているため、画像を直接変更することはできません。

30
Alexander Nenkov

Facebookボタンは、別のドメイン、Facebookのドメインにあるソースを持つiFrameにあるため、 same-Originポリシー で保護されているため、ボタンを変更できません。

また、 Facebookのポリシー は、Facebookの埋め込みコンテンツ（ソーシャルボタンなど）を使用する場合、ボタンとロゴの変更を禁止します。

そのため、FBボタンを変更できるとは考えていません。たとえ可能であっても、Facebookの利用規約に違反することになります。

しかし...まだやりたい場合は、Facebookのネイティブボタンを使用して、Facebookボタンの上または下に独自の画像を配置して、カスタムボタンを偽造できます。

画像を上に配置することは、CSS3ポインターイベントを使用する場合にのみ可能です。これにより、画像はクリックスルーされ、クリックイベントは画像を「通過」し、実際にFacebookボタンをクリックします。これは、ポインターイベントをサポートする新しいブラウザーでのみ機能します。

別のオプションは、FBボタンの背後に画像を配置し、FBボタンの不透明度をゼロに設定することです。

私はこれを自分で数回使用しました。Facebookコードを少し掘り下げて、ホバーイベントやその他すべてを添付して、カスタムボタンのように見せることができます。設定する要素を見つける必要がありますopacity : 0 オン。

元のボタンとは異なる機能をカスタムボタンで機能させる方法を理解しようとして時間を費やしたことはありませんが、おそらく可能です。

JavascriptまたはjQuery trigger（）でFBボタンを実際にトリガーしようとする試みはすべて失敗しましたが、おそらく他の誰かがそれを行う方法を見つけたのでしょうか？

21
adeneo

Fbのようなクラスを使用してhtml要素を作成すると、facebook javascript SDKは、ドキュメントの読み込み時にlikeボタンでそれを変換します。ユーザーがカスタムボタンをクリックすると、カスタム要素を作成し、いいねボタンのクリックイベントをトリガーできます。

例えば ​​：

<input type="button" id="mycustombutton" value="Like">
<div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

jQueryコード：

$("#mycustombutton").click(function(){
      $(".fb-like").find("a.connect_widget_like_button").click();
      // You can look elements in facebook like button with firebug or developer tools.
});

更新

Facebook SDKはiframeのボタンのように作成しており、ブラウザはページ内のiframeへの介入を許可していません。 iframeの要素にイベントリスナーを追加することはもうできないと思います。

9
Mesut Tasci

これは、詐欺につながる明白な理由で許可されていません。ウェブ上の画像をクリックするたびに、それが実際の画像なのか、FBフィードにいいね！と表示されるのかわからない場合を想像してください。それは悲惨なことです。

これを合法的に行う場合は、アプリを作成し、ユーザーがサイトにアクセスしたときにユーザーにアプリを承認させる必要があります。これにより、ユーザーがアプリに自分のFBアカウントへのアクセスを許可することに同意するポップアップが開きます。それが完了したら、ユーザーに代わってサーバー側スクリプトを介して同様のリクエストを送信できます。言い換えれば、努力する価値はありません。

一方、ページの「いいね！」カウントを取得し、必要に応じて表示する場合は、_"http://graph.facebook.com/#{url}"_へのリクエストを介して行うことができます。これにより、いいね！の数を含むJSONペイロードが返されます。 jQueryでは次のようになります。

$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });

4
aleemb

私は、人々が「いいね」ボタンをトリガーできないようにするために、facebookは非常に長い時間をかけていくと思います。これは、誰かがサイトにアクセスしたときにスクリプトが自動的に「いいね」ボタンをクリックするのを防ぐためです。

CSSを使用してスタイルをオーバーライドし、代わりに画像を表示できる場合があります。

3
Developer

Facebook likeボタンの上にボタンをオーバーレイし、cssを使用してFacebookボタンを非表示にすることができます。ただし、これの合法性については不明です。

2
waggydogtail

このようなAjaxリクエストをトリガーしようとすることができます

FB.api(
  'me/og.likes',
  'post',
  {
    object: "http://samples.ogp.me/226075010839791"
  },
  function(response) {
    // handle the response
  }
);

https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes

2
sparkle

http://sharingbuttons.io/ は、JavaScriptをまったく使用せずにソーシャルメディア共有ボタンを作成できます（いいねボタンではありません質問のように…）。 Facebookの場合、次のようなリンクを使用するだけです。

    <a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
       target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackoverflow, you have to cmd + click to open the link in a new window.

独自のCSSでカスタマイズし、共有ボタンを模倣するには、target = "_ blank"の代わりにポップアップでURLを開きます。

1
François Romain