WordPressにプラグイン無しで、ソーシャルメディアを効果的に取り入れるスニペットのまとめ

Post on:2012年11月29日

ソーシャルメディアはインターネットで非常に重要な存在で、あなたのブログのトラフィックにも大きな影響を与えるものです。

ソーシャルメディアの中でも特に影響力のある、Facebook, Twitter, Google+, PinterestをWordPressに効果的に取り入れる有益なスニペットを紹介します。

サイトのキャプチャ

WordPress snippets to work with social networks

下記は各ポイントを意訳したものです。

Facebookの「Open Graph」を加える

Open Graphは、あなたのWordPressのコンテンツをソーシャルネットワーク上で容易に識別可能にするプロトコルです。Open Graphのメタデータを投稿記事に自動で加えるには、まずテーマファイルの「functions.php」に下記のスニペットをコピペします。
※「functions.php」が無い場合は、新規に作成します。

PHP

function wptuts_opengraph_for_posts() {
    if ( is_singular() ) {
        global $post;
        setup_postdata( $post );
        $output = '<meta property="og:type" content="article" />' . "\n";
        $output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
        $output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
        $output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
        if ( has_post_thumbnail() ) {
            $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            $output .= '<meta property="og:image" content="' . $imgsrc&#91;0&#93; . '" />' . "\n";
        }
        echo $output;
    }
}
add_action( 'wp_head', 'wptuts_opengraph_for_posts' );

続いて、テーマファイル内の「header.php」内の「<html>」を下記のスニペットに置き換えます。

PHP

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

via: Wptuts+

Pinterestの「Pin it」ボタンをつける

Pinterestは気に入った画像を共有できるサービスで、ページ上にボタンを設置しておくと簡単にPinできます。
テーマファイル内の「single.php」などピンボタンを配置するファイルに下記のスニペットを記述します。
※コードはループ内に記述します。

PHP

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>

続いて、テーマファイル内の「footer.php」に外部スクリプトを記述します。

PHP

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

via: Marketing Technology Blog

プラグインを使わずに「ツイート」を表示

Twitterアカウントのツイートをブログで表示させようと思ったら、確かに数多くのプラグインが利用可能です。しかし、プラグインを利用せずにツイートを簡単に表示する方法があります。

テーマファイル内のsidebar.phpなど、ツイートを設置するファイルに下記のスニペットを記述します。
L.3の「アカウント」にはTwitterのアカウント（例：colisscom）に変更してください。表示するアイテム数は、L.4の「3」です。

PHP

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=アカウント');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

via: Smashing Magazine

「Google+」ボタンの設置

Google+はGoogleのソーシャルネットワークで、日ごとに人気が高まっています。このボタンもプラグインを使用せずに簡単に設置することができます。
テーマファイル内の「functions.php」に下記のスニペットをコピペします。

PHP

add_filter('the_content', 'wpr_google_plusone');
function wpr_google_plusone($content) {
	$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
	return $content;
}
add_action ('wp_enqueue_scripts','wpr_google_plusone_script');
function wpr_google_plusone_script() {
	wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

via: SpyreStudios

「Google+の更新」を表示

もしあなたがGoogle+のユーザーなら、Google+の更新を表示させたいかもしれません。これも簡単にできます。
テーマファイル内の「functions.php」に下記のスニペットをコピペしてください。L.3にGoogle+のIDを忘れずに。

PHP

<?php
	include_once(ABSPATH.WPINC.'/rss.php');
	$googleplus = fetch_feed("http://plusfeed.appspot.com/Google+のID");
	echo '<a href="';
	echo $googleplus->items[0]['link']; echo '">';
	echo $googleplus->items[0]['summary'];
	echo '';
?>

via: Geekeries

「TwitterとFacebookのボタン」を設置

TwitterとFacebookはソーシャルネットワークの中でも最も人気の高い二つと言ってもよいでしょう。これら二つはあなたのブログにたくさんのトラフィックを供給することができます。TwitterとFacebookであなたの記事を共有することが簡単にできるように、ボタンを設置してみましょう。

テーマファイル内の「functions.php」に下記のスニペットをコピペします。これで、記事の下に自動でTwitterとFacebookのボタンが表示されます。

PHP

function share_this($content){
    if(!is_feed() && !is_home()) {
        $content .= '<div class="share-this">
                    <a href="http://twitter.com/share"
class="twitter-share-button"
data-count="horizontal">Tweet</a>
                    <script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
                    <div class="facebook-share-button">
                        <iframe
src="http://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;colorscheme=light&amp;height=21"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:21px;"
allowTransparency="true"></iframe>
                    </div>
                </div>';
    }
    return $content;
}
add_action('the_content', 'share_this');

via: WP Recipes

「お気に入りのツイート」を表示

WordPressにあなたのお気に入りのツイートを表示させてみましょう。
テーマファイル内の「sidebar.php」など表示させたい場所に、下記のスニペットをコピペします。L.3にはお気に入りのツイートのFeedに変更してください。

PHP

<?php
    include_once(ABSPATH . WPINC . '/feed.php');
    $rss = fetch_feed('http://twitter.com/favorites/793830.rss');
    $maxitems = $rss->get_item_quantity(3); 
    $rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
    <?php if ($maxitems == 0) echo '<li>No items.</li>';
    else
    // Loop through each feed item and display each item as a hyperlink.
    foreach ( $rss_items as $item ) : ?>
    <li>
        <a href='<?php echo $item->get_permalink(); ?>'>
            <?php echo $item->get_title(); ?>
        </a>
    </li>
    <?php endforeach; ?>
</ul>

via :CSS-Tricks

「Twitterでのシェア数」を表示

Twitterであなたの記事がどのくらいシェアされた表示するのも簡単です。まず、テーマファイル内の「functions.php」に下記のスニペットをコピペします。

PHP

function readTwitterShares($url) {
 $s = file_get_contents("http://urls.api.twitter.com/1/urls/count.json".
   "?callback=?&url=".urlencode($url));
   preg_match("#(\"count\"):([0-9]*)#",$s,$ar);
   return isset($ar[2]) ? $ar[2] : 0;
}

続いて、「single.php」など表示させたいファイルに下記のスニペットをコピペします。
※スニペットはループ内にします。

echo readTwitterShares(get_permalink());

via: Barattalo

「TwitterとFacebookのインフォメーション」を加える

WordPressはデフォルトで、JabberやAIM, Yahooメッセンジャーの情報を加えることができますが、TwiterやFacebookの情報には対応していません。
ここでは、JabberやAIM, Yahooメッセンジャーを取り除き、そして、Twitter, Facebookの情報を加えてみましょう。テーマファイル内の「functions.php」に下記のスニペットをコピペします。

PHP

function new_contactmethods( $contactmethods ) {
    $contactmethods['twitter'] = 'Twitter'; // Add Twitter
    $contactmethods['facebook'] = 'Facebook'; // Add Facebook
    unset($contactmethods['yim']); // Remove YIM
    unset($contactmethods['aim']); // Remove AIM
    unset($contactmethods['jabber']); // Remove Jabber

    return $contactmethods;
}
add_filter('user_contactmethods','new_contactmethods',10,1);

via: WP-Snippets

sponsors

top of page

©2024 coliss