ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

Sharebar不要!スクロール追従するソーシャルメディアボタンを実装する方法

   

131220_2101

サイトを拡散させるためにソーシャルメディアボタンを使用するのはもはや当たり前の時代になってきました・・・よね?

基本的にはソーシャルメディアボタンは記事下にあって、「クリックしてくれーーー拡散してくれーーーー」という具合にアピールしていますが、より多く拡散を希望するならサイトの脇にあるとなおいいです^^

スポンサーリンク

 

WordPressではSharebarという優れたプラグインがあり、サイトの脇にソーシャルメディアボタンが表示されるようになります。しかもスクロールしたら付いてくる・・・まさにストーカー!!

今回は、Sharebarなしでソーシャルメディアボタンたちをサイトに実装する方法をご紹介します。ちなみにボタンはhorizontalではなくverticalタイプです。

 

 

 

ソーシャルメディアボタンを用意する

使用するソーシャルメディアボタンを用意しておきましょう。ここでは一般的な6つを実装してみます。

 

facebook share

 

facebook いいね!

 

twitter

 

google plus

 

hatena bookmark

 

Pocket

 

 

 

phpファイルに保存する

これらのコードをdiv属性、ul属性、li属性でまとめましょう。

 

最終的にこういったコードになります。

 

このコードをphpフォルダに保存して、こちらの記事にあるようにsingle.phpと同じディレクトリに保存しましょう。
WordPressでソースコードをファイル毎に分けて管理する方法!

 

 

 

CSSで調整する

stlye.cssに下記のコードを入れましょう。

自分のサイトに合わせて数値などをいじってみましょう!

 

 

 

サイトに反映(実装)させる

すべての用意が完了したら・・・

このコードをsingle.phpにぶっこみましょう!分かりやすいように一番下がいいかと思います。

そうすると・・・こうなります!!!

131220_2001

サイコーでございます!見事にSharebarなしでスクロール追従するソーシャルメディアボタンを作成することが出来ました!

このときもしボタンの上下が詰まっていたり空いていたら下記のコードをソーシャルメディアボタン用のphpファイルに入れておきましょう。

 

 

 

まとめ

ソーシャルメディアボタンをSharebarなしでサイトに実装する方法をご紹介させて頂きました。この方法ができると記事下にあるボタンの実装も出来るようになりますので是非ともやってみてください(一応、作成方法を記事にしてみましたが・・・)。

コレ以外のボタンを導入したい場合は<li>属性を使用すればどんどん追加できるので、Lineボタンを入れたい!やFeedlyボタンを入れたい!ってことが可能です。

 

 

 - SNS, WordPress


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

Message

メールアドレスが公開されることはありません。

関連記事

medium_4167966264
初心者さん必読!サーバー契約から記事投稿(WordPress)までの流れ

ウェブサイトを全く作ったことがない人にとっては何から始めていいのか?わからないこ …

medium_2536017020
無料ブログではなく独自ドメイン(WordPress)を使用する意味!

初めてブログを運営する。こう考えたときに頭に思い浮かぶことはFC2やseesaa …

141122_2101
Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont …

131223_2301
WordPressのRSS feedがエラー表示されているときの対処法!

当サイトではRSSフィードとIFTTT(イフト)を連携させてTwitterとfa …

medium_9044771759
WordPressのビジュアルリッチエディタとテキストエディタが表示・使用できないときの対処方法

この記事を書く一つ前の記事にてビジュアルリッチエディタとテキストエディタがまった …

131206_2304
【Recommendation Bar】いいね!の多い記事が表示されるfacebook公式プラグイン

Recommendation Barは表示されている記事の下に、いいね!が押され …

131125_2201
hootsuiteでWordPressの更新記事をGoogle+ページに自動で投稿する方法

WordPressの更新記事をGoogle+ページに自動で投稿する方法をご紹介し …

140105_1903
Google Analytics(アクセス解析)をWordPressに導入する方法!

サイトを運営するにあたってアクセス解析は必ず導入しておきましょう。いつ誰がどんな …

medium_192635773
Stinger3で記事中に広告やTwitterを入れスマホで見ると半分に切れているのを直す方法!

WordPressのテーマでStinger3を使用しているユーザーさんは今ではか …

140416_2101
WordPressでカテゴリーごとに広告表示を切り替える条件分岐タグのやり方

WordPressで広告を掲載しているんだけど、カテゴリーによってはマッチしない …