Follow Box Embed Google Plus Instragram And Facebook On AMP HTML

Untuk membuat follower box sosial instragram facebook dan google di blog amp kita hanya perlu gunakan iframe saja.

Kegunaan Follow Box ini adalah untuk meningkatkan jumlah followers di sosial media anda yang berkurang di blog, dengan begitu ketika anda mendaftar banyak follower maka secara otomatis trafik pangunjung juga akan naik.

Gak perlu basa basi langsung saja.

1.

Buat Follow Box facebook atau yang kita kenal facebook like box.
Silahkan anda copy kode berikut ini.
<amp-iframe width="300" 
      height="214" 
      sandbox="allow-scripts allow-same-origin allow-popups" 
      frameborder="0" 
      scrolling="no" 
      src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/like-boxfb.html?page=username"> 
  </amp-iframe>
KETERANGAN.
ganti Page dengan nama/username halaman facebook anda.
Jika ingin menghosting file nya sendiri di GITHUB silahkan simpan kode berikut ini.
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Facebook Like Box</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<style>
body {
  background-color:transparent;
  margin:0;
  padding:0;
}
iframe{border:0}
</style>
<script>
function getQueryVariable(variable) {
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
  var pair = vars[i].split("=");
  if(pair[0] == variable){return pair[1];}
 }
 return(false);
}
var pages = getQueryVariable("page");
</script>
</head>
<body>
<script>
document.write('<iframe src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&app_id=113869198637480&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&container_width=300&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2F'+ pages +'&locale=en_US&sdk=joey&show_facepile=true&small_header=false" width="300" height="214" style="border:0;" allowfullscreen></iframe>');
</script>
</body>
</html>

Ganti page dengan username halaman anda

2.

Buat google plus follower.
simpan kode berikut ini.
<amp-iframe width="280" 
      height="240" 
      sandbox="allow-scripts allow-same-origin allow-popups" 
      frameborder="0" 
      scrolling="no" 
      src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/gplus-followerbox.html?user=+page&theme=light"> 
  </amp-iframe>
KETERANGAN.
ganti page nya dengan username google plus anda.
bisa juga anda sesuaikan temanya sesuai keinginan anda ganti DARK jika ingin gelap dan LIGHT jika ingin terang.

Ingin menghosting google plus follower sendiri silahkan simpan kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Plus Followers</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body {
  background-color:transparent;
  margin:0;
  padding:0;
  color:#212121;
  font-family:Roboto,Arial,sans-serif;
}
a {
  color:#212121;
  text-decoration:none;
}
a:hover {color:#0379C4}
iframe{border:0}
</style>
</head>
<body>
<div class='g-plus' data-action='followers' data-height='240' data-href='https://plus.google.com/username' data-source='blogger:blog:followers' data-theme='DARK' data-width='280'></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>
Ganti username dengan username google plus anda dan bisa sesuikan themes nya juga DARK atau LIGHT

3.

Buat box Instragram.
Untuk box instragram anda bisa gunakan embed postingan anda yang ada di instagram tentunya ke blog amp anda dengan menggunakan AMP-INSTRAGRAM.
Silahkan simpan kode berikut ini.
<amp-instagram
      data-shortcode=" BUO16FVDjtv"
      data-captioned ="BUO16FVDjtv"
      data-default-framing
      ="BUO16FVDjtv"
      width="500"
      height="500"
      layout="responsive">
  </amp-instagram>

KETERANGAN.
ganti ID intragram denagan id dari postingan instragram anda.
Saya menggunakan amp intragram dengan frame,captions dan overflow elements.
dan jika ingin amp instragram embed lain bisa baca caranya di postingan berikut ini http://bloggingmobile.blogspot.co.id/2017/05/how-to-embed-instagram-in-amp-html.html

Cara menerapkannya bisa di editor HTML template blog anda atau dengan cara menambahkannya di widget HTML JAVASCPIT.
klik layout,tambahkan widget HTML javascpit dan simpan.


Selamat mencoba...

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×