Cara Mudah Memasang Twitter Card di Blogger By Holidincom
Assalamu'alaikum warohmatullohi wabarokatuh. Selamat sore... Jika saat ini gansis sedang mencari cara membuat twitter card di blog, twitter card for blogger, apa itu twitter card?, cara pasang twitter card, dan cara mendapatkan twitter card, ya langsung saja merapat ke sini!
Memasang twitter card di blog memang bisa dikatakan penting tidak penting, karena mengingat fungsinya memang hanya untuk menampilkan gambar yang ada pada postingan itu sendiri ketika postingan tersebut dishare ke twitter.
Jadi jika kita memasang twitter card di blog, maka pada saat sebuah postingan blog dishare ke twitter, penampakannya kurang lebih akan seperti gambar di bawah ini
Twitter memang tidak seperti facebook, yang secara automatis akan menampilkan postingan beserta gambarnya pada saat sebuah postingan dishare ke facebook.
Jika di twitter, bila kita tidak memasang twitter card di dalam blog, maka postingan yang dishare ke twitter hanya akan muncul linknya saja, seperti pada gambar di bawah ini...
Terus bagaimana caranya jika ingin membuat atau memasang twitter card di blog?
Sebenarnya cara memasang twitter card ini tidaklah sesulit yang dibayangkan. Karena, hanya dengan memasukan kode-kode dibawah ini:
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_jgdjhuXdKkP3eSXbI8HkKBm87GMWSO7Y5HbCCHifOKSysF0k0TqqR8htikIE46cJUGSL60zjrAo31KoTb7rEvvGVnoHoKnF7eOp-AyLcrc86fhk_NvyBzAMlY6brjEG9QTsMrTng10r/s1600/cats.png' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if></b:if>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_jgdjhuXdKkP3eSXbI8HkKBm87GMWSO7Y5HbCCHifOKSysF0k0TqqR8htikIE46cJUGSL60zjrAo31KoTb7rEvvGVnoHoKnF7eOp-AyLcrc86fhk_NvyBzAMlY6brjEG9QTsMrTng10r/s1600/cats.png' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if></b:if>
Lalu menempatkannya di bawah kode <head> atau di atas tag penutup </head>, maka gansis sudah berhasil memasang twitter card di blogger.
Namun jika gansis masih tetap merasa bingung cara memasang twitter card di blogger, silahkan masuk saja ke dashboard, kemudian pilih theme/tema lalu klik edit html.
Untuk lebih jelasnya, lihat gambar di bawah ini!
Setelah memilih edit html, tempatkan kode yang tadi di bawah <head> lihat gambar di bawah ini
Atau bisa juga ditempatkan di atas/sebelum tag penutup </head>. Perhatikan gambar di bawah ini
Untuk melihat atau mendapatkan url sebuah gambar, silahkan baca di postingan ini. Gambar ini nantinya akan menjadi gambar utama ketika alamat blog gansis dishare ke twitter.
Ada beberapa jenis twitter card lainnya yang bisa kita pasang di blog, di antaranya adalah:
1. Summary with large image
2. Summary card
3. Player card
4. App card
Namun dari ke 4 twitter card ini, yang sering digunakan adalah twitter card jenis summary with large image, seperti yang ada di dalam blog ini.
Jika seandainya sobat kurang srek dengan hasil tampilan twitter card yang di atas, sobat bisa menggunakan kode yang ada di bawah ini
<!-- [ Twitter card meta tag ] -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silakan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_jgdjhuXdKkP3eSXbI8HkKBm87GMWSO7Y5HbCCHifOKSysF0k0TqqR8htikIE46cJUGSL60zjrAo31KoTb7rEvvGVnoHoKnF7eOp-AyLcrc86fhk_NvyBzAMlY6brjEG9QTsMrTng10r/s1600/cats.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silakan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_jgdjhuXdKkP3eSXbI8HkKBm87GMWSO7Y5HbCCHifOKSysF0k0TqqR8htikIE46cJUGSL60zjrAo31KoTb7rEvvGVnoHoKnF7eOp-AyLcrc86fhk_NvyBzAMlY6brjEG9QTsMrTng10r/s1600/cats.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:creator'/>
Kemudian letakan di bawah kode <head>
Jangan lupa, ganti tulisan yang berwarna hitam dengan user name sobat sendiri, dan yang berwarna merah ganti dengan url gambar yang sobat inginkan. Gambar ini nantinya akan menjadi gambar home page pada saat blog sobat dishare ke twitter.
Untuk mengatasi gambar postingan yang dibuat sebelum twitter card dipasang di dalam blog tidak tampil, sebaiknya validasi terlebih dahulu url nya di sini. (cukup 1 kali saja/postingan)
Caranya, masukan url postingan ke dalam kotak yang sudah disediakan, lalu klik preview card. Untuk memperjelas, perhatikan gambar di bawah ini
Demikianlah cara membuat atau memasang twitter card di blogger, semoga postingan sederhana ini ada manfaatnya bagi sobat-sobat semua.
Akhir kata, saya ucapkan terima kasih sudah berkunjung ke #holidincom dan membaca postingan cara memasang twitter card di blogger.