web-dev-qa-db-ja.com

モバイルWebのFacebookおよびTwitter共有

モバイル用のFacebookおよびTwitterで共有するための特別なURLはありますか？それともウェブサイトのものと同じですか？

使用する

<script src="http://platform.Twitter.com/widgets.js" type="text/javascript"></script>   
<a href="javascript:return false;" rel="nofollow" onclick="window.open('https://Twitter.com/share?text=sometext&url=someurl', 'Twitter', 'toolbar=0,status=0,width=626,height=436')">Twitter</a>

twitter用と

<script>
    function fbs_click() 
    {
        u='www.something';
        t='title';
        window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
        return false;
    }
</script>

<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>

facebookのために。

facebookmobiletwittershare
17
resting

共有の実装は同じで、モバイルユーザーがJavaScript対応またはレンダリング可能なデバイスを持っている限り機能します。それ以外の場合は、各プラットフォームのAPI URLを使用してリンク内で共有できます。唯一の問題は、コールバックがそれらをTwitterまたはFacebookにリダイレクトし、手動でサイトに戻る必要があることです。リンクは次のとおりです。

Facebookでの共有：

http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>

例えば：

http://m.facebook.com/sharer.php?u=http://www.google.com

Twitterでのステータスの更新：

http://mobile.Twitter.com/home?status=<urlencoded status>
26
Simpleton

Simpletonの回答に関するいくつかのメモ。

  1. http://m.facebook.com/sharer.php のURLは、希望するものではない場合があります。共有ページをまったく興味深いものにするために、uクエリパラメータで指定するサイトには、ページにいくつかのタグが必要です。 Google以外の別のURLを配置してみて、私の意味を確認してください。共有ページで役立つ情報を表示するために、サイトのページで何を探しているのかを理解することはできませんでした。共有しているサイトに関する追加情報を提供する方法はありませんでした。

  2. Tクエリパラメータは、私の知る限り、Facebookで読み込まれなくなりました。

  3. Facebookのフィードダイアログの方が共有方法として適していることがわかりました（https://developers.facebook.com/docs/reference/dialogs/feed/）。共有できる情報については、そのページの下部にある例を参照してください。そのサンプルURLをブラウザーに貼り付けて、どのように表示されるかを確認します。パラメータをいじって、投稿内の各パラメータが何を制御するかを確認できます。たとえば、captionパラメータを指定しない場合、その場所でlinkパラメータのベースURLが使用されているようです。フィードダイアログアプローチを使用するには、アプリをFacebookに登録して、フィードダイアログURLに含める必要があるapp_idを取得する必要があります。また、アプリをWebサイトのURLに関連付けます。このURLは、フィードダイアログのURLでも使用します。 Facebookでモバイルフレンドリーなページを提供したい場合は、フィードダイアログURLの最後に＆display = touchを追加します。最後に、ユーザーがリダイレクトされるリダイレクトIDパラメータ（投稿IDがクエリパラメータとして含まれる）を提供する必要があるため、そのURLに応答を処理するための何かが必要です。

  4. http://mobile.Twitter.com/home?status URLに関して、私はいくつかのことを学びました。最初に、ステータスに含まれるURLは短縮されません（バマー）。 2番目に、ステータスに単一引用符が含まれている場合、それらは '（HTMLエンティティコード）としてエンコードされますが、ツイートを投稿したときにデコードされません。ただし、同じURLを使用してデスクトップ経由で投稿している場合、これは起こりません。 iPhone（私はiPhoneでSafariを使用していた）とデスクトップ（私はSafariを使用していた）の両方から次のURLを試してみて、私の意味を確認できます。

http://mobile.Twitter.com/home?status=Wayne's%20World

ステータスでJavaScriptのencodeURIを実行しますが、ほとんどのURL/Iエンコーダーでは一重引用符は通常、エンコード可能な文字ではありません。単一引用符を％27に置き換えるものもありますが、手動で挿入してみましたが、それでもステータステキストでデコードされませんでした。

この情報が、簡単なFacebookとTwitterの共有オプションを探している誰かがここに来るのに役立つことを願っています。

11
mbeaty

Twitter-これは、すべてのデバイス/ブラウザの問題について、URLによるツイートを解決した方法です。

http://Twitter.com/intent/tweet?text= + encodeURIComponent(Tweet);

encodeURIComponent-組み込みのJavaScript関数です。説明は here です。

' http://mobile.Twitter.com/home?status= 'はサポートされていません。Twitterがログインを要求すると、エンコードの問題が発生します。

Facebook-Facebookの共有に使用した Facebook APIの例

5
Jan-Terje Sørensen

URLは問題ありませんが、Facebookを適切に表示するには、サーバーでいくつかの作業を行う必要があります。 Facebookは「Open Graph」を使用するようになりました。これにより、Facebookが理解するWebページに特別なタグを追加できます。ページ上にあるメディアの種類を定義できます。Facebookアプリ内で作成した定義を使用して、独自のオブジェクトを追加することもできます。開発者のOpen Graphオブジェクトページへのリンクは Here です。

詳細ページのOpen Graphのサンプルは次のようになります。

<meta property="fb:app_id"            content="YOUR FACEBOOK_APP_ID }}" /> 
<meta property="og:url"               content="The URL that this page is on" /> 
<meta property="og:site_name"         content="Your domain" />
<meta property="og:title"             content="Title of your page" />
<meta property="og:type"              content="This is very important - it is how
  Facebook refers to your post.  Image, video, text, etc.  Even custom stuff is
  possible" />
<meta property="og:image"             content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner"        content="auto" />   
<meta property="og:description"       content="A description you want with this
content" />

等々。これはすべて<head> Facebookに提供している実際のURLのページ。その後、Facebookはこれを適切な投稿に変換します。また、Facebookがog：タグを探すように、アプリの開発者ページでOpen Graphを設定する必要があります。複雑ですが、機能します。

幸運を！

3
MontyThreeCard