WEBサイト
  サポート

トップページ > WEBサイトサポートブログ > 素敵なサービス紹介 > AddToAny Share Buttons:SNSにシェア・共有できるリンクボタンをまとめて、簡単に取得できるサービス!
AddToAny Share Buttons:SNSにシェア・共有できるリンクボタンをまとめて、簡単に取得できるサービス!

サイトを公開。ページを作成。さ、宣伝して集客しなきゃ。

お金あれば・・・
 (なくても一応考えるけど)
  1. Google Adsense ほかの広告
  2. 経費をかけての販促対策
最低限
  1. SEO対策(1回で終わらないけど)
  2. SNS利用した 投稿・宣伝
効果薄くてもやれる技術的なこと・・・
  1. RSSフィード や
  2. ニュースサイトへの考察とアプローチ
  3. 外部サイトでの紹介。リンク誘導

・・・ほかにもありますけどね。

 でも、その前に、各ページにこれは設置しておきたいよね。と思われるのが・・・

SNSシェアリンク共有リンク

XFacebookなどのアイコンボタンをクリックすれば 投稿できる画面が出てくる・・・あれ、ですよ。
 もちろん、こういうツール的なものを設置しただけでいい、わけがない
いいページ、閲覧者に本当に役立つコンテンツを用意して、閲覧者が「あーこれは他で紹介したいなぁ」と思った時に、ストレスなくクリックして投稿、紹介していただける
・・・そのためのツール、ボタンですよね。

これはWEBツールコーナーに用意しなきゃ、と思い 実は、このサイトで公開するツールとして創り始めたんです。


創り方自体は比較的容易で、とにかく簡単にさっさと使える、いいツールを創ろう、公開しようとしてました。
創ろうとしていた要求仕様はこんな感じ。
  1. サイトのURLアドレスを入れれば、サイト内構造を取得し、全ページのSNSシェアリンク自動生成する
  2. XやFacebookはもちろん、ThreadやBlueSkyなど現在有効なSNSリンクの自動生成
  3. アイコン画像をいくつか用意して(ちゃんと、各SNSのアナウンスしている公式に用意されている画像を使って)
  4. アイコン形式ボックスタイプか指定できる
  5. 画像は自動的に、画像本体ではなく、SVGコードに変換して、別に画像を用意しなくても使える

少し、製作途中のキャプチャ、お見せますね。(過去のいぶーつ)
こんな感じ。
ページを、シェアや投稿で拡散してもらうSNSシェアリンク・生成ツール 製作途中のキャプチャ
まだ、デザイン要素FIX前なんですが、アイコンとかも、公式画像ダウンロードして ひとつづつ創っていたわけですよ。

HTMLテキストの生成まで実装終えて
ページを、シェアや投稿で拡散してもらうSNSシェアリンク・生成ツール 製作途中のキャプチャ2
画像からのSVGコード生成も終え、
ページを、シェアや投稿で拡散してもらうSNSシェアリンク・生成ツール 製作途中のキャプチャ3

もう少しだ・・・

・・・ところが、うまくゆかない事が色々と出てきて、ひとつづつその対応をしていたわけです。
  1. Instagramは知ってたけど、Threads外部からのシェアリンクの案内がなく、創れないのかも?
  2. 画像からSVGコードへの変換は、仕組み自体はできたけど、クォリティ低く、使えないレベル
  3. 生成される、SVGコードもかなりのチューニングしなくてはならない


・・・なかなか対応がうまく進まず、試行錯誤をしている時、
世の中で公開されている「SNSシェアリンク作成ツール」を参考にするために調べてみようと。
・・・・・
・・・・・
・・・・・ え?
なんだ。こんな凄い、素敵なツールがすでにあるじゃないか?
しかも、Threads にまで対応してる。
これに対抗して、創る理由? ある?

ないな?

創るの、途中で止めました。
そうさせたのが

AddToAny: Share Buttons by the Universal Sharing Platform

 このページにもすでに貼っている
AddToAny: Share Buttons by the Universal Sharing Platform で」生成された SNSシェアリンク
ね、Threads もあるでしょ。
これを簡単に創れる・・・しかも、各ページごとに用意する必要もなく、JavaScriptでページのURLやタイトルを取得して、いい感じのシェアウインドウ開いてくれる。
もういうことないでしょ。

もちろん他にも、WEBツールコーナーに、創って用意したものの中にも、すでに素敵なツールとして同じような公開されているツールありますよ。
ただどれも、もう少しこうならなぁ、こういう機能も欲しいなぁ、とか、有料かぁ、とか・・・・
よし、自分で創ろと思わせられたのですが、このSNSシェアリンク作成ツールに関しては、AddToAny。これでいいでしょ。
会員登録も必要なく、もちろん無料のツール。

しいて言えば、リンクは https://www.AddToAny.com/ に飛んで、そこで色々と動くようなので、ビッグデータ集めてるのかなぁ? とか セキュリティ的にはどうか、とも思いましたが。

いや、これは AddToAny。これでいいでしょ。

簡単に説明しますね。

AddToAnyで。簡単に、SNSシェアリンクをつくろう

  1. AddToAnyサイトにアクセス
    https://www.AddToAny.com/
  2. Get the Share Buttonsをクリック
    Get the Share Buttons
  3. Any Websiteをクリック
    Any Website
  4. Choose Services…をクリック
    Any Website
  5. 左から右に利用するものをセットしてゆきます
    右にセットしたものは。ドラッグ&ドロップで順番を変えられます
    よく使われる仕組みですが、わかりやすくて直感的でいいUIですねぇ
    Any Website
    Any Website
  6. 私は最終的にこうなりました。欲張りだなぁ・・・
    [Done]をクリック
    Any Website
  7. More Optiosをクリック
    Any Website
  8. Language で日本語を選択
    Any Website
  9. Show menu only ... をチェックして
    [Get Button Code]をクリック
    Any Website
  10. 完了
    HTMLソースコードがテキストで提示され、あらかじめ選択された状態で表示されます
    UX考えた、本当によくできたUIですねぇ。勉強になります
    Any Website
  11. 取得したソースコード
    Any Website
  12. いちお意地。スマホではあまり意味ないけど、PCでマウスオーバーで tipが表示されるよう title属性を追加
    Any Website
  13. これが完成
    デフォルトで AddToAny で生成したものは float:left ですが
    サイトに貼ったものは、順番逆になりますが、float:right に変えてます
     
利用させていただき、ありがとうございます。
< 前の記事     一覧へ     後の記事 >
2025/05/31
THU
00:00:00

ブラウザ・OS 最新バージョン

毎日更新:2025-09-08 調査更新済
  • Android(stable) 未取得
  • Chrome Android(stable) 140.0.7339.51
  • Chrome iOS(stable) 140.0.7339.101
  • Chrome(beta) 141.0.7390.7
  • Chrome(dev) 141.0.7378.4
  • Chrome(stable) 140.0.7339.81
  • Edge(stable) 140.0.3485.54
  • Firefox(stable) 142.0.1
  • Opera(stable) 121.0.5600.50
  • Safari iOS(stable) 未取得
  • Safari(stable) 未取得
  • iOS(stable) 未取得

現在の貴方のIPアドレス

216.73.216.31

このサイトで書いている人

株式会社ツクルン

株式会社ツクルン

Webアドバイジング・クリエイター
池田南美夫
もうすぐ●●歳。ずっーと現役SE。日本にインターネットが上陸してから、ずっーと携わる。 ほんとは超アナログ人間のギター弾き、バンドマン。でも音楽活動とSE、案外似てる。