Customizing SMF > Tips and Tricks

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

(1/2) > >>

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: ---.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;
}

--- End code ---

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: ---/*
* 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);

--- End code ---

Open your /index.template.php and find:

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

--- End code ---

Add after:

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

--- End code ---

Find:

--- Code: ---</body></html>';
}

--- End code ---

Add before:

--- Code: ---        <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>

--- End code ---

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: ---</body></html>';
}
--- End code ---

Add before:


--- Code: ---<!-- 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>

--- End code ---

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" />


Navigation

[0] Message Index

[#] Next page

Go to full version