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 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS