はぴすぷ

Twitterのツイート・フォローボタンの埋め込みコード取得と設置方法

      2015/09/22

前回はfeedlyの説明とボタンの設置について触れたので、次はTwitterのフォローボタンを追加する方法です。

feedlyはこちら：最近流行の【feedly】登録から使い方まで日本語で解説！ボタンの設置方法も

サイドバーのプロフィール下にfeedlyとTwitterのフォローボタン置いておいたら、フォローしてくれたりしないかなーと淡い期待を持ちつつ早速取り掛かります。

スポンサーリンク

ツイートボタンの作成

まず、公式のボタンを作るサイトがあるのでアクセスします。
Twitterボタン

SS_0762_0 ツイートボタンを作成するので左端の「リンクを共有する」を選択すると、下に設定できる画面が表示される。
基本的には左側のパラメータを適宜いじくって、右側のTweetボタンで確認する流れです。

SS_0767

ツイートボタンのパラメータについて

各項目を文字だけでうまく説明出来る気がしないので一生懸命画像をつくりました(^q^)
それでも分かりづらいと思いますｗ

twitter_button_generator

何となくは伝わりましたかね(；・∀・)

一応文章でも軽く説明しておきます。
緑の文字がオプションのキー名で、オプションあり、なしの順で説明します。

  • URLを共有（data-url）：指定した値 or 今見ているページのURL。
  • ツイート本文（data-text）：指定した値 or 今見ているページのタイトル
  • 数を表示（data-count）：none（表示しない）or 表示する
  • ユーザー（data-via）：@指定した値さんから or 非表示
  • 推奨（data-related）：ツイート後に指定したユーザー（コンマ繋ぎで複数可）をフォローするか尋ねる or 何もしない
  • ハッシュタグ（data-hashtags）：指定したタグ（コンマ繋ぎで複数可） or 非表示
  • ボタン（大）（data-size）：large（大きくなる） or 通常サイズ
  • Twitterのよるカスタマイズのオプトアウト（data-dnt）：true（ユーザーの興味関心に影響を与えない） or 興味関心に影響を与える（10日以内で有効）
    例えばTwitter登録してない人が、ツイートボタンから登録したらほぼ確実にフォローしませんか？と紹介される。直近で見たサイトほどピックアップされる確率が高いイメージ。
  • 言語設定（data-lang）：ja（日本語の場合） or ページを見ている人の環境に合わせる

公式のボタン作成機能ではこれだけ用意してくれています。

ツイートボタンの埋め込みコードについて

実際に作成される埋め込み用のタグを確認してみます。

オプションの設定を全て付ける

こちらがオプションを全て盛り込んだものです。1行目を見やすいように改行入れています。

<a href="https://twitter.com/share" 
class="twitter-share-button" 
data-url="https://hapisupu.com/2015/08/twitter-tweet-follow-button-embed/" 
data-text="Twitterタグ埋め込みテスト" 
data-count="none" 
data-via="hapisupu" 
data-related="hapisupu,matyanu"
data-hashtags="はぴすぷ" 
data-size="large"
data-dnt="true"
data-lang="ja" 
>ツイート</a>

そしてこちらが2行目のjsのコードです。これは同じ画面内で何度も書かないようにしましょう。bodyの閉じタグ直前に挿入するのがおすすめです。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

これで表示されるのがこのボタンです。

オプションの設定を全て外す

逆に全くオプションの設定をしないタイプ。シンプルですね！

<a href="https://twitter.com/share" class="twitter-share-button">ツイート</a>

 

ツイート数を上に表示する

よくツイート数が上についているタイプを見かけると思います。これは専用のスタイルを当てることでも可能ですが、オプションの指定だけで対応できます。

data-countにverticalを指定します。

<a href="https://twitter.com/share" 
class="twitter-share-button"

data-count="vertical" 

>ツイート</a>

 

おまけ

他にも何かないかなーと、jsファイルを覗いてみたら色々ありました。

  • data-scribe
  • data-srcset
  • data-src-1x
  • data-width
  • data-height
  • data-csp-fix
  • data-tw-params
  • data-card-name
  • data-iframe-title
  • data-datetime
  • data-theme

ツイートボタンのオプションとしてなのかは分からないので全く関係ないかもしれないです。

フォローボタンの作成

ツイートボタン同様に、画面上部にあるボタンの種類から、「フォローする」を選択します。

SS_0769_0

あとは…。ツイートボタンとほぼ一緒だし説明いらないよね(´・ω・｀)

ボタン押すと、こうなります。

SS_0770

 オプションの設定を全てつける

じゃあツイートボタンと同じくオプション最大で確認してみましょう。

<a href="https://twitter.com/hapisupu" 
class="twitter-follow-button" 
data-show-screen-name="false" 
data-size="large" 
data-dnt="true"
data-lang="ja" 

data-show-count="false" 

>@hapisupuさんをフォロー</a>

あれ？data-show-countがfalse？
もしかしてあれか。たまにフォロワー数も一緒に出てたりするのも見かけたからそれか！
ちなみにボタンはこんな感じ。

オプションの設定を全て外す

次はオプションを全部とっぱらう。

<a href="https://twitter.com/hapisupu" class="twitter-follow-button">@hapisupuさんをフォロー</a>

 

おっ！フォロワー数出てきた＼(^o^)／

もしかしたら、フォロワー数も上に表示できるかなとdata-count=”vertical”を足してみました。

<a href="https://twitter.com/hapisupu" class="twitter-follow-button" data-count="vertical">@hapisupuさんをフォロー</a>

 

ダメな模様です(´・ω・｀)

これでTwitterのボタンの説明は終わりです。

終わりに

WordPress使ってるので、プラグインとか入れたら簡単に色々できるんだろうけど、やっぱり個々に仕様を知っておきたいので一個一個潰していってます。

Twitterとの連携は他にも色々あって、今後少しずつ試していこうと思います。

TwitterのDevelopersサイトが結構充実してたので、いいなって思ったものはすぐに取り入れられそうです。

あ、もし宜しければフォローお願いします。記事書いた時に更新情報流してます。

ツイートからのフォローのボタンを置いておきますので、動作確認ついでに( ﾟдﾟ )ﾄﾞｿﾞ！

<a href="https://twitter.com/share" class="twitter-share-button"
data-related="hapisupu,matyanu"
data-size="large"
data-hashtags="Twitterボタン" 
>ツイート後にフォロー確認が出ます</a>

 

更新通知用

個人用

 - Twitter, Webサービス, ソーシャル, 外部サイト連携