2012年12月6日木曜日

アメブロに「お気に入りに追加」ボタンを設置する


スポンサードリンク

概要:アメブロに「お気に入りに追加」ボタンを設置

今回は「お気に入りに追加」ボタンをアメブロに設置する方法をご紹介します。

アメブロなどのブログを訪問すると下記のようなボタンを見かけることがありますよね。




訪問者さんがこのボタンを押すと、あなたのブログを「お気に入りに追加」してくれるわけです。
もちろんブラウザ(IEなど)からでも「お気に入りに追加」は可能ですが、ボタンを配置することでよりお気に入りに追加してくれる可能性が上がるわけです。

せっかく作ったブログですからリピーターにもなってもらいたいですよね。
お気に入りに追加してもらうもっとも効果的な方法は下記の方法です。

記事の最後に

『「この記事役に立った!」と思った方は、「お気に入り」登録をお願いします。』

という文言を加える。

ただ漠然とサイドバーに置いておくよりも非常に効果的です。本当に役に立つ記事を書けばお気に入りに追加してくれるものです。

では、早速ボタンを作成していきましょう。

手順:「お気に入りに追加」ボタンのイメージを確認

「お気に入りに追加」ボタンは色々デザインを工夫できます。

まずは一番シンプルなものからです。

1.シンプルデザイン



【HTMLソース】
<INPUT type="button" value="お気に入りに追加" onclick="javascript:window.external.AddFavorite
('http://internet-bibouroku.blogspot.jp/', 'ブログの探究 -ブログ運営のテクニック集-')">

※赤字部分はご自身の「URL」と「タイトル」に変更して下さい。

2.おしゃれなデザイン
続いておしゃれなデザインをご紹介します。



【HTMLソース】
<INPUT type="button" value="お気に入りに追加" onClick="javascript:window.external.AddFavorite
('http://internet-bibouroku.blogspot.jp/', 'ブログの探究 -ブログ運営のテクニック集-')" style="border-style:solid; border-width:1px; border-color:#356cc4; background:#ffffff; font-size:10pt; color:#000000">

※赤字部分はご自身の「URL」と「タイトル」に変更して下さい。

【パラメータの説明】
border-width:1px ボタン周りの枠の太さです。数字が大きくなればより太い枠になります。
border-color:#356cc4 ボタン周りの枠の色です。好みのカラーコードに変更可能です。
background:#ffffff ボタンの中の背景色です。好みのカラーコードに変更可能です。
font-size:10pt  文字のサイズです。値が大きくなれば文字も大きくなります。
color:#000000" 文字の色です。好みのカラーコードに変更可能です。


2つ例のデザインをご紹介させて頂きました。ソースを変更することで色々なデザインを作れます。ご自身のブログにあったデザインにして下さい。
以上でボタン作成の準備ができました。
続いてアメブロへの設置です。

2.アメブロに「お気に入りに追加ボタン」を設置
アメブロにログイン後、[ブログ管理] → [プラグインの追加] → [フリープラグイン]にてボックス内に1で紹介したHTMLソースを貼り付けます。既に何らかのプラグインコードがある場合はその後ろに貼り付ければOKです。貼り付けたら「保存」します。

保存後

『新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら。』

と表示されるので「こちら」をクリック([配置設定]からでも同じ画面に遷移します)。

「使用しない機能」から「使用する機能」へフリープラグインをドラッグして保存します。
プレビューだとフリープラグインの内容を確認できないので、いったん[マイページ]へ移動。
自分の公開ページから「ブログ」をクリックします。

これで「お気に入りに追加」ボタンが設置されていればOKです。

以上で終了です。

ちなみに「お気に入りに追加」ボタンはIE(インターネットエクスプローラ)でしかボタンをクリックできません。GoogleChromeやFirefoxといったブラウザではクリックできないのです。

最後になって「今更かよ!」って感じですが(笑)
IEのシェアはまだまだ多いので十分活用できます。
ご安心下さい(^-^)


スポンサードリンク

0 件のコメント:

コメントを投稿