ハイリンクス

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

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

関連記事

140105_2201
【WordPress】画像をアップロードし記事に貼り付ける方法!

WordPressに画像をアップロードして記事に貼り付ける方法をご紹介しておきま …

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

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

140110_1801
【Mobilizer】スマホ表示をPCで確認できるフリーエミュレーターソフト

Mobilizerはスマートフォンで表示されるサイトをパソコン上で簡単に確認でき …

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

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

131229_2001
【Buffer】ブログ記事を指定した日時に予約・自動投稿してくれるサービス

Bufferは運営しているブログ・サイトの更新記事を指定した日時に予約・自動投稿 …

medium_6040687408
サーバーを使用してWordPressをドメインに自動インストールする方法

サイトを運営するにあたってWordPressというのはとても優れものです。無料ブ …

medium_8663075893
WordPressの記事公開前に「いいの?」と警告メッセージを表示する方法

WordPressでサイト・ブログを作成しているなら一度は経験したことがあるあれ …

131212_2138
WordPressのコメント欄をカスタマイズ!メルアド・サイト項目を削除

WordPressのデフォルトのコメント欄って要らない項目を削除することが素人に …

131129_2201
【zenback】サイトへのアクセス数がアップ↑する魔法のブログパーツ

zenbackはサイト・ブログの記事下・サイドバーに設置することで、関連記事やソ …

131209_2011
【Sharebar】ソーシャルメディアボタンがスクロール追従するWordPressプラグイン

Sharebarはサイトの左右や下辺りにソーシャルメディアボタンがカタマリになっ …