ハイリンクス

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_2301
【WordPress】YouTubeやデイリーモーションの画像を記事に貼り付ける方法!

WordPressにYouTubeやDailymotionなどの動画を記事に貼り …

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

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

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

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

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

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

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

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

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

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

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

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

131110_2301
プラグインなしでmoreタグ部分にアドセンス広告を挿入する方法

Google AdSenseの配置でクリックされやすい効果的な配置場所として「記 …

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

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

140419_1704
WordPressで記事ごとに広告表示・サイズを切り替える方法

前回コチラの記事で WordPressでカテゴリーごとに広告表示を切り替える条件 …