ソーシャル メディアの共有リンクを提供する最も簡単な（そして最も効果的な）方法

この夏、私は「ソーシャル メディアに必須のメタ タグ」を書き、開発者がソーシャル メディアで共有する際の表示を最適化するために Web ページを準備する方法について説明しました。 しかし、ユーザーがこれらの Web ページを共有できるようにするためのリンクの作成についてはどうでしょうか。 Facebook、Twitter、LinkedInでは、ボタンジェネレーターや外部JavaScriptを必要とするものなど、さまざまな方法でリンクを作成することができます。 しかし、そのようなことをしなくても、ウェブページを共有するためのリンクを独自に作成することができます。 しかも、自分で簡単にできるのが最大の魅力です。

基本的なコンセプト。 単なるリンク

リンクを使用して Web ページを共有する場合、基本的には、各ソーシャル メディア サービスが提供する URL に GET リクエストを送信する（つまり、リンクをクリックする）ことになります。 そして、この URL の末尾に一連の名前/値のペア (「タイトル」のようなクエリ パラメータ) を追加することにより、共有したい Web ページの URL と、場合によっては追加情報を指定できます。 これらの文字は「パーセントエンコーディング」の対象となります。つまり、クエリパラメータでは「%」の後に2桁の16進数コードを付けて表現されます。 以下は予約文字とパーセントエンコードされた同等文字である。

注）。 スペースは”%20 “または “+”で表すことができます。

もちろん、これらの16進コードを暗記する必要はない。 変換を提供するリソースはたくさんありますし（Bingは検索エンジンに組み込まれています）、すぐにわかるように、JavaScriptもこの点で力仕事をこなせます。

Facebook

Developer’s Guide によると、Facebook は、Web ページを共有するときに GET リクエストを送信するために次の URL を指定しています：

https://www.facebook.com/dialog/share

4 つのクエリー パラメーターがありますが、必要なのは 2 つだけです。 App ID を持っていない場合、登録プロセスは困難ではありませんが、さらに簡単なソリューションが存在する場合は、悩む必要はありません。

App ID を必要としない、Web ページの共有に関する Facebook の元の方法は、もはやどのドキュメントにも記載されていませんが、まだサポートされています。 実際、無数の Web サイトがこの方法を使用しており、すぐに非推奨になるとは思えません。 このURLは:

https://www.facebook.com/sharer.php

利用できる唯一のパラメーターは “u “で、共有したいウェブページのURLを指定するために使用されます。 以下は、CSS-TricksのホームページをFacebookで共有する例です。

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

前述のとおり、共有されるURLは必ずパーセントエンコードされています。 また、”? “が最初のクエリパラメータの開始を指定していることに注意してください。

Twitter

Twitter では、URL を介して Web ページを共有することをツイート Web インテントと呼びます。 ユーザーは、ツイートする前にこれらすべてを編集する機会がありますが、面倒な場合には、これを利用することで先手を打つことができます。 たとえば、次の情報をツイートしたいとします:

その際のURLは、クエリー パラメータをパーセントエンコードして、わかりやすく改行を追加しています。

https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html

そして、次のようになります。

Twitter がテキストをあらかじめ選択することで、ユーザーが簡単に編集できることに気づかれることでしょう。 また、ツイートは140文字以内でなければならないので、長すぎるコピーは提供しない方がよいでしょう。 TwitterのDevelopers Documentationで詳しく説明されているので、ここではあまり使われない3つのパラメータについて説明します。 これらの追加パラメータは、ツイートに関連するユーザー名、関連するユーザー名の候補、関連するツイートのIDを指定することができます。

LinkedIn

LinkedIn で共有するときに使用する URL は、

https://www.linkedin.com/shareArticle

LinkedIn の開発者向けドキュメントから引用したこの表のように、合計 5 つのパラメータが使用可能です。

共有したいウェブページの URL に加えて、もうひとつ「ミニ」というクエリーパラメーターが必要です。 しかし、ご覧のようにその値は決して変化しないので、それをURLにハードコードすればいいのです。 実演として、LinkedInで次のように共有してみましょう。

これにより、次の URL が得られます (再度、わかりやすくするために改行を追加)。 同様に、「summary」パラメータが省略された場合、Open Graphタグ<meta property="og:description">が使用されます。 source “パラメータについては、Webページを共有する際にこの値がどのように使用または表示されるかについて、ドキュメントには何も記載されていないため、無視して問題ないようです。

これらをすべて理解した上で、共有する Web ページに適切な Open Graph タグがある場合、URLを指定するだけで、「title」と「summary」パラメーターが適切に入力されるので、十分でしょう。

<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

アンカー タグに target="_blank" を追加すると、共有ダイアログが新しいウィンドウまたはタブで表示され、デスクトップからモバイルまで、すべてのデバイスでうまく機能するようになります。 CMS によって動的に提供される Web ページでは、このデータ クランキングをサーバー側で実行し、HTML の必要な場所に挿入する絶好の機会になるでしょう。 CodePen で作成した HTML Links Generator を使用することもできます。 これは、今確認した必要なパラメータのいずれかまたはすべてを入力すると、適切な HTML を出力し、自分のコードに挿入することができます。 Adam Coti (@adamcoti) による HTML Links Generator を CodePen でご覧ください。

ほとんどフロントエンドのみで作業するフリーランスの Web 開発者として、私はカスタマイズせずに、プロジェクト用のターンキー ソリューションとして機能する JavaScript/jQuery 機能を使用することを選択しました。 この方法では、静的な Web サイトで作業していても、WordPress テーマをカスタマイズしていても、CMS に統合するテンプレートを手渡していても、すべての共有リンクが適切に処理されることが保証されます。 JavaScript では、共有ボタンに click イベントをアタッチする関数 setShareLinks() が、Document Object Model (DOM) が準備できたときに呼び出されます。

<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>

function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}

現在の Web ページの URL は、document オブジェクトのプロパティを読み取ることによって簡単に取得できます。 また、Twitter では、Open Graph タグ <meta property="og:description"> がデフォルトのツイートに適切なコンテンツを提供します。

さて、一部のクライアントの要望により、window.open() を使用して特別なサイズのセカンダリ (ポップアップ) ウィンドウに新しく形成された URL を表示することにしました。 ほとんどのデスクトップ ブラウザでは、このウィンドウは画面の水平方向と垂直方向の中央に配置されます。 興味深いことに、ユーザーがソーシャル メディア アカウントにログインしている場合、Facebook と LinkedIn はこのセカンダリ ウィンドウのサイズを必要なサイズに変更します。 Twitterはそうではないので、デフォルトの幅と高さを使用して、十分なスペースを確保しています。 レスポンスに関しては、タブレット端末やモバイル端末では、セカンダリーウィンドウが新しいタブとして解釈されます。 この機能のデモは CodePen.

See the Pen Social Media Sharing で見ることができます。 Automated Link Creator by Adam Coti (@adamcoti) on CodePen.

しかし、ポップアップ ウィンドウの使用は、かつては一般的でしたが、現在はアクセシビリティ上の理由から嫌われるようになってきています。 簡単な解決策は、上記の JavaScript で変数 params に空の文字列を設定することです。 そうすることで、ユーザーのブラウザの設定に応じて、新しいウィンドウまたはタブで URL が起動します。

結論

恐ろしいことわざがあるように、猫の皮をむく方法はたくさんあります。 上記のテクニックは、単に私が好む方法です。 より良い、より最適化された方法があるかもしれません。 おそらく、JavaScript で読み取ることができる HTML のデータ属性 (たとえば、ハッシュタグを指定する) を使用し、必要な場所でクエリ パラメータとして追加することができます。 少なくとも、あなた自身の実装のためのインスピレーションになることを願っています。