スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Facebook『いいね!』ボタンの作成と設置(FC2ブログ)

Facebookの「いいね!ボタンの作成方法と設置方法(FC2ブログ)、及び注意点について記しておきます。
最近は、殆どのブログで標準機能として「いいね!」ボタンが設置出来る様になっていますが、設置場所とアイコンのタイプは決められています。
設置場所やアイコンのタイプを選ぶなら、御自身で一からアイコンを作り設置してみましょう。


「いいね!」ボタンの作成


type.gif 「いいね!」ボタンには幾つかの種類がありますが、各種SNSボタンを横並びに設置する事を前提とし、よく使われているタイプ2のbutton_count で説明します。




Facebookの《 Like Button 》ページへ行きます。

Like Button - Facebook開発者

ボタン作成画面は英語表記となっていますが、作り方は非常に簡単で、詳しい解説は《 Facebook Guide 》をご覧下さい。
ここでは、ボタン作成時の注意点を記しておきます。

  • URL to Like :ここにURLを入れるのですが、トップページのURLを入れるとトップページから「いいね!」ボタンを押した場合、個別記事のURLやタイトルが抽出されないので、後で書き換える必要があります。更に、ここでブログ等の個別記事用の変数を入力しても、エンコードされてしまいますので注意が必要です。ブログに設置する場合、どっちにしても書き換えが必要ですので、取り敢えずトップページのURLを入力しておきましょう。
  • Send Button :Facebook上の特定の友人に情報提供する為のボタンです。設置はお好みですが、私はサイズ調整の為省きました。
  • Layout Style :上記の様に、タイプ2のbutton_countを選択。
  • Width :Send Buttonを省き、タイプ2のボタンを選択した場合、概ね100~130くらいで良いと思います。(お恥ずかしながら、私の様にそれほど「いいね!」されない場合は97まで縮められると思います)。
  • Show Face :これはタイプ1のみの使用ですので、それ以外を選択すれば有効とはなりません(念のため、外しておきましょう)。
  • Verb to display :ボタンの表示を「いいね!」か「おすすめ」か選択出来ます。
  • Color Scheme :色の選択です。
  • Font :フォントの種類ですが、日本語のフォントはありません。

「Get Code」をクリックすると張り付けコードが取得できます。
今回は、設置が楽な「iflame」形式とします。
赤字の部分にトップページのURLを入力しましたが、URLがエンコードされています(コピペしないで下さい)。

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fresistance6.blog7.fc2.com%2F&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe>


このままでは、トップページからの「いいね!」では個別記事が反映されないので、赤字の部分のみ書き換えます。
下記は、FC2ブログをお使いの方はコピペで使えます。

<iframe src="//www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>


<%topentry_enc_link>
は、FC2ブログ専用の個別記事のエンコードURLを抽出する変数です。
今回は、ボタンの横幅を120pxで作成しました。
いいね!ボタンは、通常は右側に何も無いのですが、「いいね!」されるとボタンの横に吹き出しが出現し、回数が表示されます。
その為、ボタンの大きさは若干余裕を持たせる必要があるのですが、レイアウト的になるべく間隔を空けたくないので、御自身の「いいね!」の回数に応じてサイズ調整して下さい。
2個所のwidthの横の数字で調整出来ます(私の様に、回数が一桁くらいの方は97でも良いでしょう)。


「いいね!」ボタンの設置


既にいいね!ボタンが自動挿入されている方は、機能をオフにします。
機能オフは、FC2ブログの管理画面の【環境設定】の【環境設定の変更】から行います。
画面上部の【ブログの設定】にカーソルを合わせ、記事の設定をクリックし、【Facebook】のところの「有効にする」のチェックを外して下さい。
続いてFC2ブログ管理画面の【環境設定】から、【テンプレートの設定】のHTMLソース内の<!--topentry--> ~ <!--/topentry--> 間の、任意の場所に貼付ければ完了です。
記事ごとに自動でツイートボタンが挿入され、各記事ごとの情報も反映されます。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。

これで「ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法」「ツイートボタン(Twitter公式)をブログに設置する方法」と、3種類のボタンについて書きましたが、次はそれらを横並びに設置する方法を記事にします。

記事下にある様な設置方法です。



>>続きを読む

スポンサーサイト

ツイートボタン(Twitter公式)をブログに設置する方法

Twitter公式ツイートボタンの作成方法、ブログ(FC2)への設置方法と注意点です。
最近では、ブログにツイートボタンを自動で設置出来る様になっていますが、「各種SNSボタンを任意の場所に設置したい」と言う方は、ご自身でツイートボタンを設置してみましょう。
各種ブログサービスにより設定の違いがあるので、ここではFC2ブログへの設置方法とします。

◆ ツイートボタンを作る


Twitter公式サイトの「素材>Twitterボタン」のページに行きます。

Twitter - ツイートボタン作成画面

お好みのボタンを選択します(ここではスタンダードな「リンクを共有する」で解説して行きます)。

【ボタンのオプション】>「URLを共有」>「ページのURLを使う」でも良いのですが、そのままだとトップページに新着記事を複数表示していると、その画面からツイートボタンを押した場合、トップページのURLとタイトルがツイートされます。
トップページからの閲覧でも個別記事のタイトルとURLを反映させたい場合は、直下のテキストボックスに<%topentry_link> と、入力しましょう(FC2ブログ専用の変数で、個別記事のURLを抽出してくれます)。
【ツイート内テキスト】も、同様に個別の記事タイトルを反映させたい場合は、テキストボックスにFC2変数の<%topentry_title> を入力します。
「個別の記事タイトル:ブログタイトル」の様な表示をしたければ<%topentry_title>:<%blog_name> の様に入力します(:の区切りはお好みで)。
【】や『』で括る事や、文字数内でお好きな文章を書き込む事も出来ます。
【数を表示】は、ツイートされた回数を表示するので、必要無い方はチェックを外して下さい。

ここからは自動挿入してくれる部分です(設定するかはお好みで)。
【ユーザー】の所は、ツイッターIDを入力すると「@optima_jpさんから」と文末に挿入されます。
これにより、ツイートしてくれた方からリプライされる形になります。
【推奨】は、オススメのユーザーIDを(ツイート後に「~さんがあなたにフォローする様にお奨めしています」などの表示がされる)、【ハッシュタグ】は、お好きなタグを自動挿入出来ます。

【ボタン大】も、お好みで・・・。
【言語設定】は、各国のボタンの表示文字です。

右側のデモボタンで確認し、テキストをコピーして貼付けるだけです。

FC2ブログでそのまま使えるソースです。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title> 【<%blog_name>】" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

data-textのところの<%topentry_title>はFC2ブログの変数で、個別記事のタイトルを抽出してくれます。
半角スペースを入れて、ブログタイトル(FC2ブログの変数で赤字部分)に【】を付けています。
【】を外して適当な区切りを入れるなり、ブログタイトル自体を外したり、お好みでご自由な文章を書き込んだり出来ます(このまま使うと、下記の様になります)。
個別記事タイトル 【ブログタイトル】 個別記事URL


◆ ツイートボタンの設置


まず、既にツイートボタンが自動挿入されている方は、機能をオフにします。
機能オフは、FC2ブログの管理画面の【環境設定】の【環境設定の変更】から行います。
画面上部の【ブログの設定】にカーソルを合わせ、記事の設定をクリックし、【Twitter】のところの「有効にする」のチェックを外して下さい。
続いてFC2ブログ管理画面の【環境設定】から、【テンプレートの設定】のHTMLソース内の<!--topentry--> ~ <!--/topentry--> 間の、任意の場所に貼付ければ完了です。
記事ごとに自動でツイートボタンが挿入され、各記事ごとの情報も反映されます。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。


前回の『ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法』と、今回の『ツイートボタン』に続き、『いいねボタン』とそれらを横並びにする方法も、次回以降に記事にします。
このブログの記事下の様な設置方法です。




>>続きを読む

ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法

ブログの記事ごとに「はてブ」(はてなブックマークボタンを、任意の場所に設置する方法のご紹介です。
記事下に、FC2ブログ用のコピペで使えるソースも記しておきます。
最近は、各社ブログに各種SNS(ソーシャルネットワークサービス)ボタンを設置する機能が備わっていますが、それらの機能で設置したボタンは、予め決められた位置に挿入されてしまいます。
更に、ブログの方でサポートされていないボタンを自身で追加すれば、ボタンは横並びにならずに改行されてしまいます。
SNSボタンを任意の場所に横並びに設置する事を前提に、まず、「はてブ」ボタンを設置してみましょう。

ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置


(設置方法は、FC2ブログ用のものですが、ボタン作成方法は共通です。)

  1. まずブログのサービスの、ボタン設置機能をオフにします。
  2. ボタンを作ります。
  3. ブログのhtmlやcssを書き換えます。

1番の機能オフは、FC2ブログの管理画面の『環境設定の変更』から行います。(現在FC2ブログでは「はてブ」ボタンのサービスはありませんが、場所の確認だけでもしておいて下さい。)
『環境設定』画面上部の『ブログの設定』にカーソルを持って行き、その中の『記事の設定』の中に各種ボタンの設定項目があります。
ここからボタンの設置のオン・オフを決められます。

2番のボタンの作り方です。
はてなブックマークボタンの作成・設置について 』のページで簡単に作れます。

はてなフ#12441;ックマークホ#12441;タンの作成・設置について

ご自身のブログのURLやブログタイトルを記入し、ボタンのタイプを選択するだけです(ココではスタンダードタイプで説明します)。

このエントリーをはてなブックマークに追加 <トップページ用のデモボタン>(コピペしないで下さい)

<a href="http://b.hatena.ne.jp/entry/http://resistance6.blog7.fc2.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="SECTION・9-2nd" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ただ、このまま貼付けるとURLもタイトルもトップページのもの(記入したもののみの出力)となってしまい、個別の記事のものとはなりません。
なので、URL、タイトル(赤字)のところを個別のもの用(FC2ブログの変数)に書き換えます。
URLのところを<%topentry_link>とし、タイトルのところを<%topentry_title>とします。

<個別記事用のボタン>は、各記事下のボタンをクリックしてみて下さい。

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

※FC2ブログをお使いの方は、上記をこのままコピペで使えます。
これで個別記事のURLと記事タイトルが出力されます。
< > は、ボタン作成ページで入力すると文字化けしてしまいますので、書き換える必要があります。
記事タイトルの前後にブログタイトルも入れたい方は、<%topentry_title>の前後に<%blog_name> を/や : などで区切って入れれば、同時にブログタイトルも抽出出来ます。

3番目は【テンプレートの設定】のhtml編集画面から、<!--topentry--><!--/topentry-->間の任意の場所に記述すれば、自動で各記事ごとにブックマークボタンが表示されるので便利です。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。


これはFC2ブログ用の記述法ですが、トップページ用のボタンの作成方法は各ブログ共通です。
次回から、「ツイートボタン」「いいねボタン」の設置方法と、横並びに設置する方法をご紹介したいと思います。

このブログの記事下の様な感じの設置方法です。



>>続きを読む

FC2ブログで個別記事ごとにメタキーワード(meta name="keywords")を変更する方法

SEO対策の一つとしてFC2ブログカスタマイズする事で、メタキーワードmeta name="keywords")をユーザータグと同期させ、各記事ごとにキーワードを変更する事が出来ます。

余程ニッチキーワードで、単一テーマでブログ記事を書いている方には必要が無いのかもしれませんが、手を加えておいて損は無いと思います。
FC2ブログには様々な変数が用意されていますので、これを用いて各記事ごとに好きなキーワードを挿入する事が出来ます。
ユーザータグをメタキーワードとする事で、キーワードの重複を回避する事ができます。
metaキーワード設定は、その昔、関係の無いキーワードからも検索される様にとスパム行為が続出した事から、現在ではあまり意味が無いとも言われていますが、設定しておいて損は無いと思います。


FC2ブログで個別記事ごとにメタキーワード(meta name="keywords")を変更するソース



※テンプレートにより、メタキーワードタグが記述されている場合、記述されて無い場合があります。
バックアップをとってからカスタマイズする事をお奨めします。

まず、【テンプレートの設定】のHTML編集を見ます。
htmlの記述の中の<head>~</head>間に

<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />

と言うタグがあるか確認します。
タグがなければ、新たに下記全文を追記します。
タグが書かれていれば、下記赤色部分のみ追記し、

<!--index_area--><meta name="keywords" content="キーワード1,キーワード2,キーワード3" /><!--/index_area-->

とします(キーワード1、2、3の所は任意のキーワードで、5~10個くらいまでが良いとされています)。
これがブログのトップページ用のタグとなります。

次にその下に個別記事用の

<!--permanent_area-->
<meta name="keywords" content="<!--topentry--><!--tag_list--><%topentry_tag_list_name>,<!--/tag_list--><!--/topentry-->" />
<!--/permanent_area-->

を追記します。
ブログの記事を書く画面の下の方の、ユーザータグの所に任意のキーワードを入れると、そのキーワードが個別記事のメタキーワード(meta name="keywords")として反映されます。
一度キーワードを設定した後も、変更が容易です。


SEO対策上メタタグを重要視しないと考え、メタキーワード設定は意味が無いとも言われていますが、おかしな対策でマイナスになる事はあっても、スパム行為を理解(設定するキーワードを、記事の内容と大幅に違う物を設定する行為など)した上で対策した事が、マイナスになる事は無いと思います・・・。













※TVゲームランキング

>>続きを読む

サイト(ブログ)を開設したらGoogleにサイト登録をしよう

検索サイト大手のGoogleサイト(ブログ)を登録(Google に URL を追加)する方法をご紹介します。

ブログを含むサイト開設して間もない頃や、コンテンツが充実していないと、検索結果に自分のサイトが中々表示されません。
コンテンツンの充実、更新を重ねれば良い事なんですが、それでも運が悪ければ数ヶ月登録されない、なんて事もあります。
特にブログなどは簡単に始められる事から、開設したは良いものの何を書いてよいのか?迷いながら数回更新してみても、訪問者も無くそのまま放置してしまう・・・なんて事も多いと思われます。

ブログなど書き始めて間もない頃に、訪問者がそこそこ増えたりコメント頂いたり、何かしらアクションがあるとモチベーションが一気に上がり記事を書くにも励みになりますし、巷でよく言われるSEO対策と言う意味でもサイトの登録をしてみましょう。
少しでも早く「自分がここでサイトを開設したよ!」ってGoogleに知らせる方法があります。


サイト(ブログ)を開設したらGoogleにサイト登録をしよう

まずGoogleの検索窓に御自分のサイト(ブログ)のURLや、書いた記事のタイトルをそのまま入力して検索してみましょう。
検索結果に表示がされれば、Google側で検索ロボットによりいつの間にか登録されているんですが、検索結果に該当が無いと、サイト自体が知られていないということです。
その場合【Google に URL を追加】から自サイトを登録しましょう。
数日で登録されるはずです。(現在ではYahooにも効果があると思われます。)
後はコンテンツを充実させ頻繁に更新し、記事を書く時の注意点サイトの構成等々、クローラー(検索ロボット)好みに仕上げて行く事で検索サイトからの御自分のサイトの価値が上がり、検索上位に
表示される様になります。(とは言っても個人サイト、特にブログの場合限界もあるので複合キーワードでの検索になると思いますが・・・。)

長く続けていれば自然に登録されるものなんですが、少しでも早く登録したい方は、サーチエンジン一発登録「一発太郎」というのもあって、各種検索サイトに一気に登録できます。

記事の更新を知らせる意味でのPing送信もありますが、こちらはまたの機会に・・・。

「私のサイトはここだよ!」って知らせる意味でも、Googleにサイト登録してみましょう。



ネットでお買い物をするときお得なカードは!?ポイントが貯まりやすいカードを探すなら比較.com




※TVゲームランキング

>>続きを読む

| NEXT≫

PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。