[Tip/Trick] Pin your bbc tag images with this jQuery Pinterest Plugin

[Mick.]

As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily.

Your users will be able to pin any images posted when using the bbc tag in your forum posts. I will show you how to pin your bbc tagged images straight away in the below tutorial.

Demo: Pin it to Pinterest

In your theme's CSS folder, create a file called jquery.pinit.css and add the following:

Code Select Expand


.pinit {
position:relative;
display:inline-block;

}

.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:auto;
z-index:200;
display:none;
background: rgba(255, 255, 255, 0.75);
text-align:center;
}

.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url(../images/pinit-button.png) no-repeat 0 0;
text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
background-position: 0 -21px;
}

.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}


Save the pinterest button as pinit-button.png and load it to your theme's image folder.


In your theme's JS folder, create a file called jquery.pinit.js and add the following:

Code Select Expand


/*
* jQuery Pinit for Pinterest
* Author: Kevin Liew
* Website: queness.com
* License: http://redactorjs.com/license/
* Usage: $('img').pinit();
*/

(function($){

    //Attach this new method to jQuery
    $.fn.extend({
         
        pinit: function(options) {

var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}

var options = $.extend(defaults, options);
var o = options;

            //Iterate over the current set of matched elements
            return this.each(function() {

              var e = $(this),
              pi_media = e.data('media') ? e.data('media') : e[0].src,
              pi_url = o.pageURL,
              pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
              pi_isvideo = 'false';
              bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);

var eHeight = e.outerHeight();
              e.wrap(o.wrap);
              e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});     

$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});


            });
     
        }
       
    });

})(jQuery);


Open your /index.template.php and find:

Code Select Expand

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '


Add after:

Code Select Expand

       
        <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/jquery.pinit.css" />


Find:

Code Select Expand


</body></html>';
}


Add before:

Code Select Expand


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.pinit.js">
<script type="text/javascript">
                $(function () {
$(".bbc_img").pinit();

     });
</script>


Credits: Queness - Design Inspirations, jQuery Tutorials and Web Design & Development Community

[Realinfo]

I tried all steps, But not working

2.0.7 Default theme

[Kindred]

Given that you have removed the SMF copyright (which is legally allowed) we basically have chosen to not provide support to such sites - since, by removing the copyright, you have essentially stated that you do not need support from us.

(and you have removed the simple portal copyright - which is typically NOT allowed)

[Wellwisher]

Hello SMF Devs/ Community,

Firstly I'd like to apologise for resurrecting an old thread, but after some hardcore googling... this thread was the closet fit to my problem.

I am trying to target bbc image tags with Pinterest. I have followed the instructions posted by Mick to-the-letter but Pinterest is still targetting every single image on the forum, including index.php & banners.

I am beta testing this on my local install using wamp to avoid bugs on a production site, running default 2.0.9 SMF theme. P.s Also tested on the latest version of SMF, I still get the same issue. Help would be nice. 

[Wellwisher]

Here's my lazy solution. To get pinterest working on all your forum images add:

Open your /index.template.php and find:

Code Select Expand

</body></html>';
}

Add before:

Code Select Expand


<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer  data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>


Now, the downside is of doing it this way is pinterest will target all images in your forum (apart from the small pictures, icons and really tiny thumbnails). To prevent pinterest from targetting your banners etc, simple add the alt img tag nopin = "nopin"

Example:

<img style="border: 0px;" src="MY-IMAGE.png" width="100px" height="100px" nopin = "nopin" />

[barrysingh102]

can i use same code on my wordpress based website ?