10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Linkbal(リンクバル)Advent Calendar 2021

Day 9

SNSに共有するURLを作成仕方

Last updated at Posted at 2021-12-08

はじめに

初めまして、ダットです!4ヶ月前にSNS関連な新機能を実装しました。具体的には、ユーザーはアンケートを答えてからその結果をソーシャル・ネットワーキング・サービス(SNS)に投稿できる機能です。全部のSNSに対象ではなくLINEやTwitterやFacebookなどの現在流行っているSNSだけで十分です。目的は認知度を上げることでした。

では、SNSに共有したい場合どうすればいいのかちょっと調べました。結局、共有するURLを作成する方法にしました。理由としては実装も軽くてユーザーは一回押すとURLとコンテンツとも一緒に投稿できるのでユーザーにとっては便利だと判断しました。

概要

簡単にいえば、コピぺしなくても共有したいURLを即時に共有できるものです。SNSによって共有できるものも変わりますが、せめて導入したいURLを共有できるはずです。
その共有URLをボタンにしてページに置くと済みます。ユーザーはそういうボタンを押すだけで即時に自分のSNSに投稿できるようになります。
具体的にはこういう感じですね。
image.png

実装

全部のSNSの共有するURLを紹介しなくて人気があるものだけ紹介させていただきます。:clap:

Facebook(フェイスブック)

Facebookの共有できるものはURLだけです。ユーザは押すとシェアする画面に入って自分好きなコンテンツを適当に入力できる仕様です。

https://www.facebook.com/sharer.php?u=[url]

注意:[url]は共有したいURLです。
例をするとこれを押すと私のウェッブURLをFacebookに投稿できるはずですね。
image.png

Twitter(ツイッター)

Twitterの方がFacebookよりたくさんの情報をURLと一緒に共有できます。記事の内容も投稿できるしハッシュタグも含められます。具体的にはこの形式です。

https://twitter.com/intent/tweet?url=[url]&text=[text]&hashtags=[hashtags]

注意:[url]は共有したいURLで[text]は共有したいコンテンツで[hashtags]はハッシュタグです。なお、コンテンツの長さは制限があります。最大限は280文字ですが、日本語文字は二倍になるため140になってしまうのでご注意ください。

例を出すとこれを押すと全部の情報をすぐに投稿できます!

image.png

LINE(ライン)

LINEは以上の二つと違うことがあります。パソコンとモバイルで共有するときURLは異なってますので分岐する必要があるのです。そうしないと不具合が発生するはずです。

モバイル

https://line.me/R/share?text=[text-url]

注意:text-urlはテキストとURLを混じってる共有する内容です。パラメータはtextしかないですが、その中にURLを含めてもいいので大丈夫です。

パソコン

https://social-plugins.line.me/lineit/share?url=[url]&text=[text]

注意:[url]は共有したいURLで[text]は共有したいコンテンツです。

例を出すとこれを押すとLINEに投稿できるはずです。

image.png

終わりに

以上は私が体験した内容なので間違ったところがあればお気軽に教えてくださいませ。この記事はあなたに何か役立つなら幸いです。興味があったら私たちの機能を試してもらえればと思います。マッチング戦闘力診断です!

登録しなくても体験できますのでぜひ診断を受けてみてください。よかったらこれ:point_left:

10
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?