WordPressにAddThisをプラグインなしで導入する

以前こんなことがあったのでAddThisプラグインはやめていました。
URLの最後に勝手に謎の文字列が追加される

でもやっぱりAddThisはどれだけシェアされたかをメールでお知らせしてくれたり、グラフで見れたりと便利な点も多いので、プラグインは使用せずに導入してみました。

AddThis

導入方法1. ブログトップページに貼付ける用

この方法だと現在表示されているページのURLのみをシェアします。ブログのトップページのアドレスをシェアしたい場合や、個別ページを開いた時にのみシェアボタンが表示されるように設置する場合によいと思います。

Get AddThisのページを開き、ログインします。

1.左側の”Options”の”Platform”を”Website”を選択します。

2.”Style”をお好きなものを選択します。
Styleを選択

3.右側の”Install AddThis (it’s free!)”の下にコードを出してくれるのでそれをコピーして、表示させたい箇所に貼付けます。
Install AddThis (it’s free!)の下のコードをコピペ

基本的にはこれで完了です。

ただ、デフォルトだとAddThisからツイートした場合にツイートの宛先が@addthisになっています。上で貼付けたコードのすぐ下に下記のようなコードを追加する事で、ツイートの内容を設定できます。

<script type="text/javascript">
var addthis_share =
{
// …
templates: { twitter: 'check out {{url}} (from @example_dot_com)' }
}
</script>

↓このコードで下のようにツイートされます。
ツイート表示

twitter: ‘check out {{url}} (from @example_dot_com)’
の中を下記に置き換える事ができます。

{{url}} //表示されてるページのURLをツイート
{{lurl}} //URLを短くする
{{title}} //ページのタイトルを表示
{{html}} //任意のHTMLを表示
(from @example_dot_com) //"from @"を自分のIDに変更

導入方法2. トップの記事一覧の個別記事の箇所、個別表示のページに表示する用

個別記事のタイトル、URLをシェアしてくれます。

下記のコードでボタンを設置できます。

<a href="http://www.addthis.com/bookmark.php?v=250&amp;amp;pubid={自分のIDを入力}" class="addthis_button" addthis:url="<?php the_permalink(); ?>" addthis:title="<?php the_title(); ?>" addthis:description="An Example Description"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=自分のIDを入力"></script>

↓こんな感じです。
表示例
このブログにつけたコードは下記です。

<div class="addthis_toolbox addthis_default_style " addthis:url="<?php the_permalink(); ?>" addthis:title="<?php the_title(); ?>" addthis:description="An Example Description">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;amp;pubid={自分のIDを入力}" class="addthis_button_compact">Share</a>
<script type="text/javascript">
var addthis_share =
{
// …
templates: { twitter: '{{title}} {{url}} (from @mo0_0sao)' }
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=自分のIDを入力"></script></div>

↓こんな感じの表示です。
表示例

最初に設置した時に、初めに書いた方法で個別記事のシェアボタンもつけてしまい、記事の一覧で個別記事をシェアしようとしても、トップページのアドレスしかシェアできなかったという事がありました!使い分けをしないといけませんね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能