twittercard画像が表示されないバグ、ajax

2016年2月7日更新 view: 40 view
http://neurogadget.com/wp-content/uploads/2015/09/twitter2_3375790k.jpg

twitterカードを導入しよう

twittercardは、ツイッターにつぶやいた時に画像も一緒に表示してくれる
ようになる、タグのこと。

詳しい導入の方法は
https://ferret-plus.com/2236
にあるが、今回は更に簡単にまとめてみます。

導入手順

コード

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

上記のコードを自社サイトように編集したら
次はバリデートしてみる。

validate

以下のサイトからバリデートできる。
https://cards-dev.twitter.com/validator

ここまででとりあえず導入は完了
します。

画像がうまく表示されないんだけど!?

リダイレクトしてませんか?

例えば携帯サイトなどを振り分けしている場合、スラッシュの語尾をあわせるためにリダイレクトしている場合などがあれば一旦無効にしてみる。

画像がdata,base64形式になっていませんか?

スポンサードリンク

画像はurl形式でないとうまく表示されない。
よって、data型で画像を持っている場合は一度ファイルを生成して、そのURLをtwitterカードのimageに指定しよう。

//base64形式から画像を戻す

function base64_to_jpg($base64_string, $output_file) {
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}

上記の関数を使えば data 形式から jpg形式に画像を戻すことができます。

base64_to_jpg("data:image/jpeg;base64,".$base64,"画像のパス);

ajaxで動的に変わるコンテンツを作る場合は?

text = $(this).find(".goukei-gaku").text() + " 円相当!" + $(this).find("h3").text() + "のおすすめ株主優待";
url = "<?=FULL_BASE_URL;?>/" + $(this).data('id') + "/";
var button = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + text +'" data-lang="ja" data-hashtags="株主優待">a</a>';
//


$('#social-btn').html(button);
twttr.widgets.load();

ajaxでコンテンツを読み込んだ後に
twttr.widgets.load();
をやることでajax読み込み後のデータを適用できる。

ボタンのデザインも変更したい

ボタンのデザインを変更しようとすると、うまく画像をアップできなくなる。
したがって、
まずは一度公式ボタンを生成。
その後オリジナルボタンにして要素を入れ替え。
という手順を踏む。

text = $(this).find(".goukei-gaku").text() + " 円相当!" + $(this).find("h3").text() + "のおすすめ株主優待";
url = "<?=FULL_BASE_URL;?>/" + $(this).data('id') + "/";
var button = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + text +'" data-lang="ja" data-hashtags="株主優待">a</a>';
//


$('#social-btn').html(button);
twttr.widgets.load();

//もういちどデータを作り無し
text = $(this).find(".goukei-gaku").text() + " 円相当!" + $(this).find("h3").text() + "";
url = "<?=FULL_BASE_URL;?>/" + $(this).data('id') + "/";
var button = '<a href="http://twitter.com/share?text='+text+'&url='+url+'&hashtags=株主優待" onClick="window.open(encodeURI(decodeURI(this.href)), \'tweetwindow\', \'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1\'); return false;" rel="nofollow"><i class="fa fa-twitter fa-lg"></i></a>';

$('#social-btn').html(button);
twttr.widgets.load();
スポンサードリンク

関連記事

関連カテゴリ