今さら聞けない!Twitterのツイートボタンを設置する方法

今さら聞けない!Twitterのツイートボタンを設置する方法

よくわからないからと、ずっと放置してきたTwitter。気が付けば私のまわりはみんなあの青い鳥に夢中です。こいつぁブログに取り入れなければもったいないと、手始めにツイートボタンを設置してみました。

そこで今回は、Twitterのツイートボタンを設置する方法をご紹介:)

SPONSORED LINK

[初心者向け]編集不要!コピペでOK!!

設置は簡単、ボタンの下に書かれたコードをコピペするだけ!

2014/04/30 追記

ボタンの設置方法が分からない方はこちらの記事を参考にどうぞ:)

記事:記事下など好きな所にSNSボタンを設置する方法

吹き出しver(おすすめ)

吹き出しver

<a href='https://twitter.com/share' class='twitter-share-button' data-lang='ja' data-count='vertical'>ツイート</a>

横にカウントがあるver

横にカウントがあるver

<a href='https://twitter.com/share' class='twitter-share-button' data-lang='ja'>ツイート</a>

カウントなしver

カウントなしver

<a href='https://twitter.com/share' class='twitter-share-button' data-lang='ja' data-count='none'>ツイート</a>

[上級者向け]じっくり吟味してから設置!

ここからはちょっと上級者向けの設置方法をご紹介!

まずは以下のサイトにアクセスします。

Twitter buttons(公式ページ)

Share a Linkを選択

Twitterにはツイートボタンを含め4種類のボタンが用意されています。今回はツイートボタンの設置方法ですので一番左の「Share a Link」を選択しましょう。

細かいオプション設定ができます!

ここに細かい設定をしていきます。

Share URL(URLを共有)

シェアしたいURLを指定します。

Use the page URL:ページのURLを使う

入力:指定したURLを常に使う

Tweet text(ツイート内テキスト)

ツイート本文に挿入したいテキストを指定します。

Use the title of the page:ページのタイトルを使う

入力:指定したタイトルを常に使う

Show count(数を表示)

ツイートされた数を表示するか選択します。

チェック:表示する

未チェック:表示しない

Via(ユーザー)

ツイート本文に追加したいアカウント名を指定します。

設定すると「@XXさんから」と表示されます。

Recommend(推奨)

ツイート後、指定したアカウントのフォローを促す事ができます。

ブログ用アカウントのフォロワーを増やしたい方は、ぜひ設定しましょう。

Hashtag(ハッシュタグ)
ツイート内容にハッシュタグを入れたい場合に設定します。
Large button(ボタン大)

ボタンサイズを変更します。

チェック:大ボタン

未チェック:普通ボタン

※吹き出し風にしたい方は未チェック

Opt-out of tailoring Twitter(カスタマイズされたTwitterからオプトアウト)
ツイッターホーム画面の「おすすめユーザー」欄に表示したくない場合チェックを付けます。特に理由がなければ未チェックのままでOK!
Language(言語設定)
ボタンに表示する文字の言語を設定します。この記事を読んでいる人の半数以上は日本人だと思いますので「Japanese - 日本語」を選択しましょう。

ツイートサンプル

設定された項目はこんな感じでツイートされます。

以上で設定はおしまい!

プレビュー下のコードをコピーして、ツイートボタンを表示させたい箇所に張り付けましょう!

吹き出し風にカスタマイズする

ボタンを吹き出し風にカスタマイズするには、aタグ内に次の文字を追加します。

data-count='vertical'

追加したコードはこんな感じ。

<a 
href='https://twitter.com/share' 
class='twitter-share-button' 
data-count='vertical'
data-lang='ja'>ツイート</a>

まとめ

Twitterについてまったくのド素人だった私も、少し大人になれた気がした今日この頃。

まだツイートボタンを設置していなかった方は、この機会にどうぞお試しあれ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)