ガジェニュー

~iPhone・格安スマホとか~

【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

       後で読む

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズもし易いというチートな2つのWordPressテーマの「Gush2」「STINGER5」に代表的なSNSボタンを付けたのでその備忘録です。

今回は、SNSボタン部分の構造がほぼほぼ一緒ということでまとめちゃいました。

ということで早速やっていきます。

SPONSORED LINKS

【STINGER5】と【GUSH2】にfeedly・Poket・LINEで送るボタンの追加設置をする

なぜ追加をしようかなぁと思ったかというと、最近だとSNS・つまりソーシャルからのアクセスがもはや無視できないものになってる背景がありますね。自分のサイトにも少ないながらアクセスがあるのであ、設置しておこう。と思った次第です。

とうことで、今回は「feedly・Poket・LINEで送るボタン」の3つを追加する方法についてメモしていきたいと思います。

Poketのボタンの取得

cap-1Poketに関してはこちらよりお好きなタイプのボタンを選択して、下記に生成されるコードを埋め込むだけです。

埋め込みに関しては後ほどまとめてやるのが効率が良いのでこちらで取得したコードをメモ帳にでもペタリとしておきましょう。

feedlyのボタンの取得

単純にフォローするためのボタンを設置するだけなら全然難しくはないので見て行きましょう。cap-2
デザインを選択して、自分のサイトのURLを入力しされたコードを取得します。ボタンの設置だけですとこれだけでもOKなのですが、他のボタンとデザインを合わせたい場合はfeedlyの購読数を取得してこなくてはなりません。

ということで私はこちらのサイトを参考にさせて頂きました。非常にわかりやすかったです。ありがとうございます。

で、この状態になれば準備はOKです。

<?php
if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
    $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
 
    $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
 
    // 負荷軽減のため半日キャッシュする(数値はお好みで)
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
endif;
?>
<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
//この部分に先ほど生成されたコードを貼り付けましょう。

コードの貼り付けは後ほど。としましょう。

LINEで送るボタンの取得

LINEで送るボタンに関しても大して難しく有りません。
cap-3
こちらのサイトから、ボタンの画像と、設置のためのコードをいただきます。今回はWordPressのテンプレートに埋め込みますのでそちらを選択。画像に関しては一番下のダウンロードボタンから保存してください。

今回は36*60のサイズの画像を使いましたのでコードはこんな感じになります。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ここに画像をUPしたURLを記載]" width="36" height="60" alt="LINEで送る" /></a>

画像に関してはメディアからアップしてもいいですし、FTPでフォルダに入れてもいいと思います。

以上で3つのコードの取得に関しては終わりましたので、設置に移っていきます。

feedly・Poket・LINEで送るボタンの設置

編集するのは下記のファイルです。

  • STINGER5 「sns.php」と「sns-top.php」
  • GUSH2   「sns.php」

基本的に追加したい、SNSのボタンを<li></li>タグで囲んで,<ul></ul>のくくりの中に入れてあげるだけです。構造自体はかなりシンプルでした。クラスの名前とかがちょっと違ったりするはずです。下記のサンプルのコードは「Gush2」のものです。

<div id="entry_snsbox"><!--SNS-->
<ul class="clearfix">
   <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a></li>
   <li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe></li>
   <li><div class="g-plusone" data-size="tall"></div></li>
   <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" 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></li>
   <li><a href="https://getpocket.com/save"
      class="pocket-btn"
      data-lang="en"
      data-save-url="<?php get_permalink(); ?>"
      data-pocket-count="vertical"
      data-pocket-align="left" >Pocket</a>
      <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></li>
<li>ここに貼る</li>
<li>ここに貼る</li>
</ul>
</div><!--//SNS-->

新しく追加するボタンは<li></li>タグで囲んで貼り付けて保存しましょう。

ちなみに今回追加したのは下記のボタンです。

  • STINGER5 Pocket・feedly・LINE
  • GUSH2  ?feedly・LINE

あとは表示を確認してちゃんと表示されているか確認しましょう。また、この状態だとfeedlyの表示が崩れていると思いますので下記のCSSを追加しました。こちらのサイトからをまるごとお借りして少しだけ加工しました。

ということでこちらをstyle.cssに記載していきます。

/* 購読者数つきFeedlyボタン */
#feedly-followers {
    display: block;
}
/* 購読者数の表示部分 */
#feedly-count {
    margin-bottom: 6px;
    width: 55px; //ここが吹き出しの幅でこの部分を微調整
    height: 31px;  //吹き出しの高さ
    background-color: #FFF;
    position: relative;
    border: 1px solid #669966;
    border-radius: 4px;
    padding: 0 4px;
    font-family: Arial;
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    display: block;
  background: white;
}
/* 購読者数吹き出し部分 */
.fdly-count:after,
.fdly-count:before {
    border: solid transparent;
    content: ' ';
    right: 43%;
    position: absolute;
}
.fdly-count:before {
    border-width: 5px;
    border-top-color: #B0C1D8;
    top: 32px;
}
.fdly-count:after {
    border-width: 5px;
    border-top-color: #FFF;
    top: 30px;
}

以上で完了です。そのままソースコードを使ったらちょっとだけ吹き出しが大きかったので調整しています。

先人たちの知恵は偉大ですなぁ。
LINEで送るは若年層向けのメディアだと必須なのかなぁと思いますのでぜひ導入してみては。

追記です。————–
「Gush2」でなぜがLINEを送るボタンだけがかなり小さくなる現象が。。

#article_body #entry_snsbox li {
	float: left;
	margin-right: 10px;
	min-height: 100px;

どうもこの部分が悪さをしているみたいだけど。。

無理やりwidth;を広げてあげると画像の大きさは変わってくれます。
表記上はてなと同じような表記なのでなぜこうなるか不明です(自分のレベルじゃ特定できない)

ということで、メインのスマホ閲覧が問題ない形にして無理やり終わらせました。
解決策あれば教えていただければ助かります。
————–

てな感じで。

 - Gush2, STINGER5, WordPress , , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です