カテゴリー : CMS

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ですが、問題ないけど。

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

スポーツリーグに特化したCMS

たまたま見つけたのですが、LMS1.4というスポーツリーグに特化したCMSがありました。
大変なスポーツリーグのサイトをあまり知識無くても簡単に管理・運営できますね。

LMSは、League Manegement Systemの略。
本来はフランス語・英語のものですが日本語化しているそうです。

『お薦めの使用方法としては、サイトの権限設定でサイト更新担当者を”superadmin”、チーム代表者を”admin”、選手を”member”に設定します。
チーム代表者やオフィシャル担当チームが試合結果の更新などを行なうなど約束事を決めておけば、サイト更新作業を効率化できサイト更新担当者の業務も軽減されます。
また一般のサイト訪問者には非公開にするなどの権限設定も可能です。』
(全国バスケ専門サイト参照)

LMS1.4 | 全国バスケ専門サイト

LMS1.4 サンプルサイト

LMS1.4は、近日公開予定のようです。

WordPressとかMTのカスタマイズできれば、このLMSを使わなくてもいいのでしょうけど、すぐ使えるのは良いですね。
WordPressのテーマとかであるのかな?

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」ボタンをクリックして復号化してくれます。

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