1,966 Views

wordpress: twitter cardsの申請方法「概要を表示」に表示させる方法

WordPressでtwitterのシェアボタンをつけようと、
header.phpを編集中…。

OGPの設定をこのようにして最後の4行に、twitter cardsの設定を記述してみた。

twitter cardsの設定はこちらから

validatorに自分のブログを登録します

https://cards-dev.twitter.com/validator

【参考】

Twitter Cards(ツイッターカード)の設定と申請方法|ツイートに記事の概要を表示!
http://netbiz-life.com/archives/3487

Twitter Cardsの設定!ツイートされた時、概要、アイキャッチを表示する方法http://millkeyweb.com/twitter-cards/

 

メールアドレスが承認されてから… header.php に この4行を付け足しました!

<!–Twtter Cards–>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@knnkanda”>
<meta name=”twitter:creator” content=”www.knn.com @knnkanda”>
<meta name=”twitter:domain” content=”https://4knn.tv/” />

なので、現在のこのwordPress のheader.phpの

<head>から</head>の部分は下記のようになりました。

 

<!DOCTYPE html>
<html class=”no-js” <?php language_attributes(); ?>>

<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#“>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title><?php wp_title(”); ?></title>

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”>

<?php wp_head(); ?>

<!–OGPここから–>

<meta property=’og:locale’ content=’ja_JP’>
<meta property=’fb:admins’ content=’730236113′>
<meta property=’article:publisher’ content=’https://www.facebook.com/knnkanda’ />
<?php if(is_single()){ // 投稿記事 ?>
<meta property=’og:type’ content=’article’>
<meta property=’og:title’ content='<?php the_title() ?>’>
<meta property=’og:url’ content='<?php the_permalink() ?>’>
<meta property=’og:description’ content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>’>
<?php } else { //ホーム・カテゴリー・固定ページなど ?>
<meta property=’og:type’ content=’website’>
<meta property=’og:title’ content='<?php bloginfo(‘name’) ?>’>
<meta property=’og:url’ content='<?php bloginfo(‘url’) ?>’>
<meta property=’og:description’ content='<?php bloginfo(‘description’) ?>’>
<?php } ?>
<meta property=’og:site_name’ content='<?php bloginfo(‘name’); ?>’>
<?php
if (is_single() or is_page()){//投稿記事か固定ページ
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id, ‘full’);
echo ‘<meta property=”og:image” content=”‘.$image[0].'”>’;echo “\n”;
} elseif( preg_match( ‘/<img.*?src=([“\’])(.+?)\1.*?>/i’, $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
echo ‘<meta property=”og:image” content=”‘.$imgurl[2].'”>’;echo “\n”;
} else {//画像が1つも無い場合
echo ‘<meta property=”og:image” content=”http://i.gyazo.com/df48d19d1c934ac50990d60bad3a0b2d.png”>’;echo “\n”;
}
} else { //ホーム・カテゴリーページなど
echo ‘<meta property=”og:image” content=”http://i.gyazo.com/df48d19d1c934ac50990d60bad3a0b2d.png”>’;echo “\n”;
}
?>
<!–Twtter Cards–>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@knnkanda”>
<meta name=”twitter:creator” content=”www.knn.com @knnkanda”>
<meta name=”twitter:domain” content=”https://4knn.tv/” />

<!–OGPここまで–>
</head>

この記事に関連する記事