男のガレージ、カメラや自転車など GARAGE-M > WordPress > サイト運営 > WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

wordpress

プラグイン「WP Social Bookmarking Light」はインストールしているのですが、今使っているテーマのトップページは記事などを設定していないので、個別にソーシャルメディアやブックマークの共有ボタンを設置する必要がありましたので、せっかくならばと思い、SNSのボタンのソース取得方法をまとめてみました。

これらの「facebook(フェイスブック)いいねボタン」「twitter(ツイッター)ツイートボタン」「google+1(グーグルプラス)ボタン」「はてなブックマーク」のソース取得方法にしますね。

 

さて、各ソーシャルメディアやブックマークに共有するボタンソース取得と設置方法ですが、このサイトは「wordpress」で構築しているのでプラグインを使用すれば簡単なのですが、プラグイン「WP Social Bookmarking Light」をインストールしていますが、そのプラグインの設定上で手の届かないところは個別に設置しないといけないわけです。

 

「facebook(フェイスブック)いいねボタン」ソース取得

まずは、「いいね!」ボタンを設置するためのソースコードを発行するページのFacebookデベロッパーズにアクセスしましょう。

プラグインのコード発行ページ

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

今回は「Like Button」のソースコードを取得したいので、クリックします。

また、「Send Button」や「Follow Button」も、ここから取得することが可能ですよ。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

さて、「Like Button」をクリックするとこのページに移動するわけですが、必要に応じて入力し選択します。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

サイトのURLを入力します。

Send BUtton:「いいね!」の横に「送信ボタン」も付けたい場合はチェックします。

Layout Style:レイアウト選択になります。
standard:テキストをボタンの右に表示して、友だちの写真を下に表示します。※最小の幅「225px」、デフォルト幅は450pxです。 写真なしの高さは「35px」で、写真がある場合は高さは「80px」です。

button_count:「いいね!」を押された数をボタンの右側に表示します。「最小幅は90px」で、デフォルトの幅は90pxで、高さは20pxです。

box_count:「いいね!」を押された合計数を、「いいね!」ボタンの上に表示。「最小幅は55px」で、デフォルトの幅は55pxで、高さは65pxです。

:上記を参考にしてみて下さいね。

Show Faces:プロフィール写真を表示させるかの選択です。

Verb to display:ボタンに表示させたいテキストを選択します。

 

以上の設定が終わったら、「Get Code」をクリックします。

この様に、ソースコードが取得できます。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

ちなにみ私は、チョンボしてすべてのページに表示されてしまいますが、「ウィジェット」を使っちゃいました(笑)

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

 

「twitter(ツイッター)ツイートボタン」ソース取得

「twitter(ツイッター)ツイートボタン」のソースコード取得を下記のページから行います。

ソースコード取得ページ

「ボタンの選択」をしましょう!

一般的には「リンクを共有する」ですよね。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

次に「ボタンのオプション」の設定になります。

特に解釈が難しいところはないですね。

入力が終わったら、赤枠内のソースコードをコピーすれば完了です。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

 

 

「google+1(グーグルプラス)ボタン」ソース取得

こちらも特に難しい設定個所はないので、必要な入力項目を選択すると、ソースコードが出来上がります。

プレビューもあるので、分かりやすいですね。

さて、そのソースコードを取得するページは下記になります。

「+1 ボタン」ソースコード取得ページ

入力が終わったら、赤枠内にソースコードが出来上がっています。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

 

「はてなブックマーク」ソース取得

下記のページにアクセスをして取得しましょう!

「はてなブックマークボタンの作成・設置について」ページ

アクセスすると、ページ上部に説明があります。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

 

ページを下の方にスクロールすると、入力項目が現れます。

ソース取得は簡単で、「URLとページタイトルを入力」して、「ボタンのタイプ」を選んで終了です。

赤枠内にソースコードがありますので、コピーして終了です。

 

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置

WordPressにSNS「facebook、twitter、google+1、はてなブックマーク」ボタンをソース取得で設置