ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【Web制作】縦型SNSソーシャルボタンの自力設置コード!ツイッター,Facebookなど

縦型ソーシャルボタン

SNS(ソーシャルネットワーク)への拡散・登録のための縦型ソーシャルボタンをブログやサイトに設置する方法を共有します。標題以外にGoogle+、はてブ(はてなブックマーク)、Pocketにも対応。

ゆめぴょん(@yume_pyon)です。こんちはっ!

(2013.9.27追記)今回の記事にはバージョンアップ版があります。できればそちらを参考にしてください。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

SNS(ソーシャルネットワーク)の出現により、誕生から日の浅いブログやサイトも多くの人に届けることが可能になりました。少し前までは検索エンジンとメールで知らせる方法のみだったので周知に時間がかかりました。

WordPressを利用している人はプラグインを用いても簡単に設置できます(一番下参照)。ただWP Social Bookmarking Lightバージョン1.7.5では横に並べる形になります。今回はWordPress用の縦型(ボックス)も同時に紹介します。

ツイッター/Twitterのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。Twitterボタン公式サイトでも取得できます。●●には自分のツイッターア[email protected]yume_pyon」です。

divタグで囲んでるのは私の趣味ですので各自の好みでulに変えてもいいと思います。width=80pxの数値を変えれば横にのばせます。

★一般サイト、ホームページ用

★WordPress専用。無料ブログの場合はphpの部分を変えれば使えるかも。

フェイスブック/Facebookのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。Facebookボタン公式サイトでも取得できます。

●●にはいいね!したいページのURLを入力してください。ちなみにここにFacebookページのアドレスを入力することも可能です。このブログではそうしてみました。

複数ページに同じコードで対応したい場合や、自動的にURLを取得したい場合は上の公式サイトの「URL to Like」に何も入力しない状態で、HTML5かXFBML方式でなら取得できます。

★一般サイト、ホームページ用(URLは1つに限定)

★WordPress専用
上のコードの●●を「<?php the_permalink(); ?>」に置き換えるだけです。

Google+のソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。HTML5用や非同期などのコードはGoogle+ボタン公式サイトで取得できます。さすがGoogle、とてもシンプルでURLも必要ありません。

★一般サイト、ホームページ用

1ページ内に複数を設置する場合は、一番最後のボタンだけは全行を、それ以外は1行目のみで結構です。

★WordPress専用
上コードを共通で使えるはずですが、私は上手く行かなかったので下のコードで対応しました。

はてブ(はてなブックマーク)のソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。他の形のボタンははてなブックマークボタン公式サイトで取得できます。3行目「only@2x.png」の「@」(アットマーク)は必ず半角に置き換えてください。

★一般サイト、ホームページ用(URL、タイトルは1つに限定)

★WordPress専用

Pocketのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。3種類のボタンがPocketボタン公式サイトで取得できます。

URLもタイトルも必要ないので通常サイトもWordPressも共通コードです。data-lang=”en”になってるけど日本語でも問題ありません。バージョン番号ついてるので更新されるかもしれませんね。

★一般サイト、ホームページ、WordPressとも共通

WordPressプラグインを利用しての設置方法は下の記事を参考にしてみてください。

WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグインWP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン

あなたは新しいブログ記事の更新をどうやって知らせますか。今回は「WP Socia…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】Ping送信先一覧2013年7月版!エラー先もリスト化【Web制作】FacebookのOGP設定をプラグインなしで設置する方法:次記事»
ページ
↑先頭
ホーム