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');
関連記事
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
-
Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi
-
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
-
jQueryをCDNから読み込む
WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0
-
-
Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更
標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
プラグイン関連のJSやCSSの読み込みをフィルター
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず
-
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites





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