WordPressテーマ「CUBEY (tcd023)」
 

【賢威6.1】Sharebarを設置する方法

賢威sharebar設置

賢威6.1にプラグインのShrebarを設置する方法です。

Sharebarは好きなソーシャルボタンを追尾するワードプレスプラグインです。

有効化した後にカスタマイズすることで機能します。

賢威6.1にSharebarを設置&カスタマイズ

賢威sharebarプラグイン

ダッシュボード → プラグイン → 新規追加で、検索窓に「sharebar」と入力します。

いますぐインストールをして、有効化します。

賢威Shrebar設定1

ダッシュボード → 設定 → Sharebarを選択。

Sharebarのトップ画面が表示されます。最初に不必要なソーシャルボタンにチェックを入れて、「Delete」を選択、Updateします。

賢威sharebar設定2

ツイートとFacebookのイイネだけになりました。これにはてなブックマークと、Google+1ボタンを追加します。

はてなブックマークボタンを追加する

賢威にはてなブックマーク設置

はてなブックマークボタンの設置ページで、ボタンタグを生成します。

サイトURL、ページタイトル、ブックマーク数は「バーティカル」に、表示言語は日本語にします。タグは自動生成されます。

賢威Sharebar設定3

はてブのページをそのままにしておき、Sharebarの設定に戻ります。
Add New Buttonを選択。

賢威Sharebarにはてブボタン設置

先ほどのはてブタグをBigButtonの欄にコピペします。Nameは「hatena」、Positionは3で良いと思います。(←ここは適当でOKです)
最後に「Add Button」をクリック。

Google+1ボタンを追加する

賢威SharebarにGoogle+1ボタン設置

はてブと同じ手順でGoogle+1ボタンも設置します。

タグはGoogle+Platformで生成します。

sizeはtall、Annotationはbubbleが一般的です。生成されたタグをSharebarに貼り付けて、「Add Button]をクリックします。

賢威Sharebar有効化

4つのボタンが出来上がりました。チェックを入れて「Enable」にし、Updateします。

賢威6.1Sharebarのスタイル調整

これでボタンの追加が完了しました。このままだと枠が欠けたままになっているので、最後に幅などのスタイルを調整します。

賢威Shrebar幅調整

Sharebarの設定画面上部の「Setting」クリック。

賢威Sharebar幅調整

  • Sharebarのポジションを左右どちらか設定します。
  • Sharebar Widthの値を100にします。
  • Twitterのユーザーネームを入力します。

終了したらUpdate Settingをクリック。

賢威Sharebarフェイスブック設定

次にSharebar設定画面で、Facebookの行の「Edit」をクリック。
widthの値を70に変更します。

最後に賢威のCSSを調整

最後に賢威のCSSを調整します。

ダッシュボード → 外観 → テーマ編集 → design.cssを選択。

#main iframe.twitter-share-button{ width: 100px!important; }

上記の部分を探しだして、widthの値を85pxに変更します。賢威デフォルトのソーシャルボタンを使用しないのであれば75pxでも大丈夫です。

最後にファイルを更新してください。

賢威6.1にSharebar設置完了

なにか個別の記事を見てみましょう。記事横にSharebarが表示されています。ボタンの順序や枠の背景色等は、Sharebarの設定画面で変更出来ます。

最初はキャッシュが働いてCSSの変更が反映されないかもしれません。その場合、何か1つ記事を適当に更新して、再読み込みを連打してください。

以上、賢威6.1にSharebarを設置する方法でした。

Pocket

WordPressテーマ「CUBEY (tcd023)」 
 

Sponsored Link

WordPressテーマ「BlogPress (TCD010)」

コメントを残す

このページの先頭へ