Solved

Classic ASP VBScript - Add dynamic Facebook button to images

Posted on 2013-12-18
2
1,257 Views
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: 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
Comment
Question by:lshane
2 Comments
 
LVL 52

Accepted Solution

by:
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.
0
 

Author Closing Comment

by:lshane
ID: 39735213
OK thank you.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now