Blogger İçin Pinterest Widget

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.

 

 

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ı