WordPress

【STINGER +】ツイッターカードで画像と記事をシェアする方法

※当サイトは、アフィリエイト広告を掲載しています。

STINGER PLUSでは、投稿記事を簡単にシェアすることができますが、初期設定では画像は表示されません。

そこで、Twitterカードを設定し、アイキャッチ画像もツイートされるようにしましょう。文字と一緒に画像を表示させると、多くの人の興味をそそります。

【初期設定/文字のみ】

【Twitterカード使用/文字・画像】

どちらが読んでみたいと思いますか?私は絶対画像入りです。

スポンサーリンク

手順

  1. OGPを設定
  2. TwitterアカウントをSTINGER管理で設定
  3. 子テーマの「functions.php」にソースを追加
  4. 親テーマの「st-ogp.php」を修正
  5. Twitterカードを申請
  6. 「Facebook Debugger」で確認

OGP設定

参考設定方法はこちら。

【STINGER +】フェイスブックとサイトを連携させるOGPとは?その設定方法
OGPを設定後、新着記事を自分のSNSでシェアすることで、サイトのアクセスを増やすことが可能です。STINGER PLUSには、FacebookのOGPを設定することができるので、積極的に利用して、自分のサイトをアピールしましょう。...

※OGP設定には、Facebookのアカウントが必要です。

Twitterアカウントを設定

1.「STINGER管理」⇒「STINGER管理」を選択。

2.「SNS設定」を選択。

3.「Twitterアカウント」を入力。

4.「save」を選択して設定完了。

functions.phpにソースを追加

1.「外観」⇒「テーマの編集」を選択。

2.「テーマのための関数」を選択。

3.functions.phpに以下のソースを追加。

4.「ファイルを更新」を選択して完了。

st-ogp.phpの修正

1.「外観」⇒「テーマの編集」を選択。

2.「STINGERPLUS」を選択。

3.「st-ogp.php」を選択。

4.ソースを修正。

を次のように修正(全部で2箇所)。

5.「ファイルを更新」を選択して完了。

Twitterカードの申請

1.Twitterにログインし、「Card validator」にアクセス。

Card validator

2.任意の記事のURLを入力し、「Preview card」を選択。

3.「Preview card」ボタンの下に、「(サイトのドメイン) is whitelisted for summary card」と表示されたら完了。

Facebook Debuggerで確認

Facebook DebuggerでページのOGP設定が正しく行われているか確認します。

1.Facebookにログインし、「Facebook Debugger」にアクセス。

Facebook Debugger

2.任意の記事URLを入力し、「デバッグ」を選択。

3.エラーが無ければ設定完了。

参考:Twitterカードの画像サイズを大きくする

1.「st-ogp.php」のソースを修正。

を次のように修正。

2.画像が大きくなる。

最後に

functions.phpやst-ogp.phpの修正は、失敗するとサイトが正常に表示されなくなる恐れがあります。必ずデータをバックアップしてから行いましょう。