10 Nisan 2012 Salı

Blogger İçin Pinterest Widget

21 yorum

Genel manasıyla sosyalleştrilmiş bir çevrimiçi pano diyebileceğimiz Pinterst, 2012 ile birlikte tüm dünyada olduğu gibi ülkemizde de hızla yaygınlaşarak sosyal medyanın yeni fenomeni olma yolunda ilerlemeye devam ediyor.

 

Blog yazarları ( özellikle bayanlar ), Pinterest’e çabuk ayak uydurmuşlar gibi gözüküyor.Oluşturdukları panolarda kendi bloglarında ki ve internette dolaşırken beğendikleri görsel öğeleri takipçileriyle paylaşıyorlar.

 

Pinterest Widget

 

Pinterst bu kadar yaygınlaşmışken hala bir kod yazarının Blogger için Pinterest widget’ı geliştirmiş olmamasına şaşırmışken Marie Mosley ile karşılaştım.Kendisi Blogger için güzel bir Pinterst widget’ı kodlamış.Bu widget ile Pinterest sayfanızda paylaştığınız öğeleri blogunuzun sidear’ında gösterebiliyorsunuz.

 

Bu widget’ı blogunuza eklemek için aşağıdaki kodları HTML/JavaScript gadget penceresine yapıştırın.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Plugin: jquery.zRSSFeed
*
* Version: 1.0.1
* (c) Copyright 2010, Zazar Ltd
*
* Description: jQuery plugin for display of RSS feeds via Google Feed API
*              (Based on original plugin jGFeed by jQuery HowTo)
*
* Modified by Richard Mackney (originally for Instagram images, see https://gist.github.com/865838)
* Modified further by Marie Mosley for a Pinterest "gadget" for Blogger.
* Tutorial for use with Blogspot at: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html
**/

(function($){

    var current = null;

    $.fn.rssfeed = function(url, options) {   

        // Set plugin defaults
        var defaults = {
            limit: 6,
            titletag: 'h4',
            content: true,
            snippet: true,
            showerror: true,
            errormsg: '',
            key: null
        }; 
        var options = $.extend(defaults, options);

        // Functions
        return this.each(function(i, e) {
            var $e = $(e);

            // Add feed class to user div
            if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');

            // Check for valid url
            if(url == null) return false;

            // Create Google Feed API address
            var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
            if (options.limit != null) api += "&num=" + options.limit;
            if (options.key != null) api += "&key=" + options.key;

            // Send request
            $.getJSON(api, function(data){

                // Check for error
                if (data.responseStatus == 200) {

                    // Process the feeds
                    _callback(e, data.responseData.feed, options);
                } else {

                    // Handle error if required
                    if (options.showerror)
                        if (options.errormsg != '') {
                            var msg = options.errormsg;
                        } else {
                            var msg = data.responseDetails;
                        };
                        $(e).html('<div class="rssError"><p>'+ msg +'</p></div>');
                };
            });               
        });
    };


    // Callback function to create HTML result
    var _callback = function(e, feeds, options) {
        if (!feeds) {
            return false;
        }
        var html = '';   
        var row = 'odd';   

 

        // Add body
        html += '<div class="rssBody">' +
            '<ul>';

        // Add feeds
        for (var i=0; i<feeds.entries.length; i++) {

            // Get individual feed
            var entry = feeds.entries[i];


            // Add feed row
            html += '<li class="rssRow '+row+'">' +
                '<'+ options.titletag +'><a href="'+ entry.link +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
            if (options.date) html += '<div>'+ pubDate +'</div>'
            if (options.content) {

                // Use feed snippet if available and optioned
                if (options.snippet && entry.contentSnippet != '') {
                    var content = entry.contentSnippet;
                } else {
                    var content = entry.content;
                }

                html += '<p><a href="'+entry.link+'" title="'+ entry.title +' " target="_blank">'+ content +'</a></p>'
            }

            html += '</li>';


            // Alternate row classes
            if (row == 'odd') {
                row = 'even';
            } else {
                row = 'odd';
            }           
        }

        html += '</ul>' +
            '</div>'


        $(e).html(html);

        //correct href for images so they point to Pinterest
            $(function() {
              $('.rssFeed a').each(function() {
                var href = $(this).attr('href');
                $(this).attr('href', 'http://www.pinterest.com' + href);
  });
});

          
    };
})(jQuery);

</script>


<style type="text/css">
body {
    margin: 0px;
}

.rssFeed a {
    color: #444;
    text-decoration: none;
        text-display: none;
}
.rssBody ul {
    list-style: none;
}
.rssBody ul, .rssRow, .rssRow h4, .rssRow p {
    margin: 0;
    padding: 0;
}

.rssBody li {
        position: relative;
        color: transparent;
        width: 100px;
        height: 100px;
        overflow: hidden;
    padding: 6px;
    float: left;
        z-index: 1;
}

/* This part of the style shows the full photo when the thumbnail is hovered. If you'd prefer not to use this, remove .rssBody li:hover, its curly braces, and everything inside its curly braces. This was designed for a left sidebar on Blogger. For a right sidebar, play with the translate numbers until the enlarged photo moves the way you want it to. */

.rssBody li:hover {
font-size: 1px;
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);
}

/* end hover image effect */

.rssRow {
    padding: 3px;
}
.rssRow h4 {
    display: none;
}
.rssRow div {
    color: #666;
    margin: 0.2em 0 0.4em 0;
}

</style>


<script type="text/javascript">

/** use your own Pinterest username in the rssfeed url. To display your latest photos from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss  to show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss **/


$(document).ready(function () {
    $('#pinterest').rssfeed('http://www.pinterest.com/Kullanıcı_Adı/feed.rss', {
        limit: 6,
        snippet: false,
        header: false,
        date: false
    });
});

</script>
<!-- Optional logo and gadget title. To use, uncomment it and add in your own Pinterest url, then place your own image link in the quotation marks after img src. -->

<!-- <a href=""><img src=""><br />Latest Pins</a>
-->
<div id="pinterest"></div>

 

Kodlarda değiştirmeniz gereken tek yerkırmızı renkle yazdığım Kullanıcı_Adı.Buraya Pinterest kullanıcı adınızı yazın.Eğer belli bir panodaki resimleri göstermek istiyorsanız buayı şe şekilde değiştirin: Kullanıcı_Adı/Pano_Adı

21 yorum:

  1. hemen uyguladım teşekkürler emeğiniz için

    YanıtlaSil
  2. Öncelikle yanlızca - yalnızca uyardığınız için teşekkür ederim, düzelttim.

    İkinci uyarınızla ilgili şöyle bir hatırlatma yapmak istiyorum:

    Daha önce başka bir yazımda "kadınlar için" diye bir tabir kullanmıştım.15-16 yaşında ki blog yazarı genç kız arkadaşlarımız itiraz ettiler ve "bayan" olarak değiştirmemi istediler.Kullandığım kelimeleri seçerken dikkat etmeye çalışıyorum ama bu konuda hala çelişki içindeyim.

    YanıtlaSil
  3. hocam bır sorum olacak ben blog ısınde yenıyım blogumda resım yayınlıyorum ancak ana sayfamda ıstedıgım gıbı duruyor yanlız bı sıkıntı var ornek vereyım .......____....... noktalı kısımlar resımlerım var ancak sıkıntı su ana sayfamın sag kosesınde yayınladıgım resımlerım vs hepsı gorunuyor ben bunların gorunmesını ıstemıyorum

    YanıtlaSil
  4. :D Hocam Bayan mı Kadın mı tartışması hep var . Bir örnekler soruna çözüm getirmeye çalışayım. Bir arkadaşımın tezi iptal olmuştu neden biliyor musunuz. Tezinde bayanlar yazdığı için.. Bayan evli kadınlara denirmiş. Kadın genel bir isimmiş. bu yüzden kadın kullanılmalı . Bayanda kelimesini sayın hocam Yrd.Doç.Dr. İkram Çınar hiç kabul etmiyor zaten :D bir keresinde ben bayan dediğim için çok kızmıştı. uzun bir yazı oldu ama sanırım duruma açıklık geldi :D

    YanıtlaSil
  5. hocam ben blog açıcamda bana acil kişisel güzel bir blog lazım önerilerinizi bekliyorum

    YanıtlaSil
  6. Feed could not be loaded. mesajı çıkıyor hocam annelik_okulum olarak sadece kırmızı yeri düzelttim save yaptım baştaki mesaj çıkıyor neden acep :)

    YanıtlaSil
  7. @Dilek Dursun
    http://pinterest.com/annelik_okulum/ diye bir pinterest hesabı yok ki

    YanıtlaSil
  8. hocam tamamdır annelikokulum birleşik yazdım oldu iyi ki varsınız ya var olun:))
    sayenizde ögreniyorum ben ilk okul çocugu siz master hocası misali

    YanıtlaSil
  9. '#pinterest').rssfeed('http://www.pinterest.com/annelikokulum/blog/feed.rss', { hocam blog resimlerini seçtim pintresteki olan şablonum bozuldu neden acep:)annelikokulum daki blog resimlerini seçmek istemiştim yanlış mı yazmışım yine bir bakabilir misin

    YanıtlaSil
  10. Scriptin yapımcısı bu şekilde kullanılabileceğini söylemişti ama sanırım yanılmış.Ben de denedim hata verdi.

    Ben kendisiyle iletişime geçip hatayla ilgili bilgi alana kadar http://www.pinterest.com/annelikokulum/feed.rss şeklinde kullanın isterseniz.

    YanıtlaSil
  11. Teşekkürler çok faydalı bir paylaşım oldu benim için.güzel bir şekilde kullanmaya başlıyorum.

    YanıtlaSil
  12. ya ben bulamadım nerden olacağını, lütfen yardım edin :(

    YanıtlaSil
  13. Hocam Ben Bu sayfa da pin widgeti buldum ama id soruyor onu nereden bulabilirim;

    http://business.pinterest.com/widget-builder/#do_embed_pin

    YanıtlaSil
  14. @Yunus Balım
    Pinterest kullanıcı adınızı yazın.

    YanıtlaSil
  15. @Serdar Kara
    Kullanıcı Adını Denedim ama olmadı.

    Facebook beğen kutusu gibi göstermek istiyorum onu nasıl yapabilirim? takip et gibi

    YanıtlaSil
  16. Serdar bey merhaba,
    Java script gadget penceresine kodu yapıştırdım, ancak sadece benim sayfamın olduğu pinterest penceresini açmam mümkün değil mi? Yani genel olarak pinterest değil de benim sayfam?

    YanıtlaSil
  17. @Noblesse
    Kullanıcı adınızı yazdığınızda sizin boardlarınız çıkıyor zaten.

    YanıtlaSil
  18. bana ait olmayan resimler çıkıyor.

    YanıtlaSil
  19. hocam merhaba...kodu kopyaladım yerleşime de ekledim..sadece kullanıcı adımı değiştirip kaydettim ancak hiçbir değişiklik yok buton falan eklenmemiş..ancak yerleşim şemasına gidildiğinde kod orda duruyor ne yapmalıyım ???

    YanıtlaSil
  20. hocam merhaba...kodu kopyaladım yerleşime de ekledim..sadece kullanıcı adımı değiştirip kaydettim ancak hiçbir değişiklik yok buton falan eklenmemiş..ancak yerleşim şemasına gidildiğinde kod orda duruyor ne yapmalıyım ???

    YanıtlaSil

Picardes

LİNKLER