Facebook のフォローボタンを「いいね」ボタンのデザインへ変更する

Facebook のフォローボタンを「いいね」ボタンのデザインへ変更する

少々わかりにくいタイトルになってしまいました…。やりたいことは、ユーザーが「いいね」のボタンをクリックすると、ボタンが設置されている Web サイト自体ではなく、Facebook ページがいいね(フォロー)されるというものです。

簡単に変更できるのですが、やり方をなかなか見つけられなくて少し困ったので、記事に残しておこうと思います。

「フォローボタン」の生成方法

Facebook ページ自体のいいねを促すボタンとして「フォローボタン」というものが用意されています。

フォローボタン

こちらのページ「Follow Button – Social Plugins」で簡単にコードを生成できます。

Facebookページのアドレスを入力・ボタンデザインを選択し「Get Code」ボタンをクリックすると、フォローボタンを表示するためのコードが表示されます。

フォローボタンを表示するためのコードが表示

1.のコードを body タグ内のどこかに貼り付け、2.のコードをボタンを表示したい場所に貼り付けるとフォローボタンが表示されます。

「フォローする」を「いいね」に変更する

上記のページで作成した 2. のボタン部分コードの最初に「class=”fb-follow”」とクラスが指定してあります。このクラス名を「fb-like」へ変更します。

クラスを変更

これだけでFacebookページのフォロー機能を持った「いいね」ボタンができます。

いいねボタンへ変更される


「フォローする」よりも「いいね」のボタンの方が馴染みがある方が多いと思うので、「いいね」ボタンのデザインで設置した方が気軽に押してくださるかも?しれませんね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ