スポンサーサイト

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

wordpress サイトトップにソーシャルブックマークを設置する

wordpressで作成したサイトのトップにソーシャルブックマークを設置する方法をご紹介します。

通常、記事ごとにソーシャルブックマークを設置する場合は、プラグインのWP Social Bookmarking Lightを使用する事をおすすめします。
今回は、トップページのに表示するサイト全体に対してソーシャルボタンを設置する方法をご紹介しようと思います。

手順は
1、ソーシャルブックマークを設置するコードを取得する。
2、コードをトップページ用に編集する。
3、編集したコードを任意の場所に設置する。



1、ソーシャルブックマークを設置するコードを取得する。

今回は、私がおすすめする「忍者ツール」にてソーシャルブックマークのコードを作成します。
忍者おまとめボタンにてお好きなボタンを選択してコードを取得してください。
今回はサイドメニューの中に1行で収めたいので小さいアイコンを4つ選択しました。

201506201.jpg

取得したコードは以下の通りです。

<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_524b7f9d446aabe2b883762b30e05e3c)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/524b7f9d446aabe2b883762b30e05e3c'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_524b7f9d446aabe2b883762b30e05e3c.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"><?php the_permalink(); ?></span><span style="display:none;" class="ninja_onebutton_hidden"><?php the_title(); ?></span>
</div>

注意したいのは赤字の部分です。パーマリンクとタイトルに設定しておくとうまく動作しません。トップページに設置しているのに個別記事の内容が表示されてしまいます。
この2箇所のコードを編集していきます。

2.コードをトップページ用に編集する。

2つのコードをそれぞれ以下の様に変更します。
<?php the_permalink(); ?> → http://xxxxsite.jp/ トップページのURL
<?php the_title(); ?> → サイト名

書き換えたコードがこちら

<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_524b7f9d446aabe2b883762b30e05e3c)=='undefined'){
 document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/524b7f9d446aabe2b883762b30e05e3c'><\/sc"+"ript>");
}else{
  window.NINJA_CO_JP_ONETAG_BUTTON_524b7f9d446aabe2b883762b30e05e3c.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;">http://dwcc.blog.fc2.com/</span><span style="display:none;" class="ninja_onebutton_hidden">WEBクリエイターになるための学習</span>
</div>

3.編集したコードを任意の場所に設置する。

サイドメニューに設置するので、wordpressでは sidebar.php内の任意の場所に設置します。

設置が完了したら実際に表示されるか、クリックした際に設定したURLとサイト名が表示される事を確認してください。



PR ベーグルプラス -ベーグル専門ポータルサイト-

スポンサーサイト

ブログ・サイトで、ソーシャルボタンを作成・設置する一番簡単な方法

ブログの記事ごともしくはサイトで
ソーシャルボタンを貼り付ける一番簡単な方法を今日はご紹介します。

201411052.jpg

作業は大きくわけて2つです。
1.コード作成
2.コードの設置


1.コードの作成
ソーシャルサイトと言ってもいろいろなサイトがあります。
Twitter、Facebook、Google+、はてなブックマーク、Googleリーダーなど。

ただし、ひとつひとつサービスごとにコードを取得していたのでは面倒ですね。
これらのソーシャルボタンを一気に設置できるサービスでおすすめなのが忍者おまとめボタンです。

もちろん、そのソーシャルボタンにするか、どの順番で並べるか、アイコンの大きさデザインの種類など豊富に選択できて
無料で、広告もついていなくて簡単です。

あとは、作成したボタンの情報がサイト内で保存されるので複数のサイトを持っている人や、たくさん作る機会がある人はログインすればコードを参照・編集する事が簡単にできて便利です。

作成例)
201411052.jpg

20141105.jpg

忍者おまとめボタン

一度ボタンを登録すれば管理画面から、編集・コードの取得ができ、いつクリックされたかなどの解析機能も付いています。

2.コードの設置

実際にコード作成までできたら、いよいよブログ・サイトに設置してみます。
今回はここのブログでもお世話になっている fc2ブログに設置してみたいと思います。

各記事の下側にソーシャルボタンを設置するにはHTMLを編集していく必要があります。

管理画面の左メニューから「テンプレートの設定」を選択し、HTML編集内で
「entry_footer」もしくは「エントリ footer」という文字を検索します。

これは使用しているテンプレートで差があるため、まったく同じ記載ではない可能性があります。
201411053.png

見つけたら「entry_footer」の下に先ほど取得したコードを貼り付けます。
プレビュー等で確認後、更新ボタンを押します。

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

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