今回はAFFINGER6(アフィンガー６)とTwitter(ツイッター)を連携させる方法について紹介します。
Twitterと連携させるメリット
ブログをTwitterと連携させるとこんないいことがありますよ！
"Twitterカード"が使えるようになる！
TwitterにブログのURLを載せる場合、連携していないとそのままの文字列のリンクしか表示されません。しかし、連携したあとにURLを載せるとURLが"Twitterカード"に自動変換されます。こちらのほうがおしゃれですよね！
ハッシュタグを自動で追加してくれる！
記事の下にあるTwitterボタンを押すと下のような小さなツイート画面が出てきますよね。普通はタイトルとURLとアカウント名しか挿入されませんが、設定すればハッシュタグも追加することができます。
つまり、ハッシュタグの入力の手間が省けます。特に自分以外の人はわざわざハッシュタグを付けてくれないと思うのでそういうときに便利です。
記事のTwitterボタンを押した時にハッシュタグは挿入されます。URLを直にコピペした場合は挿入されません。
Twitter(ツイッター)と連携する手順
それではAFFINGER６とTwitterを連携する手順を紹介します。登録自体はとても簡単です！
必要事項を登録
まず、管理画面から必要事項を記入します。以下の設定場所へ移動しましょう。
アカウント名
"Twitterアカウント"の項目にあなたのアカウント名を入力します。
ハッシュタグ
拡散されるときに挿入されるハッシュタグを入力します。記事が拡散される時、どんなハッシュタグと共に拡散されたいか考えてください。
例ブログ初心者,駆け出しエンジニア
Twitterカードサイズ
Twitterに表示されるカードの種類を"大"か"小"どちらか選びます(下の画像参照)
カードサイズの比較↓
３つ設定が終わったら最後に"Save"ボタンを押します。
確認する
それでは、"Twitterカード"がうまく設定されたか確認しましょう。直接TwitterにURLを貼って本番環境で正常に動くか確認したいところですが設定後すぐには確認できません。設定した内容がTwitterのサーバーに反映されるまで時間がかかるためです。
確認する方法を２つご紹介します。
Card validatorで確認
まず役に立つのがこの機能！Twitterの公式サービス"Card validator(カードバリデータ)"です！ネットに繋がっていれば誰でも使えるのでとても一般的な調べ方ですね。
このサービスを使えば"Twitterカード"がうまく設定されたか簡易的にテストすることができます！
Card Validator | Twitter Developers
使い方はいたってシンプルです！空欄にあなたのサイトのURL(記事でもトップページでも)を入力して"Preview Card"(カードを確認)ボタンを押すだけです。するとTwitterでどう見えるか表示してくれます。
ちゃんと設定できていると、上の画像のように"Twitterカード"が表示されます。※ここではハッシュタグは反映されません。
このように表示されたら設定は成功しています！
アドオンで確認
Chromeブラウザを使っている人はアドオンを使って確認する方法もあります。似たようなアドオンはたくさんありますが、特に使いやすいのが"TDK Meta Checker"というアドオンです。ページ上で"CHECK"ボタンを押すだけで簡単にTwitterカードの設定ができているか調べてくれる優れものです。詳しい使い方はこちらの記事で紹介しているので参考にしてください。
確認ができたら あとはTwitterのサーバ上に情報が反映されるまで待つだけです(数時間〜半日)。
ハッシュタグ入りのツイートをしてみる
さて、数時間後、情報がTwitterに反映されたとします。
実際に"Twitterカード"を使ってみましょう。Twitterに直接URLを貼り付ける原始的な方法でも もちろんOKです。しかし、この場合せっかく設定したハッシュタグが反映されません。
ハッシュタグ入りのツイートをするにはツイートしたい記事のツイッターボタンから行います。記事のツイッターボタンを押してみてください。
すると、このように小さいTwitter投稿画面が登場します。事前に設定したハッシュタグが挿入されていることを確認してください。あとは文章を書いてツイートするだけです。
自動生成される内容は次の通り。
- 記事タイトル
- URL
- ハッシュタグ
- @アカウント名 より
Twitterカードに表示される内容
TwitterにURLを貼ってみたもののアイキャッチ画像が表示されてなかったり、説明文がめちゃくちゃだったりと困っている人が多いです。これは不具合ではなく設定場所をちゃんと把握できていないために起きる現象です。設定場所をきちんと把握すればいいだけのことです。最後に記事のどの情報が"Twitterカード"に出力されているのかを説明して締めさせていただきます。
まず注意したいのは貼るページの種類によって出力される内容が変わる点です。投稿ページの場合は１パターンなので理解しやすいですが、トップページの場合は「最新の投稿の場合」と「固定ページを代用している場合」で出力される内容が違います。
投稿ページのURLを貼る場合
- 画像→アイキャッチ画像
- タイトル→記事のタイトル(H1)
- 説明文→抜粋(抜粋を設定していない場合は記事の先頭の文章)
これは説明文のところに注意してください。抜粋を入力していないと記事の先頭の文章が出力されます。記事の先頭にいろんな機能を使っていると予期せぬ文字列になる場合があります。説明文がごちゃごちゃしていたら抜粋に説明文を設定してください。
参考記事のアイキャッチ画像、記事のタイトル(H1)、抜粋の設定場所はこちらを参照ください
トップページのURLを貼る場合
トップページのURLを貼る場合は表示の仕方によって設定場所が異なります。デフォルト状態の人は「最新の投稿」を固定ページにしている人は「固定ページ」を参考にしてください。
トップページ(最新の投稿の場合)
- 画像→"トップページ（投稿・固定ページ以外）アイキャッチ画像"で設定した画像( AFFINGER管理→SNS/OGP)
- タイトル→"サイトのタイトル"(設定→一般)
- 説明文→"キャッチフレーズ"(設定→一般)
トップページ(固定ページ場合)
- 画像→固定記事のアイキャッチ画像
- タイトル→固定記事のタイトル(H1)
- 説明文→固定記事の抜粋
参考トップページの"Twitterカード"の設定はこちらを参照ください
以上！AFFINGER6とTwitterを連携させる方法でした！
公式マニュアル
Twitterカード・OGP設定について ※AFFINGERの購入者のみ閲覧可能