ハイリンクス

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などの動画を記事に貼り …

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

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

medium_3008912290
WordPressをインストールしたら絶対行なうべき6つの設定変更!

お名前ドットコムやムームードメイン、バリュードメインなどのレジストラでドメインを …

medium_5598172
WordPressでの記事の投稿方法を簡単にまとめました!

WordPressでの記事投稿方法をご説明していきます。 今まで無料ブログで記事 …

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

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

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

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

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

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

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

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

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

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

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

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