Twitterのツイートボタンの設置
Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。
ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。
Tweetボタンの設置コード
公式サイトから拝借
公式のサイトにあるコードを表示したい場所にそのまま貼り付ければ実装することが可能です。
Tweet Button
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Twitterのjsファイルを非同期で読み込む
公式に書かれていないですが、以下のようにasync=trueを付与することでtwitterのサイトからjsファイルを非同期にインクルードするようになります。"非同期"とすることで、jsファイルの読み込み完了待たずに以降の処理に移りますので、ページのロード時間を短くすることができます。
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
プラグインライクに実装
下の例では、フィルターフックでボタン要素を追加して、スクリプトをfooterに追加します。
// ツイートボタン要素
function content_for_tweet_button($content){
if (is_single()) {
$twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>';
}
$content .= $twitter;
return $content;
}
add_filter( 'the_content', 'content_for_tweet_button');
// ツイートボタン用スクリプト
function scritp_for_tweet_button() {
if (is_single()) {
$twitter_script = '<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>';
echo $twitter_script;
}
}
add_action( 'wp_footer', 'scritp_for_tweet_button');
関連記事
-
-
Twenty Twelve "コメントをどうぞ"を消す
今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー
-
-
「All in One SEO Pack」を代替するための準備
「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ
-
-
折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」
「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ
-
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
多言語化プラグイン「qTranslate」
ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang
-
-
Twenty Thirteen カスタマイズ
WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ
-
-
Twenty Thirteen ナビゲーションメニューを固定
ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
-
Twenty Fifteen カスタマイズ
WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと
-
-
Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」
Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google





Comment
[…] WordPress | Twitterのツイートボタンの設置 ソーシャルボタンの表示部分とスクリプト部分をadd_filter()で追加する方法がまとまっています […]