新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ブログにFacebookの「いいね!」ボタンをつける方法【ライブドアブログ編】

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

ツイッターやらブログやらで騒がしくなってきたFacebook(フェイスブック)が本当に来るのかどうかは置いておいて、いずれにしてもないよりはあったほうがいいだろうということで当ブログにFacebook(フェイスブック)のいいね!(Like)ボタンを設置することにしました。
以下、その手順。 
もう、既に多くの人が解説していますがライブドアブログの場合を前提に解説させていただきます。

スポンサーリンク
 

  1. まずは以下のサイトにアクセスします。
    □ Like Button – Facebook開発者
  2. 英語なのでちょいと戸惑いますが大丈夫です。
    以下のように設定して下さい。 
    Likeボタンの設定
  3. 「Get Code」をクリックしてできたコードが以下。 
    <iframe src="http://www.facebook.com/plugins/like.php?href=%3C%24ArticlePermalink%24%3E&amp;layout=button_count&amp;show_faces=true&amp;width=70&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:21px;" allowTransparency="true"></iframe> 
  4. あとは、このコードをmixiチェックの隣あたりに貼り付ければOK。
    と思ったんだけどダメでした。
    理由は「<$ArticlePermalink$>」がデコードされちゃってるから。
    したがって「%3C%24ArticlePermalink%24%3E」を「<$ArticlePermalink$>」に変える。
  5. ついでに動作確認中にバグを発見したので「width=70」及び「width:70px」をぞれぞれ「width=71」、「width:71px」に変える。
    「いいね!」を解除するとなぜかボタンが1pxずれるバグがあるようです。
  6. 出来上がり。

さらに、ボタンがゴテゴテ増えてきちゃったので、タイトルの後に付く形をやめて、改行させてタイトルの下にまとめて表示させるようにしました。

Facebookの「いいね!」ボタンは他のボタンと違いワンクリックで済むのがいいね!

 - Facebook(フェイスブック), プログラミング, 覚え書き ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

某スマートフォン系SNSの広告にFacebook(フェイスブック)に似せた変な奴がいる

先日、LINE(ライン)初め、スマートフォンがフィッシング詐欺に狙われ始めている旨、記事にしました。
その理由の一つとして、リンク先のURLがハッキリ分からないというのがありました。
今回、それに加えてまるでFacebook、さらにまるでセキュリティウインドウのような「広告」?に遭遇したのでご報告します。
あくまでも広告として紹介しますが、これはちょっとヤバい気がしますねぇ。。
アドウェア? マルウェア? スパイウェア?

Facebookに似せた広告01 Facebookに似せた広告02
赤で囲った部分が広告スペース。
どう見てもFacebookのインターフェースでDMが届いたと言っています。

Facebookをやっている方であればこれは間違いなくタップしてしまうと思うんです。
仮に、今開いているサイトがEYELANDだとしても、自分はタップしてしまいました。
すると表示されるサイトが以下。

Facebookに似せた広告03
あんたのスマホは遅すぎるので、おすすめアプリをインストールして、お掃除しましょう。
ということのようですね。

さすがにここで気付きました。
このサイトやべぇ。と。

以下やべぇと思わせたポイントです。

  • 日本語が変。
  • クリック(タップ)を促す表示。
  • URL表記が微妙。

ここでしっかりとURLが確認できればネットで調べてってこともできたんですけどね。

今回はもう、行っちゃったので行き先のURLを調べてドメインを検索してみました。
ただ、ネット等でドメインを調べてみると特に問題ないようなんですよねぇ。
□ globalmobilecenter.com safe website ? Check it now

さらにURLをメールでパソコンに転送。上記「今きれい」ボタンをクリックすると開くサイトのドメインも調べてみましたが同様でした。
□ imobidl.com safe website ? Check it now

マジアラートだったりして。。
もう、いっぱいいっぱいだもんなぁ。このスマホ。

でも、マジだったとしてもこの広告はちょっと問題あるんじゃないかなぁと思いますね。
どう見てもFacebookそのものですもんね。

Chromeで「Adobe Reader」を使ってPDFを開かせる方法

1年以上前の記事です。内容が古い可能性があります。激速ブラウザ「Google C …

「食べログ」有料会員の解約方法【docomoのスマホ契約後の有料サービス解約手順】

1年以上前の記事です。内容が古い可能性があります。スマホ契約時に入らされる有料サ …

「ダウンロード」とブログに書くのは危険

1年以上前の記事です。内容が古い可能性があります。ブログの記事に安易に「ダウンロ …

ブログやサイトにカレンダーを簡単に置く方法

1年以上前の記事です。内容が古い可能性があります。お客さんに自分で編集できるカレ …

独自ドメインのWORDPRESS(ワードプレス)ブログを半日で作る方法(後編)

1年以上前の記事です。内容が古い可能性があります。移転後すぐ前編を書いていながら …

「Windows Liveメール」で署名を作成、使用する方法

1年以上前の記事です。内容が古い可能性があります。今まで何やってたの? と思うよ …

ソフトバンク「iPhone 5」で余計なサービスを解約する方法(Yahoo!プレミアム編)

1年以上前の記事です。内容が古い可能性があります。ソフトバンク「iPhone 5 …

「Google Play」でいつの間にやらアプリが自動更新(自動アップデート)になっていた

1年以上前の記事です。内容が古い可能性があります。ゲームをやっていてどうも今ひと …

ワードプレス(WordPress)でトップページをデザインする方法 #wp

1年以上前の記事です。内容が古い可能性があります。さて、テーマのコピーが用意でき …

血液型オヤジ