エックスの投稿で、投稿内に画像があって、そこをポチッと押すと自分のブログ記事に飛んでいくと便利ですよね
↓こんな感じです
ところが、私、この方法が、なかなか出来なかったんです！
それで色々調べて、やっとエックスの画像からブログ記事に誘導する方法がわかったので、この記事で公開します！
涙｜エックスに画像を投稿しても、そこにリンクを貼れない！！
エックスをあまり使いこなせてなかったこともあり、画像を投稿しても、そこにリンクを貼れなかったんです
こんな感じです
これだと、他の上級投稿者の人は画像からリンクしているので、多分多くの人が画像をクリックするはずなのですが、ただ画像が開くだけで、リンクには飛んでくれない訳です
ブログ記事への誘導や、アフィリエイトのリンクなど、有効に使いたいですよね・・・
エックス広告を使う方法を調べるも、何故か機能出来ず
画像からリンクを貼る方法をググっていくと、YouTubeやブログ記事で、エックス広告（Twitter広告）で投稿を作る方法が多く紹介されていました。
これは広告を出す途中までの制作過程でできるリンクを活用し、無料で画像からのリンクを投稿するという方法です。
ところが、私の場合は何故か上記の方法は使えませんでした。これは2024年3月現在で、エックス広告の仕様が変わったことで出来なくなっているのかもしれません。
そこで、エックス広告を使わない方法で表示させるやり方を編み出しています
2024年3月検証済み｜エックス画像からブログ記事にリンクを飛ばす方法
準備の作業手順はこちら
２ 個別ブログ記事のHead部分にコード記述できる状況を作る
３ 個別ブログ記事に、エックスからリンクを表示させるコードを記述する
４ ブログを公開する
５ エックスでブログ記事を投稿する
？？と思われた方も多いと思いますので、順番に説明していきます
１ リンク用の画像を作成する（ラージカード）
エックス（旧Twitter）では、画像を表示する”カード”という考え方があります。
カードの種類には様々ありますが、私は「Summary with large image」という大きめのカードで画像リンクを表示する方法を選びました
＜カードのサイズ表＞
| Summary Card | 1:1 | 144×144 |
| Summary with large image | 1.91:1または1:1 |
|
私は、こちらのSummary with large image用の画像を、800×418ピクセルで作成し、エックスから表示させています
↓こちらが800×418ピクセルの画像サイズイメージです
画像容量に注意（50K未満推奨）
エックス投稿した時に画像がうまく表示されない！ってなる時には、画像容量を疑ってみてください。私は100k以上の時に表示されず、50k未満にしたところ表示されました
２ 個別のブログ記事のHead部分にコード記述できる状況を作る
次に、表示させるブログ記事に、エックスと連動したコード記述ができるようにします。
ブログのHTMLの＜head＞＜/head>部に、コードを記載する必要がありますが、よくある記述用プラグインを使うと、「ブログ全体のHead」に記述されてしまいます。この形だと、個別のブログ記事のHead部分に記載することが出来ません。
そのため、記事毎に、コードを追加できる状況にブログをアレンジします
↓アレンジすると、以下のような画面が出るようになり（Classic Editorの場合）、記事ごとにコードが記述できるようになります
アレンジの仕方（php.へ追加記載）
ブログのテーマのPHPに追加記載ができるプラグインを導入します
私が使ったのはこちらのCode Snippetsです。正しいコードしか記述がされず、元々のPHPを書き換えることなく追加しかしないので、比較的安全にphpに記載ができると考えました
phpに以下のコードを記載し、有効化します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
//ページごとにhead内に追記するカスタムフィールド add_action( 'add_meta_boxes', function(){ $screens = array('post', 'page'); foreach($screens as $scrn){ add_meta_box( 'peralab-custombox-css-internal', 'この記事に追加', 'PeralabCssInternal_CustomBoxCreate', $scrn, 'normal', 'default', null); } } ); //メタボックスを作成 function PeralabCssInternal_CustomBoxCreate($post){ $data_str = get_post_meta($post->ID, "metakey_css", true); $ext_str = get_post_meta($post->ID, "metakey_ext", true); $body_str = get_post_meta($post->ID, "metakey_body", true); //if($data_str == ''){} wp_nonce_field('action-noncekey-css-internal', 'noncename-css-internal'); ?> <div> <p><label>ADD to head<br> <textarea id="id-metabox_ext_textarea" name="name-metabox_ext_textarea" rows="5" cols="30" style="width:100%;"><?php echo esc_attr($ext_str); ?></textarea> </label></p> <p><label>ADD CSS<br> <textarea id="id-metabox_css_textarea" name="name-metabox_css_textarea" rows="5" cols="30" style="width:100%;"><?php echo esc_attr($data_str); ?></textarea> </label></p> <p><label>ADD to body<br> <textarea id="id-metabox_body_textarea" name="name-metabox_body_textarea" rows="5" cols="30" style="width:100%;"><?php echo esc_attr($body_str); ?></textarea> </label></p> </div> <?php } //カスタムボックス内のフィールド値更新処理 add_action( 'save_post', function($post_id){ if(isset($_POST['noncename-css-internal']) == false || wp_verify_nonce($_POST['noncename-css-internal'], 'action-noncekey-css-internal') == false) { return; } if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return; } if(isset($_POST['post_type'])){ if($_POST['post_type'] == 'page'){ if(!current_user_can('edit_page', $post_id)){ return; } } else{ if(!current_user_can('edit_post', $post_id)){ return; } } } if(isset($_POST['name-metabox_css_textarea'])){ update_post_meta($post_id, "metakey_css", $_POST['name-metabox_css_textarea']); } if(isset($_POST['name-metabox_ext_textarea'])){ update_post_meta($post_id, "metakey_ext", $_POST['name-metabox_ext_textarea']); } if(isset($_POST['name-metabox_body_textarea'])){ update_post_meta($post_id, "metakey_body", $_POST['name-metabox_body_textarea']); } } ); //出力用のアクションフックを登録 add_action( 'wp_head', function(){ if(is_single() == false && is_page() == false){ return; } $data_str = get_post_meta(get_the_ID(), "metakey_css", true); if($data_str != '' && ctype_space($data_str) == false){ echo '<style>' . PHP_EOL . $data_str . PHP_EOL . '</style>' . PHP_EOL; } $data_str = get_post_meta(get_the_ID(), "metakey_ext", true); if($data_str != '' && ctype_space($data_str) == false){ echo $data_str . PHP_EOL; } }, 1000 ); add_action( 'wp_footer', function(){ if(is_single() == false && is_page() == false){ return; } $data_str = get_post_meta(get_the_ID(), "metakey_body", true); if($data_str != '' && ctype_space($data_str) == false){ echo $data_str . PHP_EOL; } }, 1000 ); |
３ 個別ブログ記事に、エックスからリンクを表示させるコードを記述する
2の準備が整ったら、ブログ記事にコードを記述していきます
記載するコード
|
1 2 3 4 5 |
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@エックスIDを入れてください" /> <meta name="twitter:title" content="表示したい記事タイトルを表示" /> <meta name="twitter:description" content="説明を記載！" /> <meta name="twitter:image" content="(5)画像のURL" /> |
３行目は記事タイトル、４行目は説明です、
５行目に、この記事の１で作った800*418ピクセルの画像をブログのメディアにアップロードして、その画像のURLを記載してください
これを記事下に表示されている入力欄に入力します
↓こんな感じです
４ ブログを公開する
普通に公開します
５ エックスでブログ記事を投稿する
これで表示されるようになります
正しく記載しているのにうまく表示されない時
上記の設定をしていても、何故かカードのサイズが小さく表示されてしまう事象がありました
これを解消できた方法としては「サーバのキャッシュクリア」です
何らかの理由で、設定途中の間違ったコードがサーバ側に残ってしまっていたようです。
そこで、サーバのキャッシュをクリアすると、以下のように大きなサイズで表示されました
何か上手くいかないという時にはサーバキャッシュを疑ってみてください
まとめ
ブログを伸ばしていくために、SNSからの流入、特にエックスからの流入は大きな効果が見込めますので、今回のやり方を参考にしてみてください