2020年05月21日更新
【Twitter】ツイートにリンクを追加する方法
普段Twitterを利用していて、ツイートにリンクを追加して投稿するという場面は意外と少ないのではないでしょうか。今回はTwitterのツイートにリンクを追加したことがないという方に向けて、その方法などを詳しく解説していきたいと思います。
目次
- 1Twitterリンクとは
- 2【Twitter】ツイートにリンクを追加する方法
- ・ツイートにリンクを追加する方法
- ・ツイートに複数のリンクを追加する方法
- 3【Twitter】ツイートにリンクを貼る方法/貼り方
- ・Ctrl+Cもしくは右クリックでURLをコピー
- ・ツイートにリンクを貼れない時の対処法
- 4【Twitter】ツイートのリンクをコピーする方法
- ・ツイートの右上の【V】ボタンからコピーできる
- 5【Twitter】ツイートのリンク URLと認識されるURLの記述方法
- ・長いURLがツイート内でどのように表示されるのか
- ・リンクを追加するとツイートに入力できる文字数に影響があるかどうか
- 6自分のサイトに自分のTwitterアカウントへのリンクを貼る方法
- ・Twitterアカウントへのリンクを貼る方法
- ・テキスト入力でリンクを貼り付ける場合
- ・アプリを使ってリンクを貼り付ける場合
- ・Twitterのリンクをサイドバーへ埋め込む方法
- 7Twitterへの投稿リンクの作り方
- ・自分のページをTwitterで紹介する(固定リンク)
- ・リンク生成を自動化する
- ・bit.lyの短縮URLに自動変換するには - (1)bit.lyのアカウントをとる
- ・bit.lyの短縮URLに自動変換するには - (2)WebAPIで短縮URLを受け取り、即送信
- ・bit.lyの短縮URLに自動変換するには - (3) ページ表示の都度に変換する場合
Twitterリンクとは
皆さんはTwitterの投稿から、サイトのホームページや、知り合いのブログなどにアクセスした経験があると思います。
あれが、いわゆるリンクと言われるもので、サイトのURLをTwitterのツイートに追加して投稿すると、相手がTwitterからそのツイートのURLをクリックするだけで、簡単にURL先のサイトにアクセスすることができるのです。
Twitterからリンク先のサイトへのアクセスは日常的に行われていますが、いざ自分がTwitterでツイートにリンクを追加するとなると、やり方がよくわからないという状態になる方も多いのではないでしょうか。
ブログやサイト運営をしていない方であれば、Twitterでリンクを追加したツイートをする機会もないでしょうし、Twitterにリンクを追加する方法がわからないというのも自然なことだと思います。
Twitterのツイートに複数のリンクを追加することも可能で、リンク毎に減少する文字数も固定されているので、長いURLの文字数の多さを気にすることなくTwitterのツイートにリンクを追加できます。
【Twitter】ツイートにリンクを追加する方法
Twitterのツイートにリンクを追加する方法は様々なのですが、ここではTwitterのツイートに、リンク先のURLを直接入力して追加する方法や、Twitterで複数のURLを追加する方法について紹介していきます。
ツイートにリンクを追加する方法
Twitterのツイートにリンクを追加する方法ですが、Twitterのツイート作成画面から、直接リンク先のURLを入力することで、Twitterのツイートにリンクを追加することができます。
Twitterのツイートに入力したテキストがURLと認識されると自動的にリンクが設定される仕組みになっています。
Twitterのツイートに記述した長いURLに入力ミスがあると認識されないので、正確に入力していきましょう。
それでは実際に、Twitterのツイートにリンクを追加してみましょう。
ツイート作成画面からURLを直接入力
Twitterにログインしてツイート作成画面から、直接リンク先のURLを入力しましょう。
Twitterのツイートに入力しているテキストがURLと認証されるまでは黒文字のまま表示されます。
URLが認識されると黒文字から青文字に変わる
Twitterのツイートに入力しているテキストがURLと認証されると、黒文字の表示から、青文字の表示へ変わり、Twitterのツイートにリンクの追加が完了となります。
TwitterのツイートにURLを追加した後、続けて半角英数字のテキストを入力する場合は、URLとテキストの間に空白を入れないと、どこまでがURLなのか区別できなくなってしまうので注意しましょう。特にURLが長い場合に注意が必要です。
次はTwitterで複数のリンクを追加する方法です。
ツイートに複数のリンクを追加する方法
先程と紹介したTwitterでツイートのリンクを追加する方法と手順は同じなのですが、注意点として、Twitterでツイートに複数のリンクを追加する場合は、複数のURLがそれぞれしっかり認識されるようにテキスト入力しましょう。
Twitterのツイートに複数のリンクを追加するときは、複数の長いURLどうしがくっついて認識してしまわないよう、間に空白や文字などを入れて区切って複数のURLを入力するといいです。
Twitterで複数のリンクを追加した際に上手くURLが認識されない場合は、上記の内容をもう一度確認してみてください。
【Twitter】ツイートにリンクを貼る方法/貼り方
先程はTwitterのツイートにリンクを追加する方法でしたが、ここではTwitterのツイートにリンクを貼る方法について紹介したいと思います。
Twitterでリンクを追加するのと、Twitterでリンクを貼るのはどのように違うの?という疑問もあるかと思いますので簡単に説明します。
Twitterでツイートにリンクを追加は、直接リンク先の長いURLを入力したのに対し、Twitterでツイートにリンクを貼るは、リンク先の長いURLのをコピーしてそのまま貼り付けるという違いになります。
少々ややこしいかと思いますが、長いURLを直接入力するのか、長いURLをコピーして貼るのかというだけなのであまり難しく考えなくても大丈夫です。
Twitterでテキストから長いリンクを追加するよりは、コピーして貼り付けたほうが入力ミスなどでURLが認識されないといったことを防ぐことができます。
Twitterから複数の長いリンクを追加する場合も、テキスト入力よりも早くて長さに困ることなく確実にリンクを追加できます。
Ctrl+Cもしくは右クリックでURLをコピー
ネットからサイトにアクセスすると、画面上部にそのサイトのURLが表示されます。
そのURLをクリックすると青い表示になり選択された状態に切り替わるので、キーボードのCtrlボタンを押しながらCを押すとURLを簡単にコピーすることができます。
他にも、URLを右クリックからでもコピーすることが可能です。長い場合に便利です。自分がやりやすい方で試してみてください。
ツイートにリンクを貼れない時の対処法
Twitterのツイートにリンクを貼れない原因は様々ですが、Twitter側の不具合なら、アップデートでの改善を待つしかないと思います。
URLがスパム扱いされて貼れないという場合は、短縮URLにしてみてはいかがでしょうか。
Twitterを再起動してからもう一度試してみるという方法もあります。
【Twitter】ツイートのリンクをコピーする方法
ここではTwitterでツイートの長いリンクをコピーする方法を紹介します。
ツイートの右上の【V】ボタンからコピーできる
PCからTwitterにログインして、Twitterでツイートの長いリンクをコピーしたい投稿画面の右上にある【V】ボタンをクリックしてメニューを表示させます。
表示させたメニューの中の(リンクをtweetにコピーする)を選択すると、Twitterでツイートのリンクをコピーすることができます。
Twitterのツイートには固有のURLが設定されており、そのURLから特定のTwitterの投稿に直接アクセスすることが可能です。
【Twitter】ツイートのリンク URLと認識されるURLの記述方法
TwitterでツイートのリンクがURLと認識されるものがどういったURLなのか気になる方もいると思います。
ここでは、Twitterに認識されるURLの記述方法についてお話します。
URLには(http://)や(https://)が入っているのですが、Twitterでツイートに記述するURLに、この(http://)などが入っていなくても認識されます。
(http://)を省略したURLをツイートに記述してTwitterに投稿すると、後から自動的に(http://)が付け加えられてリンクが設定されます。
(http://)がなくてもURLとして認識されるので、今まで(http://)から記述していた方は、少し楽になるのではないでしょうか。
長いURLがツイート内でどのように表示されるのか
Twitterでツイートに表示されるURLは(http://)が省略されたものがツイート内に表示されます。
他にもホスト名が(www.)など長い場合はこの部分も省略されURLがさらに短く表示されます。
非常に長いURLの場合は後半部分も文字数が省略され、後半部分のURLが(...)という表示になり、ツイート内に表示されます。
Twitterでは限られた文字数でツイートしなければいけないので、URLのような長いものが省略されるのはとてもありがたいですよね。
リンクを追加するとツイートに入力できる文字数に影響があるかどうか
Twitterのツイートには文字数が制限されており、1回でツイート可能な文字数は140文字となっています。
URLは長いので、Twitterでツイートにリンクを追加される場合、残りの文字数に影響があるのか気になる方が多いと思います。
Twitterのツイートにリンクを追加した場合、ツイートに入力できる文字数に影響されるのですが、URLの長さに関係なく23文字となっています。
なので、Twitterで複数のリンクを追加しないのであれば、それほど気にする必要もないかと思います。
自分のサイトに自分のTwitterアカウントへのリンクを貼る方法
自分でブログなどのサイトをやっている方は、そのブログに自分のTwitterアカウントへのリンクを貼って、宣伝をしたいと思っているのではないでしょうか。
ブログなどのサイトに自分のTwitterアカウントへのリンクを貼れれば、Twitterのフォロワーを増やしたりするのにも便利ですよね。
ここでは自分が運営しているブログなどのサイトに、自分のTwitterアカウントへのリンクを貼る方法を紹介していきます。
Twitterアカウントへのリンクを貼る方法
Twitterアカウントへのリンクを貼る方法ですが、直接テキスト入力で長いリンクを貼る方法と、アプリなどを利用してTwitterアカウントのリンクを貼ることが方法があります。
まずは、Twitterアカウントをブログなどのサイトに直接テキスト入力でリンクを貼る方法を紹介します。
テキスト入力でリンクを貼り付ける場合
ブログなどのサイトにテキスト入力でTwitterアカウントのリンクを貼る場合は、(http://twitter.com/ユーザー名)でリンクを貼ることができます。
ユーザー名の部分は自分のTwitterアカウントの@の後の部分になります。
アプリを使ってリンクを貼り付ける場合
アプリを使ってTwitterアカウントへのリンクを貼る場合は「TextExpander」がおすすめです。
毎回テキスト入力でTwitterアカウントへのリンクを貼る必要がなくなるので、頻繁にTwitterアカウントへのリンクを貼るという方には便利です。
興味がある方は一度使ってみてください。
Twitterのリンクをサイドバーへ埋め込む方法
ブログなどのサイトのサイドバーにTwitterへのリンクを埋め込みたい場合は、公式Twitterからリンクを生成してサイドバーにTwitterへのリンクを埋め込むことができます。
Twitterにログインして、設定とプライバシーからTwitterへのリンクを生成できます。
ウィジットから生成
ウィジットの項目から、先程紹介したテキスト入力でリンクを貼る方法で使用した、テキストを入力欄に記述していきます。
(http://twitter.com/ユーザーアカウント)という風になります。入力が完了したら、⇒のアイコンをクリックしましょう。
生成されたコードをコピー
入力が完了したら画面したに、埋め込みに使用するコードが生成されるので、そのコードをコピーして使用すればサイドバーにTwitterアカウントへのリンクを埋め込むことができます。
Twitterへの投稿リンクの作り方
ここではTwitterへの投稿リンクの作り方について紹介します。
自分のページをTwitterで紹介する(固定リンク)
自分のブログなどのサイトをTwitterで紹介できる固定リンクを作る場合は、(http://twitter.com/?status=サイトURL)というリンクを作ればいいのですが、サイトURLをエンコードした方が尚良いです。
リンク生成を自動化する
リンク生成を自動化する場合はプログラムを書く必要があるので初心者の方には少し難しいかもしれません。
今回は実装が楽なJaveScriptを使います。(○○)は表示させたい文字になります。
HTML
<a href="#" id="bm_twitter_link">○○</a>
スクリプトコード
<script type="text/javascript">
//<![CDATA[
var t=document.title , u=location.href;
document.getElementById("bm_twitter_link").href=`http://twitter.com/?
status=`+encodeURIComponent(t+' '+u);
//]]>
</script>
bit.lyの短縮URLに自動変換するには - (1)bit.lyのアカウントをとる
Twitterは文字数の制限があるので、URLも短縮サービスを使うことが推奨されています。公式の短縮サービスはbit.lyなので、このbit.lyを使ってURLを短縮する方法を紹介します。
bit.lyでは、WebAPI提供しており、JSONまたはXMLで短縮URLを返してもらえます。
まずbit.lyのアカウントを作成し、AIPkyeを表示してキーを取得します。アカウントとキーによって次の形式で短縮URLを得ることができます。
http://api.bit.il/shorten?version=2.0.1&format=[データ形式]&callback=[コールバック関数名]&login=[アカウント]&apikey=[キー]&longurl=[URL]
データ形式:JSONまたはXML/コールバック関数:JSONで返ってきた値を受ける関数名/アカウント:bit.lyアカウント/キー:提供されたAPIキー/URL:変換したいURL
JavascriptではJSONが扱いやすいのでJSONを使っていきます。
bit.lyの短縮URLに自動変換するには - (2)WebAPIで短縮URLを受け取り、即送信
以下の例では、リンクが押された場合に、WebAPIを呼びに行き、JSONで帰ってきた値でスクリプトが生成されて、即コールバックが実行され、短縮URLがTwitterに送られるという動作をします。
HTML
<a href="javascript:void(0)" onclick="Getbitly(); return false;">○○</a>
スクリプトコード
<script type="text/javascript">
//<![CDATA[
//twitter (bit,ly)
function Getbitly(){
api = 'http://api.bit.ly/shorten?
version=2.0.1&format=json&callback=Callback&login=***&apikey=***&longUrl=';
var script = document.createElement('script');
script.type= 'text/javascript';
script.stc = api + encodeURIComponent(location.href) ;
document.body.appendChild(script);
}
function Callback(json) {
vat bitly_uri=json.results[location.href]['shortUri'];
if ( bitly_uri.indexOf("/bit.ly/") == -1 ) {
location.href = 'http://twitter.com/?status='+encodeURIComponent(document.title+' ' +
location.href);
}else{
location.href = 'http://twitter.com/?status='+encodeURIComponent(document.title+' ' +
bitly_url);
}
}
//]]>
</script>
bit.lyの短縮URLに自動変換するには - (3) ページ表示の都度に変換する場合
先程の場合、リンクをクリックした時にbit.lyにアクセスを行いますが、用途によって事前に短縮URLを確認しなければならないケースや、ページに表示した瞬間にbit.lyから短縮URLを得たい場合もありますよね。
ここではDOMを使用した例を記述してみました。
HTML
<s href="#" id="bm_twitter_link">○○</a>
スクリプトコード
<sctipt type="text/javascript">
//<![CDATA[
var t=document.title , u=location.href , bitly_uri;
// twitter
window.onload=function(){
Getbitly();
}
// twitter (bit.ly)
function Getbitly() {
api = 'http://api.bit.ly/shorten?
version=2.0.1&format=json&callbac=Callback&login=***&apiKey=***&longUrl=';
var script = document.createElement('script');
script.type = 'text/javascript;
script.src = api + encodeURIComponent(lication.href) ;
}
function Callback(json) {
bitly_uri=json.results[location.href]['shortUrl'];
/* 記述*/
document.getElementById("bm_twitter_link").href='http://twitter.com/?
status='+encodeURIComponent(t+' '+bitly_url);
//]]>
</script>
まとめ
今回はTwitterでツイートにリンクを追加する方法や、自分のTwitterアカウントへのリンクを貼る方法などについて紹介していきました。
なかには少し難しい内容もあるかと思いますが、少しずつ覚えていけば大丈夫です。
Twitterはすごく便利なツールなのでこれからも活用していってください。