JavaScriptなしのFacebook共有リンク


137

次のリンクは、Twitterでページを共有するためのものです。

http://twitter.com/share

JavaScriptを必要としないFacebookの同様のオプションはありますか?

私はhttp://facebook.com/sharer.phpについて知っていますが、それにはgetパラメータを手動で挿入する必要があります(これは行いません)、またはJavaScriptを使用して(私の状況に適合しません)。

回答:


190

あなたは使うことができます

<a href="https://www.facebook.com/sharer/sharer.php?u=#url" target="_blank">Share</a>

現在、パラメーターとして現在のURLを渡さない限り、共有オプションはありません。これを行うには、間接的な方法を使用できます。

  1. たとえば、サーバーサイドページを作成します: "/sharer.aspx"
  2. 共有機能が必要なときはいつでもこのページをリンクしてください。
  3. 「sharer.aspx」で参照URLを取得し、ユーザーを「https://www.facebook.com/sharer/sharer.php?u= {referer}」にリダイレクトします

ASP .Netコードの例:

public partial class Sharer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var referer = Request.UrlReferrer.ToString();

        if(string.IsNullOrEmpty(referer))
        {
            // some error logic
            return;
        }

        Response.Clear();
        Response.Redirect("https://www.facebook.com/sharer/sharer.php?u=" + HttpUtility.UrlEncode(referer));
        Response.End();
    }
}

はい、これは素晴らしいオプションです。しかし、これをjsバージョンのようなポップアップで開きたい場合は、どうすればよいですか?現在、新しいタブで開いています。よろしくお願いします!
Sagiruddin Mondal 2013

これは私が求めていたものではありません。これには、共有されているページのURLを知っている必要があるため、「#url」をhrefページのURLに置き換えることができます。ただし、twitter.com / shareリンクを使用すると、共有するページのURLを挿入する必要がありません。
Web_Designer 2013年

1
画像を送信する方法を知っていますか?
miguelmpn 2015

@miguelmpn(および新しい読者)、この回答を参照してください。つまり、og:imageタグです。
Mosh Feu

この特定の方法のドキュメントはありますか?
Naved Khan

129

追記2:ジャスティンが指摘したように、Facebookの新しい共有ダイアログをチェックしてください。答えは後世に残します。この答えは時代遅れです


短い回答です。そうです、JavaScriptを必要としないFacebookにも同様のオプションがあります(まあ、必須ではない最小限のインラインJSがあります。注を参照してください)。

Ps:このonclick部分は、ポップアップを少しカスタマイズするのに役立ちますが、コードが機能するために必要ではありません ...それがなくても問題なく機能します。

フェイスブック

<a href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Facebook">
</a>

ツイッター

<a href="https://twitter.com/share?url=URLENCODED_URL&via=TWITTER_HANDLE&text=TEXT"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Twitter">
</a>

@superluminary ...持っていますが、必須ではありません。私はあなたがそれ(オンクリック部分)を削除できると述べました...そしてそれはまだ機能します。しかし、100%明確ではないことがわかります。編集します。
King'ori Maina 14

2
優雅な劣化の良い例です!
アーノルドダニエルズ

6
+1。変更http://www.facebook.com/sharer.phpする必要がありますhttp://www.facebook.com/sharer/sharer.php
Nir Levy

1
この回答を更新して、Facebookの指示に従って共有ダイアログを使用するように指示します。
ジャスティンスカイズ2014

TWITTER_HANDLEパラメータとは?
hamidfzm 2016年

38

コードにJavaScriptを含めても、JavaScript以外のユーザーをサポートすることは可能です。

ユーザーがJavaScriptを有効にせずに次のリンクのいずれかをクリックすると、単に新しいタブが開きます。

<!-- Remember to change URL_HERE, TITLE_HERE and TWITTER_HANDLE_HERE -->
<a href="http://www.facebook.com/sharer/sharer.php?u=URL_HERE&t=TITLE_HERE" target="_blank" class="share-popup">Share on Facebook</a>
<a href="http://www.twitter.com/intent/tweet?url=URL_HERE&via=TWITTER_HANDLE_HERE&text=TITLE_HERE" target="_blank" class="share-popup">Share on Twitter</a>
<a href="http://plus.google.com/share?url=URL_HERE" target="_blank" class="share-popup">Share on Googleplus</a>

これらにはshare-popupクラスが含まれているため、jQueryでこれらを簡単に参照し、共有するドメインに合わせてウィンドウサイズを変更できます。

$( "。share-popup")。click(function(){
    var window_size = "width = 585、height = 511";
    var url = this.href;
    var domain = url.split( "/")[2];
    スイッチ(ドメイン){
        ケース「www.facebook.com」:
            window_size = "width = 585、height = 368";
            ブレーク;
        ケース「www.twitter.com」:
            window_size = "width = 585、height = 261";
            ブレーク;
        ケース「plus.google.com」:
            window_size = "width = 517、height = 511";
            ブレーク;
    }
    window.open(url、 ''、 'menubar = no、toolbar = no、resizable = yes、scrollbars = yes、' + window_size);
    falseを返します。
});

醜いインラインJavaScriptや、無数のウィンドウサイズ変更の変更はもうありません。また、JavaScript以外のユーザーもサポートしています。


素敵な解決策!また、私は、現在のページのURLを埋めるためにいくつかのJavaScriptを使用しています:$(".share-popup").each(function(){ var href = $( this ).attr( "href" ); href = href.replace( "URL_HERE", document.URL ); $( this ).attr( "href", href ); });
GavinoGrifoni

@GavinoGrifoni非JavaScriptユーザーをサポートするには、現在のURLをサーバー側に含めることをお勧めします
rybo111

12

これらのリンクタイプを実際に試してみてください。

https://www.facebook.com/sharer.php?u=YOUR_URL_HERE
https://twitter.com/intent/tweet?url=YOUR_URL_HERE
https://plus.google.com/share?url=YOUR_URL_HERE
https://www.linkedin.com/shareArticle?mini=true&url=YOUR_URL_HERE

7

フィードダイアログページで説明されているように、フィード URLの「ダイレクトURL」オプションを使用できます。

/ dialog / feedエンドポイントにユーザーを明示的に誘導することにより、フィードダイアログを表示することもできます。

  https://www.facebook.com/dialog/feed?  
  app_id=123050457758183&
  link=https://developers.facebook.com/docs/reference/dialogs/&
  picture=http://fbrell.com/f8.jpg&
  name=Facebook%20Dialogs&
  caption=Reference%20Documentation&
  description=Using%20Dialogs%20to%20interact%20with%20users.&
  redirect_uri=http://www.example.com/response`

彼らはもはやドキュメントのどこにも「共有」について言及していないようです。これは、フィードに追加するという概念に置き換えられました。


2
しかし、アプリIDを登録せずにそのダイアログにアクセスすることはできませんか?
イーライ

7

私はそれが古いスレッドであることを知っていますが、プロジェクトに対してそのようなことをしなければならず、2019の解決策を共有したかったのです。

新しいdialogAPIはパラメーターを取得し、JavaScriptなしで使用できます。

パラメータは次のとおりです。

  • app_id (必須)
  • href 何も渡されていない場合に共有するページのURLは、現在のURLを使用します。
  • hashtag##amsterdamなどの記号が必要です
  • quote リンクと共有されるテキスト

JavaScriptなしでhrefを作成できます。

<a href="https://www.facebook.com/dialog/feed?&app_id=APP_ID&link=URI&display=popup&quote=TEXT&hashtag=#HASHTAG" target="_blank">Share</a>

考慮すべきことの1つは、FacebookがOpen Graphを使用しているため、OGタグが適切に設定されていない場合、希望する結果が得られない可能性があることです。


この回答を投稿していただきありがとうございます。しかし、Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.localhostでエラーが発生します。何か案は?私は両方で複数のドメインを含めることを試みているBasicと、AdvancedFBが、運の設定。
padawanTony

display=popupデスクトップでは動作していないようです。
Nicke Manarin

6

これらの答えの多くはもはや当てはまらないので、これは私のものです:

Facebook開発ページで説明されている共有ダイアログを使用します

例:

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

ただし、登録済みのapp_id、href、およびリダイレクトURIを入力する必要があります。


redirect_uriもう必要ありません。


3

1
(iframeバージョンを使用)
DMCS

これは本当に私が探しているものではありません。アンカー要素を使いたいだけです。
Web_Designer

すみません、それではあなたは運が悪いです。JavascriptまたはiFramedのいずれかです。
DMCS

3
ユーザーがJavaScriptを無効にしている場合、Facebookでページを共有することはできません。twitter.com/shareのような似たようなリンクがあるのか​​と思っていましたが、facebookです。
Web_Designer 2012

1
@Flimm developers.facebook.com/bugs/252983554810810を参照、Noorinからのコメントを読んでください。{quote} Noorin Ladhani・・FacebookチームHi Ronald-[共有]ボタンが廃止され、[いいね!]ボタンになりました。{引用}
DMCS 2016


2

JavaScriptを使用したいがFacebookのJavaScriptライブラリを使用したくない場合:

<a id="shareFB" href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"   target="_blank" title="Share on Facebook">Share on Facebook</a>
<script type="text/javascript">document.getElementById("shareFB").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=" + document.URL);</script>

JavaScriptが無効になっている場合でも機能しますが、JavaScriptが有効になっている場合は、共有プレビュー付きのポップアップウィンドウが表示されます。

Facebook jsスパイウェアを使用していないときに針1つクリックするだけで済みます:)


新しいタブで開く方法はありますか?現在、ポップアップが表示されています
Alauddin Ahmed

2

@ rybo111のソリューションに追加すると、LinkedIn共有は次のようになります。

<a href="http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}" target="_blank" class="share-popup">Share on LinkedIn</a>

これをJavascriptに追加します。

case "www.linkedin.com":
    window_size = "width=570,height=494";
    break;

LinkedInのドキュメントに従って:https : //developer.linkedin.com/docs/share-on-linkedin(「カスタマイズされたURL」セクションを参照)

興味のある方のために、LinkedInのロゴが付いたRailsアプリでこれを使用したので、役立つコードを以下に示します。

<%= link_to image_tag('linkedin.png', size: "50x50"), "http://www.linkedin.com/shareArticle?mini=true&url=#{job_url(@job)}&title=#{full_title(@job.title).html_safe}&summary=#{strip_tags(@job.description)}&source=SOURCE_URL", class: "share-popup" %>

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