Classic ASP VBScript - Add dynamic Facebook button to images

Posted on 2013-12-18
Last Modified: 2013-12-22
Hi, Experts.

I am majorly stumped.

I have a site with a simple ASP VBScript repeat region of images that pop up into a lightbox-type of window.

I have a "canned" script that overlays Twitter and Facebook icons to share them, respectively.

(View here:

I cannot seem to get the Facebook image to share correctly.

No matter which image I choose, it continually shares the site's background image, and the page's TITLE.

HOWEVER - when looking at the URL in the Facebook popup window, it shows the correct image in the query string.

If you test it on the site, you will see what I'm referring to.

Below, I have pasted the .js blocks and the ASP repeat region block.
(Please let me know if you need anything else).

Here they are:

JAVASCRIPT (From a linked .js file in the page)
        var qualifyURL = function (url) {
            var img = document.createElement('img');
            img.src = url; // set string url
            url = img.src; // get qualified url
            img.src = null; // no server request
            return url;

        var setupFacebook = function ($tiles) {
            addSocialIcon($tiles, "fb-icon fa fa-facebook", "Facebook");
            $tiles.find(".fb-icon").click(function (e) {

                var image = $(this).parents(".tile:first").find("img.item");

                var $caption = $(this).parents(".tile:first").find(".caption");
                var text = plugin.settings.facebookText || document.title;
                if (!plugin.settings.facebookText && $caption.length == 1 && $caption.text().length > 0)
                    text = $.trim($caption.text());

                var url = "" + encodeURI(location.href.split('#')[0]) + "&t=" + encodeURI(text);

                if (image.length == 1) {
                    var src = image.attr("src");
                    url += ("&p[images][0]=" + qualifyURL(src));

                var w =, "ftgw", "location=1,status=1,scrollbars=1,width=600,height=400");
                w.moveTo((screen.width / 2) - (300), (screen.height / 2) - (200));

Open in new window

REPEAT REGION BLOCK on the image page:
<article class="tile ftg-<%=(rsImages.Fields.Item("imageCatClass").Value)%>">
<a class="tile-inner" href="<%=(rsImages.Fields.Item("imagePath").Value)%>" title="">
<img class="item" src="<%=Replace((rsImages.Fields.Item("imagePath").Value),".","_thumb.")%>" />
<div class="caption">

Open in new window

Thank you so much!
Question by:lshane
LVL 52

Accepted Solution

Scott Fell,  EE MVE earned 500 total points
ID: 39728394
This has nothing to do with your asp code.  Remember, asp is server side and runs on the web server before the page even loads.  Once you html is rendered, then your js/jquery is run.  The only way your asp code would come into play is if it is generating the html and your code was not correct and causing html errors.

Right now, the only error that does not validate is the fact you are not using alt tags. However, this will not affect the layout.  

It is best in a case like this to start out at the end with your rendered html or static html.  In this case, it is kind of a mess and that is the reason why facebook can't find your images when shared..  

The first thing I noticed is you have your background image in your page as an image and then I saw it again on the style sheet.   Then all of the images are below.  

I would start the page over as a static html page first.  Make sure your background is a background of an element and not an image in your html to start.   somehow from either your css or your js code you have managed to move the other images  over what you are calling the background image.  

Get this working as a simple static page.  Then rebuild it using your asp/vb.

Author Closing Comment

ID: 39735213
OK thank you.

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question