【最適化】スマホ用に記事のSNSシェアボタンを追加しました 【LINEやFeedlyも】

このエントリーをはてなブックマークに追加

記事をシェアするためのSNSボタン群をスマホから見ると、崩れていて気持ちが悪かったので、この部分をスマホ最適化してみました。

SNSシェアボタンといったら忍者ボタン!

今回、利用したのはこちらの記事でも紹介した忍者おまとめボタン
詳しい使い方はこちらを参考にしてくださいね。
【ブログ】SNSシェアボタン設置に迷ったら「忍者ボタン」を使えばいいと思う

スポンサーリンク

今回も好きなSNSボタンを選択するだけの簡単な作業

忍者おまとめボタンTOPページから
スマホ用に記事をSNSシェアするボタンを設置
「新規ボタンを追加」をクリック。
あとは、こちらの画面から
スマホ用に記事をSNSシェアするボタンを設置
スマホ用の小さいSNSアイコンを選ぶだけです。

Feedlyボタンを作成する時は注意!

Feedlyボタンを作るとき、フィードのURLを求められるのですが、ブラウザのアドレスバーに表示されているURLをコピペするだけだと、うまくいきません。
なので、赤線を引いた「http」以降の文字列
スマホ用に記事をSNSシェアするボタンを設置

「%2F」を「/」に
「%3A」を「:」に変換してURLを渡してあげてください。
私の場合だと、

http://feeds.feedburner.com/laugh-raku/EUHl

になります。

あとは「プレビュー&コードを取得する」をクリックしてTOPページに戻り、
スマホ用に記事をSNSシェアするボタンを設置
「コード」ボタンを押し、表示されたコードをコピーしてブログの挿入したい部分に貼付けるだけ。

スポンサーリンク

スマホとPCで表示を分ける

あとはスマホとPCで表示を切り替えるだけです。
これはwp_is_mobile関数を使えばOK。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<!-- ここにスマホ用のSNSボタン -->
<?php else: ?>
<!-- ここにPC用のSNSボタン -->
<?php endif; ?>

これでスマホで見た時にきれいにボタンが表示されます。
スマホ用に記事をSNSシェアするボタンを設置
いいですね。

まとめ

・スマホ用に記事のSNSシェアボタンを用意するときも忍者おまとめボタンが便利
・スマホとPCの表示切り替えはwp_is_mobile関数で
・SNSシェアボタンもスマホ最適化していこう

WordPressのカスタマイズなら

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!