SNSシェアボタンズ
今までSNSのボタンを付けるのが面倒なので各SNSの公式で用意されてるシェアとかのボタンを集めてきてjavascriptで自動的にタイトルとURLを設定するスクリプトを作ってました。最初はソーシャルネットワークではなくソーシャルブックマーク用に作ったのですが時流に合わせるウチにSNSボタンが多くなってきたり、ボタンがカウンター付きで重かったのでGoogleに遅いと思われないようにスクロールしないと読み込まないようにしたりと改廃してきましたが、見た目もリンクも古くなったので作り直しました。
今回新たに作った「SNSシェアボタンズ」は前回同様にサイトの情報から各SNSのシェアボタンを自動生成し、ボタンはカウンター無しでアイコンは埋め込みSVGで早くてきれいで設置しやすくなり、レスポンシブになっています。詳しくは下記をご覧ください。
SNSシェアボタンズ
改めてSNSシェアボタン作るに当たってそれぞれのSNSのリンクを見直したので調査結果を残しておきます。
LINE
正直LINEは主にスマホで使われるSNSで、スマホはブラウザにシェア機能が付いてるのにサイト内にシェアボタン要るの?とも思いますが圧倒的シェアなので付けておきます。
LINEが別サイトに転送されてるのを発見したので調べると昨年の1月にLINEのSNSシェアボタン周りがリニューアルされ、旧仕様から新仕様に転送されていたようです。
旧仕様:https://twitter.com/share?url=~&text=~
新仕様:https://twitter.com/intent/tweet?url=~&text=~
旧仕様はテキストしか指定できなかったのでテキストの末尾にURLを入れるのが常套手段でした。
新仕様はfacebookと似た仕様になっていてガイドライン的にはURLのみのようですが旧仕様のようにテキストも指定すると、ちゃんと反映されました。
URLだけの仕様でも一応LINEがmetaデータからタイトル・サムネイル・概要を引っ張ってきて表示されるのでテキストは不用な気もしますがスマホだと文字数的に限界があるのでテキストを指定した方がいい場合もあります。
twitter
元々twitterはtwitter.com/shareで始まるシェアが用意されていたのですが、数年前にtwitter.com/intent/tweetで始まるツイートが追加されました。
シェア:https://twitter.com/share?url=~&text=~
ツイート:https://twitter.com/intent/tweet?url=~&text=~
ツイートの方が機能は多いですが、シェアを使ってるサイトの方が圧倒的に多いです。今回はシェアの方を使う事にしました。
facebook
調べても公式の仕様は見つけられなかったが公式のデベロッパーサイトなどでシェアボタンのリンク先が下記だったのでコレを採用しました。
https://www.facebook.com/sharer/sharer.php?u=~
ただ他のサイトは下記のURLが多いです。
http://www.facebook.com/share.php?u=~
ただしぴえええええ!Facebookのシェアボタンのコードを修正して下さい(はてなブログ向け)!! – NO TITLEによると「share」でなく「sharer」にしないとスマホでエラーが出るらしいです。
http://www.facebook.com/sharer.php?u=~
Google+
公式に仕様が載ってます。
https://plus.google.com/share?url=~
はてなブックマーク
公式にはオリジナル画像でのボタン設置は載ってませんでした。
ブックマークレットの先に旧式のブックマークレットを解析したURLが
http://b.hatena.ne.jp/add?url=~&title=~
はてなブックマークボタンのURLを元にしたURL。本来は登録されてるブックマークを開く為のURLですしURLのhttp://やhttps://を削除する必要があったりと変則的です。
http://b.hatena.ne.jp/entry/~
あと、公式な出典は見つけられませんでしたが下記のURLも使えるようです。
http://b.hatena.ne.jp/bookmarklet?url=~&btitle=~
Pocket
Pocketボタンにはオリジナル画像のボタンの記述は無かったがSaving to Pocket Manuallyを解析してURLを。
https://getpocket.com/edit.php?url=~&title=~
SNSシェアボタンズを使用させて頂いている者です。
TwitterがXに変わったのでTwitterの画像をXのものに更新して頂きますようお願いします。
お手数ですが宜しくお願いします。
お知らせ頂きありがとうございます更新しました。