FACEBOOKのいいねボタンをウェブサイトやブログに貼り付けをする方法

よくウェブサイトで見かけるFACEBOOKのいいねボタンですが
簡単にウェブサイトに設置できるのはご存知でしょうか?2235bc2f25827782480cc3a1db68a615.jpg

こういう画像のことですね。知っている方はすでにご存知だと思いますが
改めてやり方を説明したいと想います。
 
実はいいねのボックスはこれ以外にもたくさん種類があり
押した人のサムネイル画像を表示するものや
サイトのURLをシェアさせる物など、10種類程度あります。
※細かくカスタマイズすると種類は100種類程度になりますが
 
今回は上記のような「いいねボタン」を作成する手順を紹介したいと思います。
 
まずは上記URLにアクセスして下さい。
 
 
画面に、すでにいいねボタンが表示されていると思います。
※下記画像を参考にして下さい。
 
abd5b8ead18252905b39b7ce7d1f3d0d.jpg
 
上記の様にでていると思いますので、あとは対象サイトのURL(あるいはFACEBOOKページのURL)
を記入し、最後に「Get Code」を押すだけで完了です。
横にあるシェアを非表示にしたい場合は「include Share Button」のチェックを外しましょう。
 
019023064efd5765f8df9025d3c0b576.jpg
 
ボタンを押したあとは上記のような画像が表示されます
※ユーザーによって上記画像のように「このスクリプトは次のアプリのアプリIDを使用します」と表示されています
 
タブの部分をIFRAMEにもっていき、表示されたコードを自社のサイトやブログなどに貼り付ければ完了です。
 
今回は下記に当社URLのいいねボタンを設置してみました。

 

ホームページ更新時に重宝しそうな、5つのチェックポイント

冬期休暇を目前にして、自社内でのサイト更新や趣味のサイトのヴォリュームアップ等をご計画の方がいらっしゃるかもしれません。
自らの経験を交え、ホームページ更新時のチェックポイントを挙げていきたいと思います。

1.データをアップロードしたのに、更新されていない。
まず、ブラウザの履歴を削除し、キャッシュ(インターネット一時ファイル)をクリアした後に再読み込みを試みてください。

■履歴とキャッシュの削除について
・インターネットエキスプローラーの場合 … メニューバーの「ツール」内に「閲覧の履歴の削除」があります。
各ヴァージョンの操作手順につきましては、Microsoft社のサポートページをご覧ください。
http://support.microsoft.com/kb/2539129/ja

2.versionの異なるインターネットエキスプローラーで確認したらレイアウトがずれてしまう。

通常、インターネットエキスプローラー(IE)をアップグレードしましたら、下位ヴァージョンのインターネットエキスプローラーは利用できなくなってしまいます。
しかし、下記サイトのIETesterなら、それぞれのヴァージョン毎に動作確認が取られます。

http://www.my-debugbar.com/wiki/IETester/HomePage

IETesterが上手くインストール出来ない場合には、少々時間が掛かりますが下記サイトでも各ヴァージョンでの見え方が確認可能です。

http://netrenderer.com/
※IE NetRendererさんのサイトです。プルダウンメニューからヴァージョンをご選択ください。

また、IEのみならず、ファイヤーフォックスやchrome等でも確認したい場合には、株式会社シーマン社のサイトが非常に便利です。
※無料ツールは1回につき5つまで選択できます。

http://www.cman.jp/BrowserCapture/

3.ページの読み込みに時間がかかってしまう・表示されない。
こちらの場合には、ブラウザ側の問題なのか、サーバ側なのかを切り分けなければなりません。

■ブラウザの問題の場合
まず、ブラウザを変えてみます。
その後、スムーズに読み込めた場合には、メイン使用のブラウザを一旦終了させ、履歴の削除やキャッシュのクリアを試行なさってください。

■サーバの問題の場合
ブラウザを切替えてもページが表示されない場合には、サーバのトラブルが考えられます。
まず、サーバ管理会社の障害やメンテナンス情報を確認しましょう。

また、下記のサイトでは、契約先のサーバが自分の回線状態が込み合っていて見られないだけなのか、他のインターネットユーザも見られないのかが確認出来ます。

http://www.downforeveryoneorjustme.com/
※Webサイトのモニタリングサービスページです。

4.画像が表示されない

私自身も良くやってしまいがちなのですが、アップロード先のディレクトリを誤っていることが多めです。
ローカル環境で表示されている場合には、画像に設定したパスを再確認し、アップロードを再試行なさってみてください。
さらに自戒を込めて記載いたしますが、画像に対して相対リンクを設定します際に「./」と「../」 を誤入力している事もしばしばありがちなミスです。

更に、ファイル名の大文字・小文字の誤記が考えられます。
■-(ハイフン)と_(アンダーバー)の誤字も、多いに考えられる原因です。
■ファイルの拡張子が .jpg なのに .pngになっている等も、やりがちな誤表記です。
上記の2件につきましては、何度も経験いたしました。
当方を反面教師としてくださいますと幸いです。

5.cssの変更が反映されない。

背景色等につきましても、ローカルとサーバ内のディレクトリ構成が異なっているため反映されないことがあります。
cssにインポート設定等をなさっている場合は、特にアップロード先にご留意なさってください。

更に文字コード指定の前にコメント等を記入している時には、正しくcssがインポートされない場合があります。
また、それぞれのcssの文字コードが混在(UTF-8やShift-Jis、EUC等)しておりますと、折角のcssが正しく動作しないことがあります。

文字コードは「1行目に書かれており」かつ「統一」されているか否かは、大事なチェックポイントになるかと思っております。

■その他のお役立ちTips
webページの表示に時間が掛かるように思われた場合には、画像データの軽量化をお試しになると宜しいかもしれません。
Photoshopには、「Webおよびデバイス用に保存」機能もありますが、もう少々軽量化が可能です。

http://tools.dynamicdrive.com/imageoptimizer/index.php
※gif, jpg, pngに対応しています。

http://tinypng.org/
※ブラウザ上でpng画像を軽量化できるフリーサービスです。

もっと確認しなければいけない事項は、他にも沢山あるのかもしれません。
今回は5つに絞ってご紹介しましたが、少しでもwebに関わる皆さまのお役に立てますと嬉しいです。

Webページの横幅設定について(2012年版)。

PC用のwebサイトを作成時、ページ全体の横幅設定は1024pxや960pxに設定することが多めです。
横スクロールが出てしまいますページはユーザビリティ的に閲覧しづらく感じますし、逆に余りにも細身のページは縦方向への遷移が難しくなってしまうと申します懸念があるからです。

今回、分る限りで調べた結果では、PC閲覧用のwebページの横幅は概ね1000px前後であれば大丈夫なようです。

上記の判断基準となりましたデータを基にwebページの横幅について考えてみたいと思います。
※データは、2012年12月時点のものです。

横幅を考えるにはモニタの解像度を知ることが第一かと思いました。
そこで、米国のNet Applications社の最新データを確認いたしました。
※同社のサイトはこちらです。
http://www.netmarketshare.com/report.aspx?qprid=17

1366*768px が最上位でした。
以下、1024*768pxと1280*800pxと続いております。

横幅の設定が1024pxとする以前は、800*600pxを目安に作成することが多かったように覚えております。
今はモニタの解像度もどんどん上がってきているのですね。

また、スマートフォンやタブレットPCにつきましては、株式会社ハイポジ社の津曲さんがお書きになったBlogに分かりやすくまとめられております。

http://case-mobile-design.com/devices/resolution-list/
※同氏のBlogへ

モバイルデバイスの場合は、横幅480pxのユーザが多く、その次に540pxと720pxが来ております。
縦幅の場合には、800px・1280px・960pxの順でユーザが多いようです。

PCと一口に申しましても、データをご覧いただければお分かりのように様々なモニタサイズがあります。
さらにスマートフォンやタブレットPCのユーザも増えまして、どのサイズが適切なのかと思い悩むこともしばしばです。

私自身はまずPCサイトの横幅の目安が判明しましたら、その後は作成したいレイアウトに合わせ、cssを設定して行かれると宜しいかと思います。

様々なデバイスに対応させるには、レスポンシブwebデザインを知っておくことが重要です。

レスポンシブwebデザインとは、過去においてはリキッドデザインと称されておりましたが、リキッド的な展開のみならず1つのhtmlデータで多くのデバイスに対応できるようになってきたことから、レスポンシブ……の名称に変わっていったようです。
※当方の理解が誤っている場合にはご指摘をお寄せいただけますようお願いいたします。

今回の記事ではレスポンシブwebデザインまでは網羅できておりませんが、レイアウト考案時に参考となるサイトをご紹介しまして、こちらの稿のまとめといたします。

宜しければご覧ください。

・960 Grid System
http://960.gs/

全体の横幅を960pxとし、この数値を基に縦方向に12・16と分割したデザインです。
グリッドは(方眼状の枠)を1つのブロックとしてレイアウトを作成していく考え方です。
学生時代の図形の授業を思い出してくだされば、お分かりいただけるかと思います。
※Dreamweaver CS6では、「可変グリッドレイアウト」機能が追加されております。

皆さまのレイアウトデザインの一助になりますと嬉しいです。

独自ドメインのメリットを再考しました。

時々、ホームページを立ち上げる生徒さんから「ドメイン」についてのご質問をいただくことがあります。

最近では「.mobi」、「.info」や「.asia」など、本当に様々なドメインが安価で取得できるようになりました。
私見では、高額ドメインでは無い限り、独自ドメイン推奨派です。
※注1

年間で1000円程度で維持でき、SEO的にも有利になると考えましたら、非常に費用対効果が高いように感じられます。

まず、独自ドメインのメリッとしましては、短くて覚えやすい事が挙げられます。
例えば、電機メーカさんのSONY社のサイトを見たくなったとします。

その際、完全なURLアドレスである「http://……」を入力する方は、少ないかと思います。
手軽に目的のサイトに辿り着くには、検索エンジンに「SONY」等と入力する方が簡便です。
※上記の場合には、1ページ目に同社のサイトがヒットします。

全てを手入力にいたしますと、私は煩雑に感じます。
更に、誤入力も増えがちになってしまいそうな心配がありますよね。
前述のように、「覚えやすい」・「分かりやすい」ことが独自ドメインのメリットかと思います。

次に、独自ドメインのメリットとしましては、URLアドレスを変えずに自分のホームページを継続できるようになります。
BlogやWebサイト開設は様々なポータルサイトやフリーサーバ等で無料開設も可能です。
非常に便利ですが、いつサービスが停止してしまうか分らないと言う不安材料があります。
※一例を挙げますと、pixiv社(2012年)やKDDI社(2011年)がブログサービスを停止していらっしゃいます。

独自ドメインを取得しておきますと、ホスティング先を変更するだけで、URLアドレスは変わらずに自分のホームページを継続できるようになります。
例えば、最初は無料サーバ+独自ドメインにてサイトを開設します。
そして、コンテンツ増加等に合わせ、サーバを高機能なものに換えていきますと、Webサイトはドメインやサーバを解約しない限り続行いたします。

このように「サイトやBlogが無くなってしまうかもしれない!」と申しますような懸念も、独自ドメインの取得によって、リスク軽減が図られます。

最初はハードルが高いかと感じるかもしれません。
しかし、ホームページ運営上では、独自ドメイン取得ノウハウは有用なスキルかと思います。

Bestでは、ホームページ作成やSEO対策についての様々な講座を設けております。
お気軽にご質問をお寄せください。

※注1:高額ドメイン……ドメインオークション等で高額取引される、人気ドメイン等を意味します。

有効なWebマーケティングの方法とは・・・

3連休中に、またグーグルの検索順位が大きく動きましね。
今回の動向には、
・日本語ドメインサイトの順位が落ちた
・コンテンツの薄いサイトの順位が落ちた
・トップページのみにリンクを集めているサイトの順位が落ちた
などの特徴があると思います。
最近のグーグルのロジック変更によって、急激に順位が低下したことによる対応策として、「自前でコンテンツを作る」ことの重要さが注目されてきています。
少なくとも、これまで自前でコンテンツを作っているクライアント様からは、最近、SEOの順位が上がり、アクセス数が伸びているという話をよく聞きます。
私たちITスクールでも、「自前でコンテンツを作る」ために必要な講座への申込みがこの半年位前年比50%増しの状況です。
これは皆さまの向上心からというより、時代がそのような事態を迫っているといった方が正解だと思われます。
この動きは、グーグルのロジックの方針が変わらないかぎり、今後もしばらく続きそうです。
このような情勢からITスクールでは、WEB対策、引いてはWebマーケティングに有効な講座を用意しております。
【対象者】
・ネットの活用は大切だと思うが、なにをどうすればよいか分からない方。
・ブログやツイッターを更新しているが、一向に効果を感じられない方。
・SEOが大事…ソーシャルが大事…やることが多すぎて整理をしたい方。
【講座で習得できること】
・インターネットから反響を得るために必要なこと。
・HPやブログに掲載すべき情報、表現(書き方)のポイント。
・問合せの件数を増加させるためにできること。
・実際のノウハウを活かしたWEBサイト活用事例紹介。
ご興味ある方は、ITスクールまで。