Cara membuat widget fanspage melayang di blog

Baca Juga

Cara membuat fanspage melayang di blog -Fanspage merupakan salah satu hal penting untuk melakukan promosi di media sosial, terlebih lagi dengan blog yang minim pengunjung, tentunya hal ini sangat diwajibkan, oleh karena itu saya sekarang akun memberikan sedikit tutorial tentang :

Cara membuat fanspage melayang di blog!!

Hal pertama yang perlu agan lakukan adalah membuat fanspage nya terlebih dahulu, agan bisa langsung kesini, dan langsung ikuti saja langkah langkahnya.

https://m.facebook.com/pages/creation/?cat_ref_page_id=0&ref_type=bookmark&_rdr

• Menyalin url fans page

Untuk memasang widget fans page nya, agan perlu menyalin url nya dulu agar, bisa muncul di blog.

• Tambahkan widget HTML/JavaScript

Jika sudah dapat url fans page Facebook nya, sekarang tinggal memasangnya di blog kita, caranya agan menuju menu tata letak > tambahkan widget > HTML/JavaScript

• Pastekan kode dibawah ini ke dalam kolom kosong seperti gambar diatas!!

<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/0tamegakun&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
</div>
</div>

Jika sudah, agan ganti kode yang berwarna merah dengan url fans page agan, dan sebelum disave tidak usah diberi judul.

Terakhir kita tes apakah muncul atau enggak, jika agan buka pada tab browser biasa kemungkinan tidak akan muncul, jadi agan gunakan mode penyamaran atau incognito mode, agar sesegera bisa melihatnya.

Bagaimana mudah bukan cara membuat fanspage melayang di blog semoga dengan adanya popup fans page Facebook di blog agan, pengunjung serta BPK tambah menaik dan meningkatkan. Jika masih ada yang perlu ditanyakan silahkan komen dibawah.