WordPressのソーシャルブックマークボタンをオリジナルにしてみた

各ボタンをWordPress仕様でオリジナル画像に変えてみました。
ここでいうソーシャルブックマークにはツイッターも含まれます。
この記事内に載せているものはクリックしても動きません。
実際に使用しているものはPCでアクセスすると各記事下にあります。
タイトルがややこしいですが配布はしていません。
WordPress版ではないものはこちら:ソーシャルブックマークボタンをオリジナルにしてみた

公式RTボタン


最新記事(今なら4コマ)にのみつけています。
クリックすると簡単に公式リツイートができます。
記事投稿して自動でツイート投稿して、そのツイートURLを利用しているのであとから追記しています。
<a href="https://twitter.com/intent/retweet?tweet_id=ツイートURLのID">
<img src="画像URL">
</a>



ツイートボタン(PCとスマホ版)


WordPress上でURLとタイトルを自動で取得させつつ、
更にオリジナルのツイートボタンを用意するのがすごく難しかったので、simple tweetを利用しました。

"Tweet this" リンクの内容
%POST_TITLE% %PERMALINK% via ツイッターID

"Tweet this" リンクに表示するテキスト
<img src="画像URL" titie="ツイートする" alt="ツイートする">

simlpe tweetで記事投稿するとツイートさせるようにしていると、
simple tweetで設置したボタンでツイートしてもらうとリプライ(ツイート冒頭に@がくる)になってしまうので、
simple-tweet.phpの一部を編集。
$tweet_this_link = '<a href="' . self::TWEET_HOME_URL .
'?status=' . rawurlencode($link) .
'" class="tweet-this" target="_blank">' .
$text.
'</a>';

PC用テーマとwptouchのテーマの表示させたいところに記述。
『記事本文に "Tweet this" リンクを挿入する』はktaistyleでは動いてくれないのでチェックを外します
<?php if (function_exists('tweet_this_link')) tweet_this_link(); ?>



ツイートボタン(ガラケー版)


前述の通り、WorPress上でURLとタイトルを自動で取得させつつ、
更にオリジナルのツイートボタンを用意するのがすごく難しく、
しかもガラケーだと細かい設定ができないので、荒技です。
機種によっては正常に動作しない事もあります。
自動挿入されるツイートが文字化けや数字になっている場合がありますので、適宜修正をお願いします。
一部機種で動作確認していただきました。ありがとうございます。

コードを記述すると画面が正常に表示されなかったのでこちらをどうぞ。
[携帯]携帯サイトにmixiチェックとtwitterつぶやくボタンを設置する方法。


Facebookいいねボタン(動作未確認)

PC版にしか表示させていませんが、スマホでも多分使えます。
ガラケーでは無理です。
いいね!をすると専用のサムネイルが出る筈です。
<a href="http://www.facebook.com/sharer.php?
u=<?php the_permalink();?>&amp;
t=<?php the_title();?>" target="_blank"><img src="画像URL"></a>



はてなブックマーク追加ボタン(動作未確認)

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple" title="はてなブックマークに追加">
<img src="画像URL"></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>



mixiチェックボタン(PCとスマホ版)


mixi Developer Centerの登録が必要です。
本名や住所や携帯電話のメールアドレスなど、おそらくmixiの登録に必要だったものをここでも入力する必要があります。
これも専用のサムネイルが出るようにしています。
<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=<?php the_permalink(); ?>&k=チェックキー','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">
<img src="画像URL"></a>



mixiチェックボタン(ガラケー版)


コードを記述すると画面が正常に表示されなかったのでこちらをどうぞ。
[携帯]携帯サイトにmixiチェックとtwitterつぶやくボタンを設置する方法。

アイコンは配布していません。


02/08 人間の愚かさを教えてくれる『フランケンシュタインの誘惑』が好きすぎる

はじめてこのサイトに来た方への案内所はこちら

類似記事

Copy&Paste


本文のコピペやスクショはしないでください