タグ : Plugin

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プラグイン「関連記事YARPP」エラーが発生

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

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

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

WordPressプラグイン「Contact Form 7」

WordPressに問い合わせフォームを簡単に追加できるプラグイン。
楽できます!
Contact Form 7(日本語)

使い方は簡単!
インストールは、WordPress管理画面から
「プラグイン」→「新規追加」→「Contact Form 7」で検索してインストール。

インストールできたら、プラグインの「Contact Form 7」の「設定」をクリック。
そしたら以下の画面が開きます。

Contact Form 7 設定画面 01

Contact Form 7 設定画面 01

Contact Form 7 設定画面 02

Contact Form 7 設定画面 02

「フォーム」で、必要な項目を追加・削除して、メールの基本情報とメッセージ本文を修正します。
最後に、

[contact-form 1 "コンタクトフォーム 1"]

をコンタクトフォームを挿入したい記事やページに入れるだけでOKです。

ちなみに、このWordPressプラグイン「Contact Form 7」は日本人の方が制作されているようで、日本語ページにFAQなどがあります。
困ったときもなんとかなるハズです!

WordPressプラグイン「WP Tweet Button」

WordPressで、「ツイートする」というツイートボタンをつけるプラグイン。

新規インストールして、プラグインを有効化するだけ。

設定はすること少ないです。とりあえず簡単に。

WP Tweet Button | WordPressプラグイン

WP Tweet Button 設定 | WordPressプラグイン

・Display内のPosition:記事の前か後に表示するか?
・Display内のAlingment:右か左か?
・Tweet Button style :どんなボタンスタイルにするか?を3つの中から選びます。

WP Tweet Button 設定02

WP Tweet Button 設定02

・Tweet Button language :言語を「日本語」にするか?(デフォルトは英語)
・URL Shortener:URLの短縮は、何を使うのか?(デフォルトは短縮なし)

WordPressプラグイン「WP Super Cache」アンインストール方法

以前、「WP Super Cache」がアンインストールしようと「削除」をクリックすると、

UNINSTALL_WPSUPERCACHE must be set to a non-blank value in uninstall.php

というメッセージが表示され、削除できませんでした。

プラグインの編集から「uninstall.php」の中身を見てもどこの「non-blank value」なのかわからん・・・

ググってみたら一発で解決。
テーマの編集から「uninstall.php」の19行目に

define( 'UNINSTALL_WPSUPERCACHE', '' );

があり、ここの値が「non-blank」だということ。

define( 'UNINSTALL_WPSUPERCACHE', '1' );

と変更して「ファイルの更新」をする。
再び、プラグインの「削除」をしてあげると、アンインストール完了。

WordPressプラグイン「WPtouch」iPhone、Androidでの表示を最適化

iPhoneもAndroidも持っていないけど、WordPressプラグイン「WPtouch」を入れて、iPhoneとAndroidでブログを表示できるようにしてみました。
FireFoxのアドオン「User Agent Swicher」でiphone3Gの画面を確認できた。
ただ、本物のiPhone、Androidでは確認できていないので不安が残ります。
節約生活なもので、仕事で使うときには買おうと思っているのですが、まだ機会が訪れません。(大丈夫なのか??w)

「WPtouch」プラグイン同士の干渉があるらしいので、いろいろとプラグインを入れている方は注意してみてください。

現在WPtouchは「バージョン1.9.17」。
バージョン2.0(pro)からは有料になってしまいました。
価格は29ドル。

WPtouch Pro

安いっちゃ安いけど、とりあえず今は無料の1.9系で十分ですね。
私は、このプラグインを有料で購入する前に、iPhoneかAndroid欲しいっす。。。

WordPressプラグイン「SyntaxHighlighter Evolved」

Syntax Highlighterとは、ソースコードなどを見やすく区別してくれるJavaScriptライブラリ。
で、そのWordPressプラグインが「SyntaxHighlighter Evolved」
プラグインの新規追加から「SyntaxHighlighter」で検索すると何個かプラグインがヒットする。
私は「SyntaxHighlighter Evolved」を入れてみた。

例えば、以下のようにソースコードを表示してくれる!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>

これはHTMLソースの表示。
かっこいい!!
見た目は設定で変更できる。

使い方は簡単!

[html]
ここにHTMLタグを記述する。
[/html]

上記のように、[]で言語名を括るだけ。

プラグインの設定画面は英語でわかりづらいが、
Bitmacroブログさんの「SyntaxHighlighter EvolvedのSetting」
で設定方法を詳しく説明してくれている。

対応言語
デフォルトで以下は入っている(ハズ)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

最新の対応はこちらで確認できる。

WordPressプラグイン「Ktai Style」携帯サイトに対応!

WordPressのプラグイン「Ktai Style」を入れてみました。

Ktai Styleとは

WordPressウェブログを日本の携帯電話対応 (5キャリアおよびスマートフォン対応) にするプラグインです。WordPress + Ktai Style だけで、携帯ブログが構築できるという代物。
Ktai Style


日本の携帯電話に対応するというのが素敵ですね!
そして、これがびっくりするほど簡単に設置できます。
ただ、インストールするだけ!

設置方法

  1. プラグインをダウンロードして展開し、ktai-style フォルダーごとサーバーのプラグインディレクトリー (wp-content/plugins/) に転送します。
    もしくは管理画面のプラグインの新規インストールでも簡単にインストールできます。
  2. WordPress の管理パネルより Ktai Style プラグインを有効にします。
  3. 好みに応じて、サイト管理画面の携帯表示でテーマやオプションを変更します。たいていはデフォルトのままで構いません。
  4. 本プラグインの更新は WordPress の標準機能で可能となりました。「JSeries Notifier」は不要です。

WordPress2.9.2とWordPress3.0.1で問題なく稼働中です。(docomoのみの確認です。)

WordPressプラグイン「All in One SEO Pack」SEO対策

簡単にSEO対策を実施できるということで、WordPressのプラグイン「All in One SEO Pack」

All in One SEO Pack(version 1.6.12.1

日本語化してくれているものもあります。

All in One SEO Pack日本語版(version 1.6.8.1

こちらは、多少バージョン(version 1.6.8.1)が低いですが、現在最新のWordPress2.9.2でもWordPress3.0.1でも問題なく使用できています。

インストール方法(日本語版)

  1. All in One SEO Pack日本語版(version 1.6.8.1からダウンロードしたファイルを解凍してフォルダごと「/wp-content/plugins」へアップロード
  2. WordPressの管理画面から「プラグイン」内の「インストール済み」をクリックし、「All in One SEO Pack」を有効にする。
  3. WordPressの管理画面から「設定」内の「オール・イン・ワンSEO(日本語版の場合すでにカタカナになっています。)」をクリックPlugin StatusをEnableにチェックする。
<title>xxx</title>
<meta name="description" content="xxx" />
<meta name="keywords" content="xxx" />

「xxx」の部分を自分で指定することができます。
ちょっと面倒でも、個別に指定することで検索エンジンにひっかかりやすくなると思いますよ。

WordPressプラグイン『XML Sitemap Generator』

有名なWordPressのプラグインXML Sitemap Generator(Google XML Sitemaps)
sitemap.xmlを自動生成してくれる便利なプラグインです。

サイトマップ(sitemap.xml)とは

googleやyahooなどに、インデックスしてもらうためのファイル。
検索エンジンのクローラーが、すべてのページを整理してインデックスしてくれる大変便利なもの。
クローラーに対して、わかりやすくサイト紹介してくれるファイルです。


XML Sitemap Generatorのインストールは、Wordpressの管理画面→新規追加で!
インストールしただけで、日本語になっています。
[sexy-lightbox href='http://www.smart-ness.net/neta/wp-content/uploads/2010/04/xml_sitemap_set_001.gif' title='WordPressプラグイン『XML Sitemap Generator』']Sitemap ジェネレーター[/sexy-lightbox]

設定は、優先順位など変更できますが、デフォルトのままでOKです。
ただ「Yahoo! にブログの更新を通知」にチェックが入っていません。
Yahoo!に更新を通知する場合は、アプリケーションIDを取得する必要があります。

Yahoo!デペロッパーネットワークアプリケーションIDを取得します。
yahoo!デペロッパーネットワーク←ここから取得します。
XML Sitemapの設定画面から「ここから取得」で移動すると、アメリカの方のyahooに飛んじゃいます。

フォームの入力内容は、
Yahoo!デベロッパーネットワークヘルプ
で確認してください。

sitemap.xml プラグイン設定画面