WordPressのサイドバーにシンプルなSNS&feedlyフォローボタンを作成する方法

シンプルなフォローボタンを作製

ブログのサイドバーにSNSのシンプルなフォローボタンを作成してみました。

こんなやつです。

サイドバーフォローボタン

設定してみたら思った以上に簡単だったのでご紹介です。Wordpressのウイジェット部分に簡単にSNSフォローボタンを追加することができます。あと、SNSではないですがRSSフィード用にfeedly購読ボタンも作成します。

photo by chollingsworth3

スポンサーリンク
レクタングル(大)広告

プラグイン「Social Media Widget」のインストール

まずWordpressに「Social Media Widget」プラグインをインストールしま す。

「プラグイン→新規追加」から「Social Media Widget」を検索してインストールします。

Social Media Widgetの検索

プラグインでの設定項目はありません。

Social Media Widgetインストール後

ウイジェット画面でソーシャルボタンの設定

「外観→ウイジェット」画面にて「Social Media Widget」をドラッグ&ドロップして表示させたい位置に移動させてください。

ウイジェット画面

タイトルの設定

「Social Media Widget」が表示されている右上の▲を押してドロップダウンさせ、まず「Title」を設定します。

Social Media Widgetのタイトル設定

アイコンサイズの設定

16px、24px、32px(Default)、64px、Customの中からアイコンサイズを設定します。このブログの場合は、Customにして92pxに設定しました。

Social Media Widgetのアイコンサイズ

SNSのURLの設定

「Social Networking」左横の▼をクリックしてドロップダウンさせ、SNSのURLを入力します。Google+など、その他のSNSがある場合はURLを入力してください。

Social Media WidgetのSNS URLの設定

これでSNSの設定は完了です。

保存ボタン

ここで一旦「保存」ボタンから保存してください。

feedlyボタンの追加

ブログ購読料にfeedly購読ボタンの設定もします。

feedlyアイコンの準備

feedlyボタンを設定するにはアイコンが必要です。僕がfeedly. your news. delivered.の素材から作ったのでよければ、お使いください。クリエイティブ・コモンズのものならば、feedly PNG_easyicon.netからもダウンロードできます

feedly-icon

アイコンをメディアにアップロード

「メディア→新規追加」からアイコンをメディアにアップロードします。アップロードが終わったら「編集」をクリックします。

アイコンをドラッグ&ドロップ

「メディアを編集」画面が表示されるので、「ファイルのURL」をメモか何かに控えておきます。

コピーしてメモしておく

feedlyフォロー用のURLを取得する

次にfeedlyをフォローするためのURLをからfeedly. your news. delivered.取得します。

どれでもいいので適当なアイコンをクリックします。適当なアイコンをクリック

あなたのブログのフィード(RSS)のURLを入力します。

feedly URLの入力

HTMLタグが生成されるので、feedlyフォロー用のURL部分だけをコピーしてメモしておきます。

feedlyのフォロー用のURLをコピーしてメモしておく

Social Media Widgetでfeedlyの設定

「外観→ウイジェット」画面にて「Social Media Widget」画面から再び設定行います。

「Custom Services」の項の左にある▼をクリックしドロップダウンして「サービスの名前」と「先程メモしたアイコンのURL」と「先程メモしたfeedlyフォロー用のURL」を入力します。

カスタム設定

最後に保存して設定は完了です。

保存ボタン

まとめ

「feedlyアイコン」と「feedlyフォロー用URL」の設定だけ多少ややこしいかもしれませんが、すべてWordpress上で設定できるため思っていたよりも簡単でした。