FacebookのWordPress Plugin for Instant Articlesをインストール

昨日、上記リンクの通り「Instant Articles for WP」をインストールしてみたのですが、日本での正式対応は2016年4月からなんですね。本来なら上記プラグインをインストール後にFacebookにフィードのURLを提出しなければならないのですが、日本のFacebookだとまだ、フィードのURLを提出するページが出てませんでした。

それはさておき、「Instant Articles」正式公開まで日もないので、広告やアナリティクスの対応をする方法を備忘録がてら残しておきます。なお、AMPプラグインの記事同様にプラグインを直接変更する事になりますので、アップデート時には面倒ですが適宜対応が必要になるかと思いますのでご了承の程よろしくお願い致します。

Instant ArticlesにGoogleアナリティクスを対応させる方法

wp-content>plugins>facebook-instant-articles-wp-master>template.phpを開く
wp-content>plugins>facebook-instant-articles-wp-master>template.phpを開く

FTPで「Instant Articles for WP」のプラグインフォルダにアクセス。template.phpを開きます。

template.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="<?php echo esc_attr( get_bloginfo( 'language' ) ); ?>" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="<?php echo esc_attr( get_option( 'blog_charset' ) ); ?>">
<link rel="canonical" href="<?php echo esc_url( $this->get_canonical_url() ); ?>">
<meta property="op:markup_version" content="v1.0">
<meta property="fb:article_style" content="<?php echo esc_attr( $this->get_article_style() ); ?>">
 
<?php
/**
         * Fires in the head element of each article
         *
         * @since 0.1
         *
         * @param Instant_Articles_Post  $ia_post  The current article object
         */
do_action( 'instant_articles_article_head', $this );
?>
</head>
 
<body>
 
<figure class="op-tracker">
    <iframe>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');
 
</script>
    </iframe>
</figure>
 
<article>
<header>
<!-- The cover -->
<?php $cover_media = $this->get_cover_media(); ?>
<?php if ( 'image' === $cover_media->type ) : ?>
<figure>
<img src="<?php echo esc_url( $cover_media->src ); ?>" />
<?php if ( strlen( $cover_media->caption ) ) : ?>
<figcaption><?php echo esc_html( $cover_media->caption ); ?></figcaption>
<?php endif; ?>
</figure>
<?php elseif ( 'video' === $cover_media->type ) : ?>
<figure>
<video>
<source src="<?php echo esc_url( $cover_media->src ); ?>" type="<?php echo esc_attr( $cover_media->mime_type ); ?>" />
</video>
</figure>
<?php elseif ( 'slideshow' === $cover_media->type ) : ?>
<figure class="op-slideshow">
<?php foreach ( $cover_media->items as $item ) : ?>
<figure>
<img src="<?php echo esc_url( $item->src ); ?>" />
</figure>
<?php endforeach; ?>
</figure>
<?php endif; ?>
 
<h1><?php echo esc_html( $this->get_the_title() ); ?></h1>
 
<!-- The date and time when your article was originally published -->
<time class="op-published" datetime="<?php echo esc_attr( $this->get_the_pubdate_iso() ); ?>"><?php echo esc_html( $this->get_the_pubdate() ); ?></time>
 
<!-- The date and time when your article was last updated -->
<time class="op-modified" datetime="<?php echo esc_attr( $this->get_the_moddate_iso() ); ?>"><?php echo esc_html( $this->get_the_moddate() ); ?></time>
 
<!-- The authors of your article -->
<?php $authors = $this->get_the_authors(); ?>
<?php if ( is_array( $authors ) && count( $authors ) ) : ?>
<?php foreach ( $authors as $author ) : ?>
<address>
<?php
$attributes = '';
if ( strlen( $author->user_url ) ) {
$attributes = ' href="' . esc_url( $author->user_url ) . '"';
 
if ( isset( $author->role_contribution ) && strlen( $author->role_contribution ) ) {
$attributes .= ' title="' . esc_attr( $author->role_contribution ) . '"';
}
 
if ( isset( $author->user_url_rel ) && strlen( $author->user_url_rel ) ) {
$attributes .= ' rel="' . esc_attr( $author->user_url_rel ) . '"';
}
}
?>
<a<?php echo $attributes; ?>>
<?php echo esc_html( $author->display_name ); ?>
</a>
<?php if ( strlen( $author->bio ) ) : ?>
<?php echo esc_html( $author->bio ); ?>
<?php endif; ?>
</address>
<?php endforeach; ?>
<?php endif; ?>
 
<?php if ( $kicker_text = $this->get_the_kicker() ) : ?>
<!-- A kicker for your article -->
<h3 class="op-kicker"><?php echo esc_html( $kicker_text); ?></h3>
<?php endif; ?>
 
<?php
/**
         * Fires in the header element of each article
         *
         * @since 0.1
         *
         * @param Instant_Articles_Post  $ia_post  The current article object
         */
do_action( 'instant_articles_article_header', $this );
?>
 
</header>
 
<!-- Article body goes here -->
<?php echo $this->get_the_content(); ?>
 
<footer>
<?php if ( $footer_credits = $this->get_the_footer_credits( ) ) : ?>
<!-- Credits for your article -->
<aside><?php echo esc_html( $footer_credits ); ?></aside>
<?php endif; ?>
 
<?php if ( $footer_copyright = $this->get_the_footer_copyright( ) ) : ?>
<!-- Copyright details for your article -->
<small><?php echo esc_html ( $footer_copyright ); ?></small>
<?php endif; ?>
</footer>
</article>
</body>
</html>

上記はtemplate.phpの中身です。23〜36行目のように<body>の中に<figure class=”op-tracker”>と<iframe>タグで囲った中にGoogleアナリティクスのトラッキングコードを記載して下さい。尚、31行目の「UA-XXXXXXXX-X」は各自のトラッキングIDに変更して下さい。headerやfooterの中にアナリティクスのコードを入れるとサポート外とFacebookのドキュメントで記載されていたのでご注意下さい。

以上でアナリティクスの対応は終了です。

Instant Articlesに広告を対応させる方法

広告をInstant Articlesで表示させる場合は上記アナリティクスの同様に、wp-content>plugins>facebook-instant-articles-wp-master>template.phpを開いて編集します。

1
2
3
4
5
<figure class="op-ad">
    <iframe height="50" width="320">
       <!-- 広告のコードをここに挿入 -->
    </iframe>
</figure>

上記コードを広告の表示させたい部分に表示して下さい。広告のサイズによってはiframe部分のwidthやheightのサイズ修正が必要です。なお、2016年4月以降でないと表示確認ができない為、どの広告会社のコードが対応できるのかは不明です。多分アドセンスは大丈夫かとは思いますが。

広告の貼り方は以上です。何か不具合などがあれば教えて下さい。