Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1356
  • Last Modified:

Classic ASP VBScript - Add dynamic Facebook button to images

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: http://dksart.com/art.asp)


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) {
                e.preventDefault();

                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 = "http://www.facebook.com/sharer.php?u=" + 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 = window.open(url, "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">
<p><%=(rsImages.Fields.Item("imageCaption").Value)%></p>
</div>
</a>
</article>  

Open in new window




Thank you so much!
Shane
0
lshane
Asked:
lshane
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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.
0
 
lshaneAuthor Commented:
OK thank you.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now