[WordPress]カスタムSNSボタンで画像付きツイートを行うTwitterボタンの作成方法

2015/04/15　16:222016/03/16　18:28

WordPressでカスタムSNSボタンを利用した「画像付きツイートを行うことができる」Twitterシェアボタンの作成方法を紹介いたします。

SNS Count Cacheのインストール
icomoonをWordPressに導入
Social Networks Auto-Poster
TwitterのDevサイトからアプリを作成
プラグインへの設定
カスタムSNSボタンの作成
画像付きツイートボタンのTips

Contents

1. SNS Count CacheのインストールカスタムSNSボタンを設置するにあたって「SNS Count Cache」プラグインをインストールして、ソーシャルメディアでのシェア数を取得できるようにします。

WordPressのプラグインの追加から「SNS Count Cache」と検索してインストールします。

参考に作者まるぼんさんのサイトを載せておきます。

SNS Count Cache | 試行錯誤ライフハック

インストールするとダッシュボード左側に「SNS Count Cache」の項目が追加されます。

自分の場合、「Settings」から以下のものを設定しています。

「Share Base Cache」で「Target SNS」のすべてをチェックし、「Interval cheking and caching share count (sec)」を300にしています。

「Follow Base Cache」でFeedlyもチェック、それ以外はデフォルト
※v0.5.0の場合、Facebookのカウントが取得できないときがあります。次のバージョンで改善されるとのこと。
```
Twitter


Facebook


Google+


はてなブックマーク


Pocket


Feedly
```
これでプラグインを使ってSNSのカウントを取得できます。

icomoonをWordPressに導入
2. 「NextScripts: Social Networks Auto-Poster」プラグインのインストール
プラグインの新規追加から「NextScripts: Social Networks Auto-Poster」をインストールします。
これはTwitterアプリを作成して、WordPressの投稿をアイキャッチ画像を添付してTwitterに投稿出来るプラグインになります。早速Twitterの専用アプリケーションを作成しましょう。

TwitterのDevサイトからアプリを作成
3. プラグインへの設定
「NextScripts: Social Networks Auto-Poster」の設定をします。

「Add new account」でアカウントを追加します。

「Add New Network」をTwitterに設定し、先ほど保存したKeyとURLを入力していきます。
「Attach Image to Twitter Post」にチェックをします。「Message text Format」はお好みで設定してください。

以上で設定完了です！

カスタムSNSボタンの作成

SNS Count Cacheのインストール

カスタムSNSボタンを設置するにあたって「SNS Count Cache」プラグインをインストールして、ソーシャルメディアでのシェア数を取得できるようにします。

WordPressのプラグインの追加から「SNS Count Cache」と検索してインストールします。

参考に作者まるぼんさんのサイトを載せておきます。

SNS Count Cache | 試行錯誤ライフハック

インストールするとダッシュボード左側に「SNS Count Cache」の項目が追加されます。

自分の場合、「Settings」から以下のものを設定しています。

「Share Base Cache」で「Target SNS」のすべてをチェックし、「Interval cheking and caching share count (sec)」を300にしています。

「Follow Base Cache」でFeedlyもチェック、それ以外はデフォルト
※v0.5.0の場合、Facebookのカウントが取得できないときがあります。次のバージョンで改善されるとのこと。

Twitter


Facebook


Google+


はてなブックマーク


Pocket


Feedly

これでプラグインを使ってSNSのカウントを取得できます。

icomoonをWordPressに導入

「IcoMoon App」というWebサービスでカスタムSNSボタンのアイコンフォントを作成します。

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

Twitter/Facebook/Google+は既に用意されているので、PocketとFeedlyのアイコンを追加作成します。

「Import Icons」からSVGファイルをアップロードします。

今回は以下のものを使わせていただきました。ありがとうございます！

自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
Link: 1000×1000pxのfeedly枠なしSVGファイル

ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク

Link: SNSボタンセット

使いたいアイコンを選択して「Generate Font」をクリック

ページ上の「Preferences」をクリックして、「Class Prefix」を「icomoon」にします。

あとはページ下の「Download」をクリックします。

「icomoon.zip」というファイルがダウンロードされるので展開します。
「icomoon」/「fonts」の中身をサーバーにアップロード、style.cssの中身を使用するCSSに追記します。@font-faceのURLの部分はサーバーにアップロードしたURLに書き換えてください。

以上でSNS用のアイコンフォントの準備は完了です。

「NextScripts: Social Networks Auto-Poster」プラグインのインストール

プラグインの新規追加から「NextScripts: Social Networks Auto-Poster」をインストールします。
これはTwitterアプリを作成して、WordPressの投稿をアイキャッチ画像を添付してTwitterに投稿出来るプラグインになります。早速Twitterの専用アプリケーションを作成しましょう。

TwitterのDevサイトからアプリを作成

Twitter Application Management

こちらにアクセスしてTwitterアカウントでサインインし、「Create New App」をクリックします。

作成したアプリケーションに移動して、「Permissions」を「Read and Write」に変更します。

「Consumer Key (API Key)」と「Consumer Secret (API Secret)」を保存しておきます。

下の方にある「Create my access token」をクリック

「Access Token」と「Access Token Secret」を保存しておきます。

以上でTwitterアプリの準備は完了です。

プラグインへの設定

「NextScripts: Social Networks Auto-Poster」の設定をします。

「Add new account」でアカウントを追加します。

「Add New Network」をTwitterに設定し、先ほど保存したKeyとURLを入力していきます。

「Attach Image to Twitter Post」にチェックをします。「Message text Format」はお好みで設定してください。

以上で設定完了です！

カスタムSNSボタンの作成

単一記事のSingle.phpに設定する方法です。

/* アイコンフォント */

@font-face {

    font-family: 'icomoon';

    src: url('fonts/icomoon.eot?ukz28k');

    src: url('fonts/icomoon.eot?#iefixukz28k') format('embedded-opentype'),

		url('fonts/icomoon.woff?ukz28k') format('woff'),

		url('fonts/icomoon.ttf?ukz28k') format('truetype'),

		url('fonts/icomoon.svg?ukz28k#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

}


[class^="icomoon-"], [class*=" icomoon-"] {

    font-family: 'icomoon';

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

	/* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}


.icomoon-twitter:before {content: "\e607";}

.icomoon-twitter2:before {content: "\ea92";}

.icomoon-facebook:before {content: "\e605";}

.icomoon-facebook2:before {content: "\e604";}

.icomoon-google-plus:before {content: "\e601";}

.icomoon-google-plus2:before {content: "\e602";}

.icomoon-pocket:before {content: "\e608";}

.icomoon-feedly:before {content: "\e609";}

/* SNSボタン */


.clearfix::after {

    clear: both;

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    visibility: hidden;

}


.sns-box {

    margin: 15px 0;

    width: 100%;

}



.sns-box .twitter-button, .sns-box .fb-button, .sns-box .gplus-button, .sns-box .hatena-button, .sns-box .pocket-button, .sns-box .feedly-button {

    float: left;

    margin: 10px 0 10px 10px;

    padding: 0;

}


.sns-box .balloon::before {

    border-color: #bbb rgba(237, 237, 237, 0) rgba(237, 237, 237, 0);

    border-width: 5px;

    margin-left: -5px;

}


.sns-box .balloon::after, .sns-box .balloon::before {

    border: medium solid transparent;

    content: " ";

    height: 0;

    left: 50%;

    position: absolute;

    top: 100%;

    width: 0;

}


.sns-box .balloon::after {

    border-color: #fcfcfc rgba(252, 252, 252, 0) rgba(252, 252, 252, 0);

    border-width: 4px;

    margin-left: -4px;

}


.sns-box .balloon::after, .sns-box .balloon::before {

    border: medium solid transparent;

    content: " ";

    height: 0;

    left: 50%;

    position: absolute;

    top: 100%;

    width: 0;

}


.sns-box .balloon {

    background: none repeat scroll 0 0 #fefefe;

    border: 1px solid #bbb;

    border-radius: 1px;

    color: #666;

    font-weight: 700;

    height: 33px;

    position: relative;

    text-align: center;

    width: 65px;

}


.sns-box .num {

    font-size: 13px;

    height: 33px;

    line-height: 33px;

}


.sns-box .button {

    display: block;

    width: 65px;

    margin: 8px 0 0 0;

    background: linear-gradient(to bottom,#FFF,#e5e5e5);

    background: -moz-linear-gradient(top,#FFF 0,#e5e5e5);

    background: -webkit-gradient(linear,left top,left bottom,from(#FFF),to(#e5e5e5));

    border: 1px solid #DDD;

    color: #111;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    font-size: 14px;

    line-height: 17px;

    text-decoration: none;

    height: 18px;

}


.sns-box .button:hover {

    background: linear-gradient(to bottom,#efefef,#dedede);

    background: -moz-linear-gradient(top,#efefef 0,#dedede);

    background: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#dedede));

}


.sns-box .button .icomoon-twitter2 {

    color: #00abec;

    font-size: 12px;

    line-height: 17px;

    margin: 0 5px 0 3px;

    vertical-align: middle;

}


.sns-box .button .icomoon-facebook2 {

    color: #4561af;

    font-size: 12px;

    line-height: 17px;

    margin: 0 5px 0 3px;

    vertical-align: middle;

}


.sns-box .button .icomoon-google-plus2 {

    color: #e26b5c;

    font-size: 12px;

    line-height: 17px;

    margin: 0 5px 0 3px;

    vertical-align: middle;

}


.icomoon-hatena::before {

    content: "B!";

    font-family: Verdana;

    font-weight: bold;

}


.sns-box .button .icomoon-hatena {

    color: #008fde;

    font-size: 12px;

    line-height: 17px;

    margin: 0 3px;

    vertical-align: middle;

}


.sns-box .button .icomoon-pocket {

    color: #ee4156;

    font-size: 12px;

    line-height: 17px;

    margin: 0 5px 0 3px;

    vertical-align: middle;

}


.sns-box .button .icomoon-feedly {

    color: #7bce54;

    font-size: 12px;

    line-height: 17px;

    margin: 0 6px 0 3px;

    vertical-align: middle;

}


.sns-box .button .text {

    color: #555;

    font-size: 10px;

    font-weight: 700;

    line-height: 17px;

    text-align: center;

}


/* SNSボタンここまで */

デザイン/class名は適宜調整してください。




global $wp_query,$imageUrl;

$postID = $wp_query->post->ID;

if(get_post_meta($postID, 'snapTW', true)) {

$twuserid = 'ichitaso';

$snaptw = get_post_meta($postID , 'snapTW', true);

$unserialize = maybe_unserialize($snaptw);

$twimageid = $unserialize[0]['pgID'];

if($twimageid) {

$imageUrl = 'https://twitter.com/' . $twuserid . '/status/' . $twimageid . '/photo/1';

} else {

$imageUrl = '';

}

} else {

$imageUrl = '';

}

?>



&text=%0d%0a" onclick="window.open(this.href, 'Twindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="button">Tweet
&t=" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="button">Share
" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="button">Share
" onclick="window.open(this.href, 'Hwindow', 'width=750, height=600, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="button">Hatena
&title=" class="button">
Pocket
Follow

【FeedlyのURL】だけ変更してください。
サイドバーのWidgetにも追加したい場合、「PHP Text Widget」などのプラグインを追加してください。

画像付きツイートボタンを設置する上でのTips

アイキャッチ画像の設定を忘れずに！
画像付きでツイートできるのは「NextScripts: Social Networks Auto-Poster」経由でPostされたもののみ有効です。
最初のうちは自動で投稿されないので、記事を公開したら手動でTweetしてみてください。

WordPress記事編集画面の下の方にOptionが追加されているので、「Repost to Twitter」をクリックするとアイキャッチ画像が添付されてツイートされます。
また、カスタムSNSボタンを追加すると文字エンコードの関係で「-」ハイフン（マイナス記号）などが文字化けします。

functions.phpに以下を追記して回避してください。

// 特殊文字の変換停止

remove_filter('the_title', 'wptexturize'); // 記事タイトル

remove_filter('the_content', 'wptexturize'); // 記事本文

remove_filter('comment_text', 'wptexturize'); // コメント欄

remove_filter('the_excerpt', 'wptexturize'); // 抜粋

最近は画像付きツイートで記事を紹介する方が増えてきましたね。

FacebookやGoogle+などはOGPで設定した画像がアイキャッチとして表示されますが、Twitterの場合Twitterカードというワンクッション置いたものしか表示されないので、この方法は有用かと思います。

試しにシェアしてみてもらってもいいですよ…///

ではでは！

WordPress