AFFINGER5でTwitterカードは超簡単！

1 twitterに画像付きで記事を投稿したい！ツイッターカードの設定

上記のように記事の内容をツイッターにアイキャッチ画像付きで投稿したいと思いますよね。この場合Twitter Card（ツイッターカード）と呼ばれるものを利用するとできます。

「AFFINGER５（WING）」はテーマ内でこのツイッターカードの設定が可能です。
ツイッターカード設定は、AFFINGER5のダッシュボードの「AFFINGER５管理」＞「SNS」＞Twitter設定といきます。

設定方法は、
Twitterアカウントの＠以下を入力し、次にTwitterカードサイズの「大」を選択して更新します。（カードサイズは大きい方がお薦めです。）

次に、設定ができたら「Card Validator」でチェックしますが、このCard Validatorという公式ページからTwitterカードが「うまく設定できているか」また「どんな表示になるのか」を見ることができます。

使い方は簡単で、①表示したい記事のURLを『Card Validator』のCard URL欄に入力して、②「Preview card」をクリックすると、右側にカード表示されればＯＫです。

Twitterカードが表示されるか確認しましょう。

画像の反映にはタイムラグがありますが、ここで『successfully』のログが出ればOKです。
その後は普通に記事のURLをツイートすると、Twitterカードが表示されます！

2 URLコピーボタンを活用しよう！

「Card Validator」や「ツィート」する時にURLを入力します。

いちいち入力するのは手間ですので、URLをコピペするときに便利なのが、AFFINGER5には現在SNSボタンの隣に「URLコピーボタン」が標準装備されていますので、これを使うのが非常に楽です。

特にスマホのように指でやる場合に、このコピーボタンを押すだけでできるので、超便利なアイテムです。

◇ 1月10日にURLコピーボタンの不具合の修正アップデイトがありました。私も現在は問題なく使っています。

[blogcard url=”https://on-store.net/wing-ver20190110/”]

3 外部リンクも画像と概要を載せたい！ 

AFFINGER5(WING)では、内部リンクはカード風に簡単に表示できます。例えはこんな風に↓

しかし、AFFINGER5は外部へのリンクまでは対応していません。

他の人のブログを紹介する時に、画像や概要が表示されると綺麗に見えますよね。
私も使っている外部リンクをカード風に表示する方法をご紹介します。

自分のブログ内のリンクのように、他のサイトもカード風にしたいのであれば、
ブログカード用プラグイン『Pz-LinkCard』を使ってみましょう！

『Pz-LinkCard』は無料の国産プラグインです。

[blogcard url=”https://ja.wordpress.org/plugins/pz-linkcard/”]
使い方は、プラグインから検索し、インストール＆有効化。

記事の編集ボタンの中の「リンクカード作成」をクリックしてリンク先URLを入れるだけで、リンクカードが簡単に作成できるのです。

色などの見た目は『設定』→『Pz カード設定』から自分の好みにカスタマイズ出来ます。
もちろんそのままでも良いと思います！

『Pz-LinkCard』を導入すれば、リンクカード作成で簡単に実装できます。
背景や画像の大きさ、内部リンクと外部リンクの色分けなど細かいカスタマイズも可能ですよ。

投稿の編集画面ではこのような位置関係になってます。

4 スマホでTwitterカードを使ってツイート

ブログをTwitterカードでツイートします。スマホでの手順です。

step
1URLコピーボタンで記事タイトルとURLをコピー

 

step
2Twitterでツイート画面にペースト

step
3ツイート画面にTwitterカードが登場

step
4ツイート後にホーム画面で確認