Twitter公式ツイートボタンをWordPressの記事一覧ページに貼る方法

本日Twitter公式ツイートボタンがリリースされ、早速導入してみた記事を前々回の記事で公開しました。

意外とシンプルながら目に付きやすく気に入ったのですが、WordPressに導入する際は注意が必要です。

ボタン作成ページ(http://twitter.com/goodies/tweetbutton)にて書き出されるタグは、WordPressのシングルページ(記事自体のページ)では有効ですが、一覧ページ(アーカイブ、検索結果、カテゴリページなど)では、各記事ごとのURLやタイトルは反映されず、その一覧ページのタイトルとURLが反映されてしまいます。

つまり、アーカイブページでは、各記事内のボタンをクリックしているにも関わらず、URLが「http://○○○○○○○.com?m=201006」みたいになり、タイトルも「ブログのタイトル >> 2010 >> 8月」のように表示されるということです。

これを回避し、一覧ページでも各記事ごとのタイトルとURLを反映させるには、通常のタグから少し内容を変え、かつWordPressタグを入れ込む必要があります。

具体的には下記のとおりです。

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="あなたのTwitterアカウント名" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

「あなたのTwitterアカウント名」の部分を自分のTwitterアカウント名に変えてください。
これを、index.phpやarchive.php、search.phpなどで記事をループしている中に入れれば、その記事のツィートとして反映されます。

なお、このブログのボタンは英語バージョンですが、上記のタグではちゃんと日本語のボタンが表示されます。
なんとなくデザイン的に、私は英語の方が好きだったので英語バージョンにしてみました。

では。

TweetableをWordPressに入れたらエラーが出た。

前回の記事でブログにTwitter投稿ボタンをつけたので、せっかくだからブログを投稿した時に自動でTwitterにつぶやかれるようにしようと思い、そんな感じの便利なプラグイン「tweetable」を導入しました。

導入の仕方はけっこう面倒なのですが、こちらのブログ様が非常に分かりやすいので簡単に設定完了までできます。

というわけで設定完了し、いざ投稿してみると、エラーが出る。
こんな感じ(Warning: SimpleXMLElement::__construct()mh_twitter_class.php on line 124)のPHPエラーが出る。また、管理画面左メニューの「Tweet」をクリックしてみてもmh_twitter_class.php on line 69にエラーが表示される。

特に別のプラグインとバッティングしているわけでもなかったので、アレーと解決策を探しまわったが見つからず。

しかし、結局のところ解決は簡単でした。

設定の際に発行されたConsumer keyとSecret Keyを再発行すれば解消されます。多分。
再発行の流れは下記のとおり。

1、左メニューの「Twitter」から、「Setting」を選択。

2、ページ右上に自分のTwiiterアカウント名が表示され、その横に「Change」とあるので、選択。

3、ページ下の「continue」を選択。

4、ページ上の文章内の「this page on Twitter」を選択。Twitterが新規ページで立ち上がるので、表示されている自分のブログを選択。

5、Recet Consumer key / Secret ボタンをクリックして、キーを再発行。再発行したキーをWordPressのキー入力のところに再度コピペして登録。

これでたぶん直ります。私は直りました。直らなかったらゴメンナサイw

追記

ここまで書いてなんですけれど、Tweetableは長いタイトルの記事を投稿した場合、タイトルだけが反映されなかったりするバグが見つかったので、simple tweetというプラグインに変更しました。

そっちの方がシンプルで使いやすかったです。

では。

あなたのブログに簡単貼りつけ!Twitter公式ツイートボタン

ボタンをクリックすると、そのページについて簡単にツィートできる、というものは今までも多くありましたが、Twitterの公式ボタンがリリースしたそうです。

作り方は簡単で、ボタン作成ページ(http://twitter.com/goodies/tweetbutton)にて、ボタンのサイズやツィートする文言を指定するだけでオーケー。

あとは表示されているタグを、あなたのブログやウェブサイトのソースにコピペすれば設置可能です。

なお、文言やURLは設置されたページのタイトル・URLを自動で検出してくれる機能もあるため、ブログに貼りつける場合はいちいち毎回タグをつくりなおさなくてOKです。
なんて便利なんでしょう。

というわけで、私もこのブログに設置してみました。

なお、デザインは「ボタン+ツィートされた数(大)」、「ボタン+ツィートされた数(小)」、「ボタンのみ」の3タイプあります。

あんまりアクセス数の多くないブログは、「ボタンのみ」がいいかも。でないと、下みたいにボタンの横に「0」ばかり表示されてなんかさみしい感じになっちゃいますw

PHP分かる人の為のC言語入門 前半

先月iphoneアプリを制作するべく、macbook proを購入し早速カンタンなiphoneアプリを試しに一つ作ってみました。

一応完成はしたのですが、Object-Cが分からないためプログラムのコード自体はほぼ本から丸写ししました。オリジナルのアプリを作るためにはもちろんObject-Cをしっかり理解しなくてはいけないわけでして、かつObject-Cを理解するためにはその根底にあるC言語を理解しなくてはいけないわけです。

というわけで、例の如くAmazonで評判のよかった本を購入し、一気に読み終わりました。
ザーっとみた感じ、基本的な文はPHPとそんなに変わらないのですが、データ型の宣言やヘッダファイル、ポインタの存在など全く違うところもいろいろありました。

今回はそういった「PHPはなんとなく分かるけど、Cとどう違うのよ」という人に役立つような記事を書いてみようと思います。
まーがんばってみましょ。

1、C言語の基本のキ

・通常C言語のファイルの拡張子は「.c」
・C言語はプログラム書いてハイ終わりではなく、書いたC言語のファイルをコンパイラ(機械語に翻訳)して出来たオブジェクトファイルをリンクして1つのプログラムファイルを完成させる。なんのこっちゃ。

とりあえず、フツーに書いたプログラムファイルを「コンパイラ」っちゅーソフトで変換して、それをいろんなファイル同士で結合して完成ファイルをつくるらしい。めんどくさいね。とりあえずコンパイラとしてVisual C++ 2010 Expressをインストールしてみた。これでいいのかな。このソフトだとファイルの結合を自動でやってくれるらしい。ふーん。

2、C言語のコードの基本

・C言語ではmain関数が一番最初に読み込まれ実行される
・C言語の機能を使うためには、その機能のヘッダファイルを読み込む必要がある
(PHPでは何もせずにprintなどの機能を使えるが、C言語ではそれぞれの機能毎のライブラリみたいなのを読み込み必要がある)

//ヘッダファイルを読み込み
#include <stdio.h> //セミコロンはいらないよん

int main(void)
{
printf("Hello! World!");
}

・文中に「%●」を入力すると、その部分に「,」の後の内容が埋め込まれる
文字 → %c、「’」でくくる。
文字列 → %s、「”」でくくる
整数 → %d、くくらない
小数 → %f、くくらない

int main(void)
{
printf("%cは文字です¥n" , 'A');
//Aは文字列です
}

3、変数

・C言語では変数を使用するまえに宣言が必要。またその際にデータ型を指定する

#include <stdio.h> //セミコロンはいらないよん

int main(void)
{
//int型の変数numを宣言する
int num;
num = 100;

//出力
printf("変数numの値は%dです" , num); //変数は「""」などで囲まない
//変数numの値は100です
}

・変数はブロック(関数)内で一番最初に宣言する

・ユーザーが入力した値を変数に格納させる場合、数字はscanf、1文字getcharはを使う。

#include <stdio.h> //セミコロンはいらないよん

int main(void)
{
//int型の変数numを宣言する
int num;

//整数の場合は%d、小数の場合は%lfを使う
scanf("%d" , &num) //scanfを使う変数のアタマには「&」をつける

//出力
printf("変数numの値は%dです" , num); /
//変数numの値は100です
}

4、演算子

・型を変換するにはこんな感じ。

inum = (int)dnum;

5、配列と定数と文字列

・定数(C言語ではマクロっていうらしい)を設定するのはこんな感じ

//define マクロ名 置換する文字列
#define NUM 100;

とりあえずここまでざっと書いてみて思うのは、やっぱりPHPと比べると「めんどくさ!」って感じですね。
いちいちライブラリみたいのincludeしなくちゃいけないとか、なんでそんなことせなあかんのやら。

まぁ本を読むだけでは何も習得できないので、これからVisual C++ 2010 Expressを実際に使ってみようと思います。

と、いうわけで後半に続く。

Google AnalyticsでPDFなどのダウンロード数を解析する方法(非同期トラッキング)

Google Analyticsで、PDFのダウンロード回数や外部ページへのリンクをクリックした数をカウントする方法をご紹介します。

【ここ1年くらいでGoogle Analyticsのタグを入れた人や、これから入れる人はこちら】

最近Google Analyticsのタグを入れた人は、最新の「非同期トラッキング」という方法が使えます。
旧来の方法と比べて機能的にどうよくなったのかはよく分かりませんが、「ちょっと解析までの時間が早くなる」みたいなこと書いてあるサイトもありました。

さて、最近Google Analyticsを入れた人は、埋め込みタグが下記のような感じになってると思います。

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

PDFのダウンロード率などをカウントするためには、上記タグを「<body>タグの直後」に入れてください。
※<body>タグの直後です。閉じタグ(</body>)の直後ではありません。

もしも何らかの理由で「全ページの直後に入れたくない」という場合は、PDFのダウンロード回数や外部ページへのリンククリック数をカウントしたページだけにタグを入れて、そのほかのページは従来とおりの直前に入れておく、ということもできます。

さて、次は実際にカウントを取りたいリンクの設定です。PDFなどのファイルや、通常のリンクのクリック数をカウントするには、カウントしたリンクに下記のように設定してください。

<a href="test.pdf" onClick="_gaq.push(['_trackEvent', 'カテゴリ名', 'アクション名','ラベル名', 値]);" >test.pdf</a>

上記のカテゴリ名、アクション名、ラベル名、値にお好きな名前を入れてください。ラベル名と値はそもそもなくてもOKですが、カテゴリ名とアクション名は必須です。

つまり、カテゴリ名とアクション名だけで事足りる場合は下記のような感じ。

<a href="test.pdf" onClick="_gaq.push(['_trackEvent', 'カテゴリ名', 'アクション名']);" >test.pdf</a>

Web担に書いてあったのだけど、「値」の部分は数値しか設定できないので、文字列はダメらしい。そして、数値なので”は取らないといけないとのこと。

私はWordPressや自作のCMSに上記タグを入れ込んで、ラベルの部分を動的に書き出すようにしてます(記事id_記事のタイトル、みたいな)。
上記の例では<a>タグにonClickで指定していますが、要はonClickが認識できればいいのでFlashの再生ボタンとかでもいけるらしいです。試していませんが。

無事に設定し終わったら何回かクリックしてみてください。しばらくするとGoogle Analytics管理画面の コンテンツ > イベントのトラッキング の中でクリックされた数などを解析できます。上記で設定したカテゴリ別、アクション別・・・などで分けて見れるので便利ですね。

ちなみに反映されるまでの時間ですが、初めて設定した時は1日以上かかったのに、次にタグを増やした時は2時間ほどで反映されました。なのでよくわかりません。

【1年以上前にGoogle Analyticsのタグを入れた人はこちら】

さて、もしあなたが下記のような古いタイプのGoogle Analyticsタグを設置している場合、上記とちょっとやり方が違います。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-X*);
pageTracker._initData();
pageTracker._trackPageview();
</script>

このタグの場合は非同期トラッキングという新しい手法が使えないので、カウントしたいリンクに下記のように設定します。

<a href="test.pdf" onClick="javascript:pageTracker._trackPageview('カテゴリ名', 'アクション名','ラベル名', '値');" >test.pdf<a>

まーこちらは古い方法なので、もしも新しいタグに移行できるならした方がいいと思います。

以上です。

ここで紹介した方法では、Google Analyticsの画面で「イベントトラッキング」で確認できる、と前述しましたが、もしも「通常のコンテンツと同じように「上記のコンテンツ」とかで管理したい」、ということであれば「バーチャルベージビュー」というちょこっとだけタグの違う機能を使います。

まぁ、リンクに貼るタグがちょこっと変わるだけです。こんな感じに.

<a href="test.pdf" onClick="javascript:_gaq.push(['_trackPageview', '/download.html']);" >test.pdf<a>

では。

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん