Twitter Cardsって御存知ですか？
URL付きのつぶやきをした時、そのサイトがTwitter Cardsの設定をしてると
↓このようになる
画像のつぶやきに、ページの詳細が表示されてるのが分かります。
これがTwitter Cardsです。
サイトに表示設定をするのはとっても簡単。
まず、前記事に挙げたFacebook用のOGP設定をします。
⇒ Facebook用のOGP設定
もしFacebook使わない場合は、fb:adminの部分は省いて構いません。
この設定にTwitter Cardsの設定を追記するのです。
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@アカウント名”>
<meta name=”twitter:creator” content=”@アカウント名”>
<meta name=”twitter:domain” content=”HPのドメイン.comなど”>
この４行だけ足す。
これでTwitter Cardsの設定は終わり。
設定したら、Twitter Cardsの申請をします。
こちらですね。
⇒https://cards-dev.twitter.com/validator
こちらを運営サイトに対応するツイッターアカウントでログイン。
そしてこちらのタブをクリックし、URLを打ち込みます
このように上手く行ってたら表示が成功します。
このとき申請登録が終わってない場合は黄色のマークが出ますので
画面の支持に従って申請してください。
…
ここで一つ注意点。
入力項目は３つだけではない。
スクロールすると、下にもまだあります。
全部入力を終えてから送信しましょう。
数時間後、無事に登録が承認されれば成功です。
よかったらリツイートして皆さんにも広めてください(‘ ‘*)*:･’ﾟ☆
⇒ OGP設定 Facebook
の続き。今回はワードプレス版です。
ワードプレスのOGP設定も簡単ですよ。
管理画面のテーマ編集から「header.php」を開いて
</head>直前の記述を…
<!–OGP開始–>
<meta property=”fb:admin” content=”個人のアカウントに設定された15桁の数字”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”blog”>
<?php
if (is_single()){// 投稿記事
if(have_posts()): while(have_posts()): the_post();
echo ‘<meta property=”og:description” content=”‘.mb_substr(get_the_excerpt(), 0, 100).'”>’;echo “n”;//抜粋から
endwhile; endif;
echo ‘<meta property=”og:title” content=”‘; the_title(); echo ‘”>’;echo “n”;//投稿記事タイトル
echo ‘<meta property=”og:url” content=”‘; the_permalink(); echo ‘”>’;echo “n”;//投稿記事パーマリンク
} else {//投稿記事以外（ホーム、カテゴリーなど）
echo ‘<meta property=”og:description” content=”‘; bloginfo(‘description’); echo ‘”>’;echo “n”;//「一般設定」で入力したブログの説明文
echo ‘<meta property=”og:title” content=”‘; bloginfo(‘name’); echo ‘”>’;echo “n”;//「一般設定」で入力したブログのタイトル
echo ‘<meta property=”og:url” content=”‘; bloginfo(‘url’); echo ‘/”>’;echo “n”;//「一般設定」で入力したブログのURL
}
?>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>”>
<?php
$str = $post->post_content;
$searchPattern = ‘/<img.*?src=([“‘])(.+?)1.*?>/i’;//投稿記事に画像があるか調べる
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”;
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
echo ‘<meta property=”og:image” content=”‘.$imgurl[2].'”>’;echo “n”;
} else {//画像が1つも無い場合
echo ‘<meta property=”og:image” content=”画像がない記事のサムネイル画像URL”>’;echo “n”;
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
echo ‘<meta property=”og:image” content=”記事以外のページのサムネイル画像URL”>’;echo “n”;
}
?>
</head>
とすれば良いだけです。
なんて簡単なんでしょう(‘ ‘*)！
今回はWeb関連のお話です(‘ ‘*)
先日OGP設定というキーワードを知り、
実は’head’内の記述でかなり重要なものだということを知りました。
OGP設定とは、Facebookやtwitterなどのソーシャルメディアに向けた
このページはこんな内容ですよー。というシグナルを伝えるためのものです。
このOGP設定のメリットとしては、
誰かがいいねを押してくれた時、タイムライン上で拡散されやすくなる事。
だからサイト運営者さんでFacebookしてる方は、ぜひ設定してみましょう！
記述自体はとっても簡単で、head要素に以下のような項目を追記するだけです。
html5の場合
<!DOCTYPE html>
<html lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
<meta property=”og:url” content=”サイトURL”>
<meta property=”og:title” content=”ページタイトル”>
<meta property=”og:description” content=”ページの説明文（約80〜90文字前後がいいらしい）”>
<meta property=”og:image” content=”サムネイル画像のURL”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”website”>
<meta property=”fb:admins” content=”15桁の定められた数字”>
〜
Xhtmlの場合はこのように…
<?xml version=”1.0″ encoding=”Shift_JIS”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<title>タイトル</title>
<meta property=”og:url” content=”ページURL”>
<meta property=”og:title” content=”ページタイトル”>
<meta property=”og:description” content=”ページの説明文（約80〜90文字前後がいいらしい）”>
<meta property=”og:image” content=”サムネイル画像のURL”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”website”>
<meta property=”fb:admins” content=”15桁の定められた数字”>
〜
たったコレだけの設定を入れ込むだけなんですよ。
そうすると、Facebookでページがシェアされた時に…
タイムラインにサイト概要が同時に表示されます。
実際に時の迷い人のフェイスブックページを見るとよく分かるかも
⇒ https://www.facebook.com/timelessberry
<meta property=”og:〜” content=””>
此の記述を数個置くだけだから簡単ですね。
ちょっとわかりづらい項目を補足しますと。
og:typeとは
ウェブサイトの場合はwebsite、ブログの場合はblog、個別の記事の場合はarticleとするようです。
fb:adminsについては
自分のフェイスブックアカウントに設定された15桁の数字を入れる。
何処にあるかというと、フェイスブックのご自分のプロフ画像をクリックした時のURL…
プロフ画像URLの末尾に&type=1&theateとあります。その直前の15桁の数字です。
画像の例だと「135383459946011」となります
これらの設定を自分のサイトの各ページに反映させればOKです(‘ ‘*).｡.:*･゜
上手く反映されていれば、下記のページでURLを打ち込んだ時に
きちんと設定が表示されます。
⇒https://developers.facebook.com/tools/debug/
どうですか？ 上手くいきましたか？
この記事がお役に立ちましたら、ぜひ「いいね」お願いします.｡.:*･゜
《０１.９.１１》 と《１１.３.１１》
足して…
《２０１２.１２.２２》
あの事件から12年です。
まるで仕組まれた数字。
歴史を垣間見ると、度々そういう発見があるかもしれません(‘ ‘*)
[9.11] ブログ村キーワード
音楽サイトを巡回してたら
ふと浮かんできた言葉
「この世は全部音で出来ている」
生命あるものは全部音を宿してるし
海も、風も、空も、雲も、雨も、星も。
音。
音があるから、響きあい、リズムの緩衝で世界を奏でる。
そうやって音楽は生まれた。
。。。
今、時代の流れで言うと
時が止まってるって云われてます。
「歴史は繰り返す」
格言では、そのように云われてます。
それは、ある音楽の１小節が延々にループしてるのと同じで。
決められた波の中で、決められた枠の中でループしてる音。
時が止まった音。
ずっと規則正しい音の繰り返し。
時計のリズム。
時計のリズムが壊れるとき、世界は動き出すそうです。
今まで止まっていた時間の流れが一斉に溢れ出て
ダムでせき止めてた水が一気に押し寄せるように。
音楽が、怒涛の音楽が直ぐそこまで来ていると。
誰かがおっしゃってました。
もし、歴史の１ページを音に記すとしたら、
繰り返しのリズム、重ねあわせ、押し寄せ、全てを洗い流し、
最後に静寂が全てを物語る。
新しい時代の幕開け。
そんな曲を、書くのであろうと思います。
曲名は
「黄金の華の目覚め」
ゴールデンフラワー。
蓮。睡蓮。を象ったもの。
先を見通す力。音を感じ取る力。
無慈悲にも、彼らにとって全ては幻となるのです。
だって私、巡る箱庭の記録にも書いた。
延々と同じことの繰り返しは、もはや存在しないのと一緒だって。
- コメントする
- 夢日記
- 世界, 音
- 2013年09月08日
