Solved

Classic ASP VBScript - Add dynamic Facebook button to images

Posted on 2013-12-18
2
1,242 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

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 …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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)

762 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

18 Experts available now in Live!

Get 1:1 Help Now