さくらのブログ (Seesaaブログ) に「いいね!ボタン」を設置する方法

さくらのブログは、Seesaaブログをベースにしているので、Seesaaブログベースのブログシステムであれば、同様の方法で設置できる。

設置には、「いいね!ボタン - ソーシャルプラグイン」を使用する。なお、使用にはアプリIDが必要になるので、事前に取得しておく。Facebook開発者 - 開発者向けFacebook の「新しいアプリを追加」で取得できる。

2016041514:21:05_001.png

次に、いいね!ボタン - ソーシャルプラグイン で設置タグを取得する。

2016041514:01:41_001.png

ステップ 1: アプリIDと言語を選択する。
ステップ 2: コードを ”<body> タグ” の直後に配置する。
ステップ 3: コードを ”表示したい場所” に配置する。但し、コードを改変する必要がある。

<div class="fb-like" data-href="<% article.page_url %>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

※URLの部分を、個別記事URL「<% article.page_url %>」に置き換える。

実際の設置コードは、↓ のようになる。ここでは、個別記事のときだけボタンを表示する。

<!-- 個別記事のときだけ Facebook の いいね!ボタン を設置 -->

<% if:page_name eq 'article' -%>

<div class="fb-like" data-href="<% article.page_url %>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

<% else -%>
<% /if -%>

さくらのブログでの具体的な設置方法に関し、「ステップ 2」は [デザイン> PC> HTML] から、「ステップ 3」は [デザイン> PC> コンテンツ の ”記事” → ”コンテンツHTML編集”] から編集する。 ↓

2016041515:40:39_001.png

スマホの場合はHTML編集ができないので、自由形式コンテンツ (ボタンは ”インラインフレーム” で設置) を追加して対応することになる。

admin
カテゴリ:ブログサービス
2016/04/15 15:29 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ