ハイリンクス

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

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

関連記事

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

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

131221_1302
Vertacalタイプ(箱型)のソーシャルメディアボタンをプラグインなしで実装する方法!

サイトにソーシャルメディアの共有ボタンがあるとないとでは記事の拡散にかなりの違い …

medium_2797544238
ping送信先一覧!生きてる・効果があるURL20個をご紹介!

突然ですが・・・pingを送信していますか? まぁ正直ping送信したからアクセ …

140105_1803
WordPressにテーマ(テンプレート)をインストールする方法!

WordPressの初期インストールされているテンプレートってちょっとだけ見栄え …

131205_2221
【IFTTT(イフト)】WordPressプラグイン不要でTwitterやfacebookに自動投稿する方法

IFTTTは「If This Then That」ということだ!・・・まったく意 …

140104_1901
WordPressのパーマリンク設定において最適でオススメな形は?

WordPressをインストールして最初に行なう設定の1つとしてパーマリンクの設 …

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

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

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

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

141118_1904
エックスサーバーからワンクリックでWordPressの表示速度が高速化!

はてブをチェックしていたらこんな記事を発見しました。 レンタルサーバーの速度向上 …

140319_2202
これだけ?.htaccessに3行コードを追加するだけでWordPressが高速化!

ボクのサイトは記事数がまだまだ100ページと少なく、画像もTinyPiNGやJP …