Panduan sederhana untuk menunjukkan kepada Anda Bagaimana Anda Dapat Menambahkan Widget Instagram di blog Blogger, Instagram adalah aplikasi berbagi gambar yang Menyenangkan dan telah dengan cepat menjadi salah satu platform media visual sosial terbaik dan situs media sosial yang berkembang pesat dengan lebih dari 400 juta pengguna + Bulanan dan rata-rata 80 juta + foto dibagikan setiap hari.
Ada berbagai cara untuk meningkatkan pengikut Instagram Anda dan menyematkan widget Instagram di situs web / blog blogger Anda bisa sangat membantu untuk membangun pengikut yang kuat di platform.
Karena Instagram tidak memiliki widget resmi mereka sehingga Anda dapat menggunakan widget javascript pihak ketiga untuk menunjukkan umpan Instagram Anda di blog Anda. Seperti yang telah kami sertakan dalamTemplate Blogger Amazine danTemplate Blogger Blush kami
Untuk menggunakan widget ini dengan benar, Anda harus membuat token akses instagram .
Catatan: Langkah-langkah di bawah ini hanya akan berfungsi di Template Blogger kami.
Widget Instagram Gaya Blogger
Kami telah menyediakan beberapa gaya foto Instagram untuk disematkan di situs web / blog Anda secara langsung.Cukup salin kode di bawah ini dan rekatkan widget javascript / HTML apa saja di tata letak blogger.
Di Dasbor Blogger Klik Tata Letak.
Klik Edit pada Widget Instagram Di area footer .
Jika tidak ada widget maka Tambahkan widget dan PilihHTML / Javascript .
Salin Kode berikut:
Widget Instagram Blogger Untuk Gaya Footer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | < div class = 'media-left' > < div class = 'table-cell-m' > < h4 class = 'widget-title' > Instagram < / h4 > < / div > < / div > < div class = 'instagram-footer' > < div class = 'dark-wrapper' > < div class = 'cf' / > < ul id = 'instafeed' class = 'insta-slick' > < / ul > < / div > <script type = 'text/javascript' > //<![CDATA[ $ ( document ) . ready ( function ( ) { var feed = new Instafeed ( { get : 'user' , userId : 3818481741 , limit : 14 , sortBy : 'random' , accessToken : '3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145' , after : function ( ) { var owl = $ ( '.insta-slick' ) ; owl . slick ( { dots : false , infinite : false , speed : 300 , prevArrow : '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>' , nextArrow : '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>' , arrows : true , slidesToShow : 5 , slidesToScroll : 2 , autoplay : false , draggable : true , infinite : true , autoplaySpeed : 3500 , responsive : [ { breakpoint : 1024 , settings : { slidesToShow : 3 , slidesToScroll : 3 , infinite : true , dots : true } } , { breakpoint : 600 , settings : { slidesToShow : 2 , slidesToScroll : 2 } } , { breakpoint : 480 , settings : { slidesToShow : 1 , slidesToScroll : 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] } ) ; } , template : '<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left"><div class="img-box"><img src="{{image}}" /></div> <div class="info-box"><div class="info-content"><div class="insta-likes"><i class="fa fa-heart"></i>{{likes}}</div> <div class="insta-com"><i class="fa fa-comment-o"></i>{{comments}}</div> </div></div></div></a></li>' , resolution : 'standard_resolution' } ) ; feed . run ( ) ; } ) ; //]]> </script> < / div > < / div > |
Widget Instagram Blogger Hanya Untuk Bilah Sisi
Untuk Sidebar, Instagram Gunakan Kode di bawah ini.
Untuk Gaya Grid Instagram
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < ul id = 'instaside' > < / ul > <script type = 'text/javascript' > //<![CDATA[ $ ( document ) . ready ( function ( ) { var instaside = new Instafeed ( { get : 'user' , target : 'instaside' , userId : 15920822 , limit : 9 , sortBy : 'random' , accessToken : '1531863919.1677ed0.0184dae01d2745a0be5ddea16e4fd8ef' , template : '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>' , resolution : 'standard_resolution' } ) ; instaside . run ( ) ; } ) ; //]]> </script> |
Untuk Instagram Slider Style For Sidebar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | < ul id = 'instaside' > < / ul > <script type = 'text/javascript' > //<![CDATA[ $ ( document ) . ready ( function ( ) { var instaside = new Instafeed ( { get : 'user' , target : 'instaside' , userId : 381848181 , limit : 9 , sortBy : 'random' , accessToken : '381848181.1677ed0.14b2e5f55b6842a2a898da10ef99cb54' , after : function ( ) { var owl = $ ( '#instaside' ) ; owl . slick ( { dots : false , infinite : false , speed : 800 , prevArrow : '<div class="slider-nav-prev"></div>' , nextArrow : '<div class="slider-nav-next"></div>' , arrows : true , slidesToShow : 1 , slidesToScroll : 1 , fade : true , cssEase : 'linear' , autoplay : true , draggable : true , infinite : true , autoplaySpeed : 3500 , responsive : [ { breakpoint : 1024 , settings : { slidesToShow : 1 , slidesToScroll : 1 , infinite : true , dots : true } } , { breakpoint : 600 , settings : { slidesToShow : 2 , slidesToScroll : 2 } } , { breakpoint : 480 , settings : { slidesToShow : 1 , slidesToScroll : 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] } ) ; } , template : '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>' , resolution : 'standard_resolution' } ) ; instaside . run ( ) ; } ) ; //]]> </script> |
Catatan :
ubah saja # dengan url instagram Anda
Hasilkan Token Akses
Anda memerlukan token akses agar widget instagram berfungsi Buka url : instagram access token generator
Hasilkan token akses
Masuk dan Ikuti langkah-langkahnya :
Maka Anda akan diberi token akses seperti ini.
1531863919.1677ed0.23d238bc564249e799095d060c7521327
Ikuti langkah selanjutnya
Tambahkan ID Pengguna Instagram:
Untuk Mengubah No. Foto Instagram di slider
slidesToShow: 5 (Ubah nilai dalam kode instagram).
Untuk Mengubah Total Jumlah foto Instagram
limit: 14 (Ubah nilai dalam kode instagram).