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

      2016/03/16

image-with-tweet-top

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


目次

SNS Count Cacheのインストール


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

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

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

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


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

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

image-with-tweet-01

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


image-with-tweet-02

「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 IcoMoon App - Icon Font, SVG, PDF & PNG Generator


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

image-with-tweet-03

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


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





image-with-tweet-04

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

image-with-tweet-05

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

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

「icomoon.zip」というファイルがダウンロードされるので展開します。

「icomoon」/「fonts」の中身をサーバーにアップロー[email protected][email protected]URLに書き換えてください。

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


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


image-with-tweet-06

プラグインの新規追加から「NextScripts: Social Networks Auto-Poster」をインストールします。

これはTwitterアプリを作成して、WordPressの投稿をアイキャッチ画像を添付してTwitterに投稿出来るプラグインになります。早速Twitterの専用アプリケーションを作成しましょう。


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


Twitter Application Management Twitter Application Management


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

image-with-tweet-07

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


image-with-tweet-08

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


image-with-tweet-09

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


image-with-tweet-10

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

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


プラグインへの設定


image-with-tweet-11

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


image-with-tweet-12

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


image-with-tweet-13

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

image-with-tweet-14

「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名は適宜調整してください。



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 = '';
}
?>




【FeedlyのURL】だけ変更してください。

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


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


アイキャッチ画像の設定を忘れずに!

画像付きでツイートできるのは「NextScripts: Social Networks Auto-Poster」経由でPostされたもののみ有効です。

最初のうちは自動で投稿されないので、記事を公開したら手動でTweetしてみてください。

image-with-tweet-15

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カードというワンクッション置いたものしか表示されないので、この方法は有用かと思います。

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

ではでは!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!


  関連記事

無料で広告無し!WordPressも設置できるレンタルサーバー『wkey.me』

通常レンタルサーバーとなると、一ヶ月いくらなど有料となりますが、今回紹介するサー ...

冬季限定!ブログに雪を降らせるScript「SnowParticle」を設置しました

[PHOTO:BRANIMIR JAREDIC - summers gone I ...

Facebook「フィード購読」ボタンの設置方法

2011/12/09、Facebookの「フィード購読」ボタンが外部サイトに設置 ...

CentOS 6にnginxとphpMyAdmin最新バージョンをサクッとインストールする方法

レンタルしているVPSサーバーを引っ越す必要があったので、今後も簡単に移設できる ...

Webサイトの更新をiPhoneなどのデバイスでPush通知を受けとれるサービス「Push7」

自分のお気に入りのWebサイト・ブログが更新されたら、Push通知によって直ぐに ...

 - WordPress