Rabu, 10 September 2014
Kamis, 14 Agustus 2014
Meta Konten Untuk Blog
Inilah Tag yang harus di pasang di blog anda, agar blog cepat terindek google.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!-- This code line insert necessary meta tags to the blog header -->
<b:include data='blog' name='all-head-content'/>
<!-- font-awesome Icons [template icons][Start] -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<!-- font-awesome Icons [End] -->
<!-- Resonsive Meta tag -->
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<!-- Resonsive Meta tag [End] -->
<!-- Web pages Titles [Start] -->
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>
Not Found - <data:blog.title/>
</b:if>
</b:if>
</title>
<!-- Web pages Titles [End] -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<!-- Auto Redirect To Resonsive Desgin Script [Remove it and use Blogger Basic Sittings In case you need this][Start] -->
<script type='text/javascript'>
//<![CDATA[
var curl = window.location.href;
if (curl.indexOf('m=1') != -1) {
curl = curl.replace('m=1', 'm=0');
window.location.href = curl;
}
//]]>
</script>
<!-- Begin Open Graph -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Blog Logo URL Here' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='Facebook App ID here' property='fb:app_id'/>
<meta content='Facebook Admins ID here' property='fb:admins'/>
<!-- End Facebook Open Graph -->
<!-- Begin twitter card -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='@templateism' name='twitter:site'/>
<meta content='@templateism' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
</b:if>
</b:if>
</b:if>
<!-- End twitter card -->
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!-- This code line insert necessary meta tags to the blog header -->
<b:include data='blog' name='all-head-content'/>
<!-- font-awesome Icons [template icons][Start] -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<!-- font-awesome Icons [End] -->
<!-- Resonsive Meta tag -->
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<!-- Resonsive Meta tag [End] -->
<!-- Web pages Titles [Start] -->
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>
Not Found - <data:blog.title/>
</b:if>
</b:if>
</title>
<!-- Web pages Titles [End] -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<!-- Auto Redirect To Resonsive Desgin Script [Remove it and use Blogger Basic Sittings In case you need this][Start] -->
<script type='text/javascript'>
//<![CDATA[
var curl = window.location.href;
if (curl.indexOf('m=1') != -1) {
curl = curl.replace('m=1', 'm=0');
window.location.href = curl;
}
//]]>
</script>
<!-- Begin Open Graph -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Blog Logo URL Here' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='Facebook App ID here' property='fb:app_id'/>
<meta content='Facebook Admins ID here' property='fb:admins'/>
<!-- End Facebook Open Graph -->
<!-- Begin twitter card -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='@templateism' name='twitter:site'/>
<meta content='@templateism' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
</b:if>
</b:if>
</b:if>
<!-- End twitter card -->
Selasa, 22 Juli 2014
Facebook Jadi Komentar
Dan Kotak Komentar facebook ini berada bawah di setiap postingan blog
dan berada di atas komentar blog bawaan blogger. jika sobat tertarik
dengan tampilan komentar facebook ini bisa segera mempraktekkan langkah
membuat komentar facebook terbaru ini. untuk melihat penampakan facebook
komementar sobat bisa lihat gambar di bawah ini atau lihat langsung
gambarnya yang ada di bawah artikel ini.
Penampakan gambar facebook di bawah postingan blog
Sebelum memulai meletakkan kode komentar facebook sobat di haruskan membuat semacam aplikasi facebook untuk mensinkronkan antara blog dan facebook. saya anggap semua sudah mempunyai akun facebook namun jika ada belum mempunyai akun bisa membuat akun facebook dengan lihat disini
Cara Membuat aplikasi ID Komentar facebook
1. Pertama klik link ini untuk membuat aplikasi facebook jika sudah sampai pilih register as developer
2. Pilih "lanjutkan"
3. Jika muncul seperti gambar seperti ini sobat klik "lewati saja"
4. Namai aplikasi sobat dengan nama sembarang yang penting nama itu "valid"
5. Isi chaptha dahulu dan klik lanjutkan.
6. Aplikasi sudah selesai sobat tinggal isi di bagian website with facebook log in dengan alamat URL blog sobat. kemudian klik "simpan perubahan"
dan untuk melihat nomer ID facebooknya sobat tinggal melihat nomer ID Facebook nya. di bagian paling atas yang nantinya akan di pasangkan di blog sobat.
berikut langkah-langkah mudah membuat nya
1. Masuk ke Blogger
2. Pilih Tab TEMPLATE lalu di sampingnya klik EDIT TEMPLATE
3. Cari kode <head> yang biasanya ada di bagian atas atau jika sobat kesulitan mencari kodenya sobat bisa cari dengan menekan tombol CTRL + F di keyboard lalu masukkan kode <head> lalu tekan ENTER setelah ketemu sobat letakkan kode di bawah ini di bawah kode <head>
<meta content='845857439200006' property='fb:app_id'/>
<meta content='daniesh.alfie' property='fb:admins'/>
yang berwarna merah sobat ganti dengan nomer ID facebook atau ID profile facebook yang sobat dapatkan dari cara nomer/gambar nomer 6.
4. Cari kode </head> lalu letakkan kode di warna biru bawah ini di atasnya </head>
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
5. Yang berikut nya adalah mencari kode <data:post.body/> cara mencarinya sama dengan cara nomer 3. setelah ketemu dengan kode nya sobat tambahkan kode di bawah ini di bawah kode <data:post.body/> (jika kode <data:post.body/> ada 2 atau lebih maka letakkan kode warna biru ini di bawah kode <data:post.body/> yang paling bawah atau yang terakhir)
<!-- FORM KOMENTAR FACEBOOK -->
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : '845857439200006',
status : true,
cookie : true,
xfbml : true});};
(function() {var e = document.createElement('script');e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script><fb:comments data-width='600' expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>
</b:if>
<!-- FORM KOMENTAR FACEBOOK -->
Keterangan :
Ganti kode warna merah dengan ID facebook sobat.
6. yang terakhir "simpan template"
Semoga artikel Cara menambah komentar facebook di bawah artikel blog bisa bermanfaat kepada sobat. selamat mencoba dan semoga sukses. terima kasih
Senin, 21 Juli 2014
Comentar di Facebook
Setelah saya share artikel tentang Cara Membuat Fanspage Facebook Untuk Blog, sekarang saya akan share artikel tentang bagaimana Cara Mudah Membuat / Menambahkan kolom Komentar Facebook Pada Blog untuk sobat blogger.
Lalu bagaimana cara membuat kotak
komentar facebook di blog? Sebenarnya facebook sudah menyediakannya,
tapi sebagian dari kita atau lebih mungkin belum tau. Saya sendiri
sebenarnya tidak tau akan adanya itu, setelah saya googling-googling,
akhirnya saya menemukan cara mudah membuat kolom komentar facebook di blog dan tidek ribet dalam pembuatannya.
 |
| Contoh Kotak Komentar Facebook di Blog |
Berikut cara untuk membuat kotak komentar facebook di blog. Cara ini berguna bagi yang sudah membuat fanspage facebook.
- Login ke akun Facebook sobat.
- Buka URL berikut : https://developers.facebook.com/docs/plugins/ Ini adalah cara singkat dan mudah untuk sobat membuat kotak komentar facebook di blog.
- Pilih Comments.
- Kemudian akan tampil gambar seperti dibawah ini.
- Kotak yang berwarna merah adalah kotak yang harus diisi oleh sobat untuk membuat kotak komentar facebook.
- Kotak yang berwarna biru adalah preview kotak komentar yang sobat buat.
Oke, lanjut ke topik pembuatan lagi
- Pada URL to comment on sobat isi dengan halaman fanspage facebook yang telah sobat buat sebelumnya. Contoh : https://www.facebook.com/pages/Mari-Berbagi/621944211167293. Ini adalah contoh fanspage URL yang saya buat.
- Jika URL yang sobat masukan benar, maka akan muncul logo/profil picture dan kotak komentar seperti yang saya garis kotak merah.
- Isian Width disesuaikan dengan lebar kolom artikel di blog sobat. Sebagai contoh, lebar kolom artikel saya 800 px, jadi saya isikan ke ke kolom Width 725 px.
- Isian Number of post terserah sobat blogger. Pada kasus saya ini saya biarkan saja 10.
- Pada Color Scheme sobat blogger dapat memilih tampilan kotak komentar. (Disesuaikan dengan template sobat masing-masing)
- Bila dirasa sudah cocok semuanya, sobat blogger klik Get Code, sehingga muncul tampilan seperti ini :
- Langkah selanjutnya yaitu, Copy Script no 1
- Lalu masuk ke akun Blogger sobat, Pilih Template, Pilih Edit HTML
- Cari </head> dengan cara Ctrl+F
- Jika sudah ketemu </head> paste Script no 1 Tepat dibawah kode </head>
- Kemudian Simpan / Save Template
Untuk Script no 2
- Copy script no 2
- Pilih Template, Pilih Edit HTML, kemudian centang Expand Widget Templates. (Untuk versi Edit HTML sebelum Pembaharuan). Untuk Versi Edit HTML terbaru sobat blogger bisa Klik Arrow yang ada di sebelah no script (Pada kasus ini tidak usah di Expand)
- Cari : <div class='post-footer-line post-footer-line-3'><span class='post-location'>
- Paste / tempel Script no 2 tepat dibawah kode <div class='post-footer-line post-footer-line-3'><span class='post-location'>
- Save Tempate
Catatan Penting Untuk Sobat Blogger yang Mengalami Error Saat Menyimpan Template Script no 1
Jika ada dari sobat blogger yang mengalami Error saat menyimpan template script no 1, diperkenankan buat mem-Parse coding HTML Script 1 Disini. Setelah itu Copy hasil Parse tersebut, kemudian Paste / Tempel di bawah kode </head> (Ini hanya berlaku bagi sobat blogger yang mengalami Error)
Langganan:
Postingan (Atom)