カテゴリー : WordPress

Facebookの「いいね」ボタンをWordPressで設定する方法

Facebookの「いいね」ボタンをWordPressで設定する方法。
ちょいと面倒です。

まず、
OPGの設定
Create New Appにて、APP IDの取得する。
App Name:サイト名
を入力し、続行をクリック。

OGPの設定については「Facebook の OGP 設定の有無による違い」で詳しく解説しています。

APP IDが表示されているのでメモ。
ウェブサイトにサイトURLを入力。
「変更を保存」する。

Admin Userのidを確認する。

http://graph.facebook.com/xxxxxx

xxxxxの部分に自分のfacebook usernameを入力しブラウザで開く。
(usernameがわからない場合、facebookにログインして自分の名前をクリックするとURLに表示されます。
取得していなければ、http://www.facebook.com/usernameで設定する。)

すると以下が表示される。

{
   "id": "123456789",
   "name": "name_ab",
   "first_name": "name_a",
   "last_name": "name_b",
   "link": "http://www.facebook.com/xxxxx",
   "username": "xxxxx",
   "gender": "sex",
   "locale": "ja_JP"
}

一番上のidをメモる。

WordPressに「Open Graph protocol」というプラグインをインストール

Open Graph protocolの設定画面にて

Admin User(s):123456789
(http://graph.facebook.com/xxxxxxで確認したid)

Application ID:OPGの設定で取得したAPP IDを入力

「変更を保存」する。
すると、header部分に以下が記述される。

<meta property="og:title" content="" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admins" content="youradmins" />

facebookのいいねボタン設定
facebook Like Button
以下を自分好みに変更する。
URL to Like:サイトURL
Send Button:Sendボタンの有無
Layout Style:ボタンのデザイン
Width:設置する幅
Show Faces:いいねボタンをクリックした人の写真
Verb to display:「いいね」か「おすすめ」の選択
Color Scheme:色の選択
Font:フォントの選択
をして、「Get Code」をクリックする。

すると、以下が表示される。
まず、以下をbodyの下にペーストする。
(HTML5の場合を表示。おそらくHTML5が無難かと・・・)

<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
 (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=428222087195989";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>

さらに、以下を「いいね」ボタンを設置したい場所に記述する。
WordPressの場合

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

(これは、ボタンの設定によって異なります。
data-href=の部分のURLを”“に変更すればOK)

これで、「いいね」ボタンとOGPの設定は終了。

最後に
OGPが正しく動作しているかどうか確認
facebook デバッガー
エラーがでなければOK。

WordPress関数「get_the_date」と「the_date」の違い

WordPress関数「get_the_date」と「the_date」は、1日に複数記事が投稿されて場合に違いがでる。

the_date

1日に複数記事の投稿があった場合、最新の投稿だけに投稿日時を出力する。

get_the_date

全ての記事に投稿日時を出力する。
get_the_dateは、WordPress3.0で追加された関数。

WordPressプラグイン「関連記事YARPP」エラーが発生

最新のWordPress3.0.4にすると、関連記事を表示するプラグインYARPP3.1.9出てくるエラー
「プラグインを有効化する際に、157文字分の予期しない出力が発生しました。“headers already sent” メッセージや、フィードやその他の問題に気づいた場合はプラグインを停止または削除してみてください。」
新しいブログを設置した際に、インストールしたところ、上のエラーが発生した。

WordPress3.0.1でも発生しているエラーのようです。
現在このブログはWordPress3.0.1で関連記事 (YARPP) 3.1.9ですが、問題ないけど。

ちょいといじってみたものの、エラーが修正されなかったのでとりあえず使わないことに。
関連記事を表示するプラグインで、お気に入りだっただけに残念。

WordPress3.0対応フリーの写真ブログテーマ 6つ

Graph Paper PressのWordPressフリーの写真ブログテーマ6つです。
使いやすく設計されています。
英語がわからなくても直感的に使えると思います。
テーマのオプションやメニューのカスタマイズなど、いろいろついてますよ。

Berlin
WordPress Free Theme [Berlin]

Monochrome Pro
WordPress Free Theme [Monochrome Pro]

F8 Lite
WordPress Free Theme [F8 Lite]

Modularity Lite
Modularity Lite

Mansion
Mansion

Work-a-holic
Work-a-holic

デザインが同じテーマで有料版があるものもあります。
(テーマのタイトルにLiteとついているものは、有料版があります。)
有料版のテーマはiPhone Videoがサポートされていたり、色のカスタマイズ機能が付いているようです。

WordPressフリーテーマ100+20個 2010 Edition

WordPressのフリーでハイクオリティなテーマ100+20。
見るだけでも面白いし、きっと刺激を受けます。

100 Free High Quality WordPress Themes: 2010 Edition
ポートフォリオやマガジンスタイル、モバイルなど様々なテーマに分類されて紹介しています。

100 Free High Quality WordPress Themes 2010 Edition

100 Free High Quality WordPress Themes 2010 Edition


Wordpress-106 in 100 Free High Quality WordPress Themes 2010 Edition

Wordpress-106 in 100 Free High Quality WordPress Themes 2010 Edition


Wordpress-112 in 100 Free High Quality WordPress Themes 2010 Edition

Wordpress-112 in 100 Free High Quality WordPress Themes 2010 Edition


Wordpress Theme 100 Free High Quality WordPress Themes 2010 スマートフォン

Wordpress Theme 100 Free High Quality WordPress Themes 2010 スマートフォン


20 Free High Quality WordPress Themes Of 2010
こちらで紹介されているWordPressテーマ20個もハイクオリティ!
20 Free High Quality WordPress Themes Of 2010

20 Free High Quality WordPress Themes Of 2010


20 Free High Quality WordPress Themes Of 2010

20 Free High Quality WordPress Themes Of 2010


20 Free High Quality WordPress Themes Of 2010

20 Free High Quality WordPress Themes Of 2010

WordPressとCSSデザインショーケース(リンク集)

参考になるサイトが数多く掲載されています。

CSSのデザインショーケース

CSS Mania
css mania

CSS REMIX
css remix


WordPressデザインショーケース

WPGlobe
WPGlobe

WordPressが狙われている?セキュリティ対策

CMSの脆弱性を狙った攻撃が多数確認されているそうです。
CMSの脆弱性を悪用する攻撃

脆弱性をついた攻撃は、

  • SQLインジェクションによるデータベース情報の漏洩
  • リモートからコマンドを実行されて不正なツールをインストールされる

などがあり、攻撃の多い日は2万件検知されるそうです。

WordPressも例外なく攻撃対象となっているそうです。
バージョン管理をしっかりとしておきましょう。
セキュリティ対策もできればしておくと良いかもしれませんね。

WordPressのセキュリティ対策として、どうでしょうか?

WordPressチートシート タグ一覧

WordPressチートシート

WordPressチートシート

WEBクリエイターボックスさんで
日本語版 WordPress チートシート
が公開されていました。

PDFで配布してくださっているので、印刷して手元においておくと便利です。

WordPressのテーマ編集していると、まだまだわからないことだらけの初心者にはとても助かります。(私とかね!)

WordPress『フリーテーマの暗号化を解除』

WordPressの無料テーマを使っていて、「テーマの編集」をしようとしたら、暗号化されてて困った。
という経験ありませんか?

暗号されている中には、もしかすると、スパム的なリンクが仕込まれているかもしれません。
他のサイトで使っているテーマのfooter.phpが暗号化されていまして、かなり困りました。
修正するにしても、「どうやって暗号を解除するのか?」と困っている方もいると思います。(私とかね。)

探してみたら、暗号化されているコードを複合化してくれるサイトがありました。

php $_F=__FILE__;$_X= Byterun Decoder

php $_F=__FILE__;$_X= Byterun Decoderにアクセスして

$_F=__FILE__;$_X=この部分を入力します。

「Decode This Rubbish」ボタンをクリックして復号化してくれます。

あとは、ソースを見てスパムっぽいところを修正できますね!

MIMEとは

WordPressのテンプレート優先順位で『添付ファイル用のページ』で書いたMIMEです。

MIME(Multipurpose Internet Mail Extension)は、バイナリデータも添付ファイルとして送れるようにした規格です。
ウェブ上で利用されるファイルには、拡張子(識別子)があり、拡張子とファイルのデータ型(データの種類)の関連付けを担っているのがMIMEタイプです。

主なMIMEタイプ一覧

ファイル形式 一般的な拡張子 MIMEタイプ
テキスト .txt text/plain
HTML文書 .htm,
.html
text/html
XML文書 .xml text/xml
JavaScript .js text/javascript
CSS .css text/css
VBScript .vbs text/vbscript
Microsoft AVI .avi video/x-msvideo
MPEG映像 .mpg video/mpeg
GIF画像 .gif image/gif
JPEG画像 .jpg,
.jpeg
image/jpeg
PNG画像 .png image/png
CGIスクリプト .cgi application/x-httpd-cgi
Word文書 .doc application/msword
PDF文書 .pdf application/pdf

WordPressテンプレート優先順位