Twitterカードを使うとシェアされた時に自動で画像付きにできる

Twitterカードを導入する

Principleにはデフォルトでツイートのシェアボタンが装備されています。
せっかくならTwitterにシェアされたときに、文字だけでなく画像付きの概要を表示したいですよね。

Principleでは、さらにFacebook用のOGPがデフォルトで導入されているので、たった2行を追記するだけでTwitterカードも対応できちゃうんです!

Principle以外でもすでにOGP導入している方も方法は同じですよ(^^)

たった2行のコードを作る

アカウント部分は、あなたのTwitterアカウントにしてください。
カードタイプは以下の中から選びます。
カードタイプのリンク先はTwitterの公式サイトの日本語版です。

Summaryカード
デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。
大きな画像付きのSummaryカード
Summaryカードに似ていますが、画像が目立つように使用されています。
Photoカード
写真のみを含めたカードです。
Galleryカード
4つの写真を集めて強調したカードです。
Appカード
モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
これは今回のパターンとは用途が異なります。リンク先で確認してみてください。
Playerカード
動画やオーディオ、スライドショーを視聴できるカードです。
これも今回のパターンとは用途が異なります。
Twitterカードスターターキットが用意されています。リンク先で確認してみてください。
Productカード
製品情報のために最適化したカードです。
これも今回のパターンとは用途が異なります。リンク先で確認してみてください。

コードをheader.phpに追記する

まずはFTPソフトで/wp-content/themes/principleディレクトリの中のheader.phpを、/wp-content/themes/principle-childコピーします。

失敗しても子テーマディレクトリにコピーしたファイル削除するだけで、親テーマのものに戻るので安心です。

上記で作成した2行を、下記の部分に挿入します。

これで準備ができました(^^)

Validate作業を行う

Card Validatorへアクセス

Twitterにログインした状態で、TwitterのCard Validatorにアクセスします。
Card Validatorへアクセス

プレビューを確認して承認申請ボタンを押す

URLを入力してプレビューを確認できたら、Request Approvalボタンを押します。
URLを入力してプレビューを確認し、承認をリクエストする

必要事項を記入して申請ボタンを押す

すべて必須項目ですね(^^;
でも、大丈夫。
Description以外は、Twitterに登録されている内容が自動で補完されています。
Descriptionにサイトの簡単な説明を入力したら、もう一度Request Approvalボタンを押します。
※Descriptionの下の『Mark my cards as containing sensitive content』うんたらのチェックボックスは基本的にチェックは不要です。
※「繊細な内容の画像や動画」つまり暴力的な内容や他の全年齢向けではない内容の場合にチェックを入れます。

必須項目を埋めてRequest Approvalボタンを押す
オレンジの枠の中に英語で『承認を出願中』みたいなことが表示されます。
承認メールが来るのを待ちます。
承認を出願中と出たらメールを待つ

メールが来たら準備OK

たいていの場合、すぐに『カードの準備ができました』という内容の英語のメールが届きます。
あとはURLがツイートされれば自動的に概要が付加されます。
URLをツイートしてツイートの下に表示されるカードを確認しましょう。
カードの準備ができたとメールが来たらOK
※トップページはプロフィールに設定したアイコン、他のページはアイキャッチがsummaryやlarge-summaryカードに表示されます。

カードタイプを変更したい

ソース変更してValidate作業を行う

header.phpのソースのカードタイプだけ変更して、同じ手順でValidate作業を行うだけです。

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメント

  • おはようございます。
    アフィリエイトと会社員をやってるフッキーと申します。

    ブログやネットの知識がまだまだ
    弱っちいぃーーーと感じており、

    さらに収入を安定させるべく知識向上で訪問致しました。

    ビジネスに役立つ記事がたくさんあって
    大変勉強になりました。

    ほんとに有難うございます。

    また不定期ではありますが、訪問いたします。

    それでは応援してます。

    by フッキー    2015年1月23日 7:41 AM

    • >フッキーさん
      コメント&応援の御言葉ありがとうございます(^^)
      申し訳ありません。
      URLを登録していただいていたのですが、貴サイト下のcategory7/entr1y15.htmlというリンクが404エラーでした。
      entry115やentry15に変えてみたのですが、どちらもなかったようです。
      URL部分のみ編集でカットさせていただきました。
      せっかくですので正しいURLをお知らせ下さい。

      これからもよろしくお願いいたしますm(_ _)m

      by タモレ☆管理人    2015年1月23日 10:54 AM

コメントを残す




CAPTCHA


Menu

HOME

 TOP