Cara membuat bottom facebook di blog di bawah artikel

Salah satu teknik atau metode SEO OFF Page adalah membuat dan memasangkan widget facebook di blog.

Logikanya semakin banyak adders atau followers dari fanspage facebook, semakin tinggi kemungkinan artikel banyak dibaca oleh orang lain.

Dan lebih menyenangkannya lagi ialah ada kemungkinan meningkatnya penghasilan Google AdSense kita.

2 Cara Memasang Widget Facebook di Blogger Blogspot

Buat terlebih dahulu halaman facebook dari blog kita. Setelah berhasil, masuk ke link plugin Facebook dibawah ini:

https://developers.facebook.com/docs/plugins/page-plugin

Isi URL halaman facebook yang telah dibuat, tab biarkan terisi "timeline", lebar disesuaikan dengan sidebar (jika ukuran sidebar 300px dan ditempatkan di sidebar pula; maka masukkan lebar 300px).

Untuk tingginya sendiri disesuaikan sama preview yang muncul pada tampilan bawah.

Dibawahnya lagi ada 4 buah settingan yang bisa disesuaikan yakni:

1. Menggunakan judul yang lebih kecil
2. Sembunyikan foto sampul
3. Sesuaikan dengan lebar wadah plugin; dan
4. Tampilkan wajah teman

Biarkan ke 4 setting ini default (tidak perlu diubah). Jika sudah, klik tombol "dapatkan kode". Ok! Kita mendapatkan kode widget facebook ini.

Pilih menu iFrame, copy kode tersebut secara menyeluruh.

1. Masuk ke blogger > Layout blogger
2. Add a Gadget > HTML / JavaScript
3. Paste kode tadi ke HTML / JavaScipt
4. Save template, Ok!

Perhatikan pada sidebar blog apakah ukurannya sudah sesuai atau tidak. Jika tidak sesuai, silahkan atur tinggi dan lebarnya pada kode tadi.

Atau jika ingin lebih mudah, ulangi tutorial diatas dan edit lagi ukuran lebar dan tinggi widget facebook ini. Ok semoga berguna.

UPDATE:

Copas kode dibawah ini pada Add a Gadget layout blogger:

<iframe
src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/198572440681749&amp;width=290&amp;height=250&amp;
amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" style="border:none;height:250px;
overflow:hidden;width:290px;">
</iframe>

Ubah kode berwarna merah diatas dengan ID facebook agan. Berhasil gak? Ane berhasil nih. Nggak mungkin gak berhasil. Oke.*

Labels: Desain Blogger

Thanks for reading 2 Cara Memasang Widget Facebook di Blogger Blogspot. Please share this article.

Tombol share di bawah postingan blog wajib dipasang agar memudahkan admin dan pengunjung membagikan postingan ke akun media sosial Facebook, Twitter, Pinterest, LinkedIn, dan WhatsApp (WA).

Desain Social Share Button sangat banyak, termasuk tampilan dari Blogger dan WordPress (menggunakan plugin Jetpack).

Dari sekian banyak tombol share, saya suka yang berikut ini. Tampilannya simple tapi bagus banget. Facebook dan Twitter dikhususkan, karena memang kedua medsos itu paling banyak mendatangkan pengunjung.

Berikut ini cara memasangnya di template blog dengan posisi di bawah postingan blog. Karena ikon medsosnya menggunakan font awesome, maka pastikan ada link ke font awesome seperti ini di template blog Anda:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Jika belum, ada pasang di atas kode </head>

1. Klik Tema > Edit HTML

2. Copas kode CSS Tombol Berbagi Posting ke Media Sosial berikut ini di atas kode </head>

<b:if cond='data:view.isPost'>
<style>
.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}
}
</style>
</b:if>

3. Copas HTML Tombol Berbagi Posting ke Media Sosial berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class=’post-footer’>

<b:if cond='data:view.isPost'>
<div class='share'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
<li class='facebook'><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Facebook</span></a></li>
<li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Twitter</span></a></li>
<li class='pinterest'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
<li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></li>
</ul>
</div>
<div class='clear'/>
</div>
</b:if>

4. Save! 

Simpan template!

Kini Tombol Share ke Media Sosial sudah muncul di bawah postingan blog Anda.

Untuk WordPress bisa menggunakan plugin. Saya sendiri menggunakan Share Buttons by ShareThis di blog ini.