ソーシャルプラグインを設置しよう! その2「Facebook」

前回の続きで、今回はFacebookの「いいね!」ボタンの設置方法です。

以下のアドレスから設置できます。

http://developers.facebook.com/docs/reference/plugins/like

英語なので若干敷居が高そうで゛すが、
それほど難しくはないので順を追って解説していきます。

■URL to Like
設置したいページのURLを入力します。

■Send Button
チェックした場合、「送信」ボタンを一緒に設置します。
送信ボタンは特定のアドレスに対して送るためのもののようです。
必要に応じて選択してください。

■Layout Style
ボタンの表示方法です。
切替えると右のアイコンも変化するので
それを参考に選択すれば良いでしょう。

■Width
ボタン領域の横幅サイズをピクセル単位で指定します。
ここで細かく指定するよりもコードを直接変更した方が
やりやすいと思います。

■Show Faces
チェックを入れるとボタンの下に
ユーザーアイコンが表示されるようになります。
ボタンが押されないとスペースが開いた状態になります。

■Font
表示されるフォントを選択します。
日本語の場合は無視してかまいません。

■Color Scheme
背景色に合わせてカラーを変更します。
これも右のアイコンが変化するので参考に選択すれば良いでしょう。

■Verb to display
ボタンに表示する言葉です。「いいね」か「おすすめ」を選択できます。

「Get Code」を押すとコードが生成されるので、
設置したいページに貼り付けてください。
なお、前回と同様にブログの個別記事などにリンクを張る場合は
URLを代替タグに差し替えるなどのカスタマイズが必要です。

ソーシャルプラグインを設置しよう! その1「Twitter」

最近、ホームページ上で頻繁に見かけるようになった
TwitterやFacebookなどのソーシャルプラグインアイコン。
上手に利用すればそれぞれサイトの集客に力を発揮してくれそうです。
ブログなどではプラグイン化されていて簡単に設置できるところが多いのですが、
自作ホームページなどではそれぞれのソーシャルサービスによって
設置方法が異なっていたりと、複数のソーシャルアイコンを
一度に設置するのは案外面倒なものです。
そこで今回から数回に分けて、代表的なソーシャルサービスの
アイコン設置方法をまとめていきたいと思います。

第1回はTwitterのソーシャルアイコン設置方法です。

Twitterのボタンは以下のURLから簡単に設置することができます。

http://twitter.com/goodies/tweetbutton

■ボタンを選択
どの種類のボタンを設置するか選択します。見たままなので、説明は不要でしょう。
今回は「リンクを共有する」で説明します。

■URLを共有
設置したページのURLを旧友したい場合は「ページのURLを使う」を、
トップページなどに集客したい場合は直接アドレスを入力すれば良いでしょう。
ブログの各ページに設置する場合は代替タグを使用するなど若干工夫が必要でしょう。

■ツイート内テキスト
こちらもURLと同様に設置したページのタイトルをそのまま使うなら「ページのタイトルを使う」、
特定のタイトルや文言を使うなら直接入力すれば良いでしょう。

■数を表示
チェックを外すと数を表示する吹き出しがなくなります。

■ユーザー
ツイート内容に@ユーザー名が付くようです。

■推奨
ツイートした後、このユーザーをフォローするよう推奨してくれるようです。

■ハッシュ
ハッシュタグを埋め込むのに使用するようです。

■ボタン(大)
そのままずばり。チェックするとボタンを大きくします。

■言語設定
英語の「tweet」を日本語の「ツイートする」などに設定します。

生成されたソースコードをコピペすれば完了です。
ちなみにローカル環境ではアイコンマークは表示されません。

また、aタグ内に「data-count="vertical"」を追加することで吹き出しを上にするなど
コードを変更することで細かくカスタマイズすることも可能です。

新サイト仮オープン!

久々の更新です。

最近はアクセス数も増えてコンスタントに2桁を数えるまでになっているので、

なかなか更新できないのが心苦しく感じています。

もっともこのブログの主旨が日記的なものではなく、

パソコンをめぐるトラブルやプログラミング上のTipsを記録したものなので、

過去の記事がお役に立っているのならそれで充分なのかも知れません。

さて、以前にお知らせした新サイトですが、

このたびようやく公開することができました。

とはいえ、まだ仮オープンの段階で完全ではないのですが、

メインの部分は完成していますので、よろしければ訪れてみてください。

新サイトはインターネット上で提供される様々な商品やサービスの中から、

「商品割引」や「キャッシュバック」「プレゼント」などのお得な情報と、

「求人情報」「お取り寄せグルメ」「資格取得」「旅行案内」「レンタルサービス」

「婚活・出会い」「株・FX」「トラフィックエクスチェンジ」といった

幅広いお役立ち情報を集めたサイトです。

特にお得情報の中には期限付きのものが多数ありますのでお見逃しなく。

新サイト『トクトクプラス』には以下のアドレスからどうぞ。

http://tokutokuplus.com/

ホームページのサムネイル作成に最適「PHARMACY」

今回、紹介するのはWebサイトを画像にキャプチャしてくれるフリーソフト「PHARMACY」。

このソフトの何がすごいかというと、単にスクリーンショットを撮影するだけなら
以前に紹介した「Fake UO Screenshot Utility」など類似のものは数多くあるが、
「PHARMACY」はWebサイトのキャプチャに特化しているところがユニーク。

使い方は「PHARMACY」がブラウザを兼ねているため、
キャプチャしたいサイトのURLを入力して移動し、撮影するだけ。
出力形式はBMP,JPEG,PNGおよびクリップボードへの貼り付けに対応している。

そして、何よりも便利な機能がキャプチャ画像をサムネイルとして保存できる点。
スクリーンショットと同時出力もサムネイルのみの出力も可能で、
リサイズは割合指定(原寸の何パーセント)か横幅をピクセルで指定する。
個人的には縦幅の指定とトリミングができればさらに良かったと思う。
難点を言えば保存フォルダが指定できないことか。

いずれにしてもこれでいちいち画像ソフトでリサイズをする必要がなくなった。
私の場合、縦サイズをトリミングするだけである(全体を表示するならそれも必要ない)。

ダウンロード先:http://www.vector.co.jp/soft/winnt/net/se327655.html

更新について

本日は皆さんにお知らせしたいことがあります。

ここのところ更新を行っていませんが、
決してこのブログの活動を停止しているわけではありません。

もともと、このブログはホームページ制作やプログラム開発を行っていく中で
直面したトラブルや発見したテクニックなどを備忘録的に記録することで
同じような局面でお困りになっている方へ
多少なりとも参考になればと思い開設したものです。
従って、私自身が抱えている業務工程によっては
今回のように長期に渡ってネタ不足が発生することがあります。

あくまで備忘録的な記録なので
ブログのために敢えてネタ作りを行わないことをご了承ください。

現在、新たなサイト開設に向けた作業が大詰めを迎えているところであり、
これが終了次第、再びプログラム開発を行う予定ですので、
今しばらくお待ちいただけるようお願い申し上げます。