Explanation of issue:
Hi.
I'm developing a personal webpage using HTML and CSS. I have also incorporated Bootstrap and a number of its components to achieve responsiveness.
I'm using Locally linked Bootstrap file/folder (not the online CDN). I want to use Locally downloaded Bootstrap until I have finished development.
However, I'm having difficulty testing all the features of the site sufficiently, especially the carousel component which features multiple gallery photos, because it keeps refreshing on me and this is really disruptive.
In other words, while testing something or clicking through the photo gallery, before I go through a quarter of the entire photos in the gallery, the page will suddenly refresh itself, causing me to start my testing afresh and this never ends.
Question:
How can I disable auto-refresh on the site or at least to set it to a very large value, so it doesn't disrupt my work?
Thank you.
Answer:
I have finally figured out the solution.
While I was going through my HTML Code and reviewing the meta tags in the section of the code, I discovered that I had put a refresh value somewhere as one of the open graph meta tags. I had used a boilerplate code from somewhere which included a refresh rate of 30 seconds in the meta tag.
In essence, I had copied the boilerplate in addition with the meta tag and the refresh value along with others, while I was putting meta tags for the webpage.
I decided to comment out this piece of meta refresh tag and now, the web page is no longer refreshing automatically.
Below is the code:
<!-- END OF OPEN GRAPH SECTION -->
<!-- <meta http-equiv="refresh" content="30"> -->
Thank you.
Related
Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.
I have a doubt about this, my head tag in the index page covers the open graph data, twitter card and links for several sizes of apple touch icon. My question is: Is it necessary having these tags within every page of my site? Index page is which loads by default, therefore, I guess that only this page should have it but I have tested that some websites have these calls in every page.
So, what's the best way to proceed?
You should have it on every page. When someone shares a link on a social network or bookmarks a sub-page of your website the browser or social network will want to use that icon. It is not going to load your home page, so the links to the appropriate icons should be in the head of the page itself.
I'm using Web2py and using the "PLUGIN_JQMOBILE/LAYOUT.HTML" as the base layout file.
The problem is that when I click on a link, jquery-mobile takes me to the next page -- all fine here.
When I view the source for the page, I see that it still has <title> from the older page.
I caught the problem since I'm using lockerz(addToAny.com) and when users try to share the page on Facebook, the title was coming completely incorrect.
I used the FB developers debug page & saw the title shown.
I can add the og:title, etc, but this problem is biting me for Google+ as well.
Am I doing something incorrect or is that a side-effect of jquery-mobile.. ?
This is because of the Ajax loading by default in jQuery Mobile. You can avoid this problem by using data-ajax="false" in your links or by using a jQuery script to change the page title after loading.
I have a quick question, hopefully someone can help me. I recently took a microsite live for a client and everything went smoothly except for a facebook integration piece. When a user attempts to Share the site, the thumbnail pulled for the share reflects the logo from the main site, not the microsite. I am baffled because this logo can be found nowhere on the page. Additionally, I have included the requisite meta information in the header of the document
<meta property="og:image" content="http://www.rethinkyourdrinknow.com/images/ryd/logo2.png" />
but for some reason it still pulls the other image. Does anyone have more experience with Facebook share that could possibly lend a hand?
Thanks,
Jamey
Try using the Facebook Linting tool (now the debugger)
http://developers.facebook.com/tools/debug
Enter the URL of your microsite, the tool should tell you whats going on.
It seems that OGP only likes thumbnails which dimensions are the same or more than 200px. If you upload an image and set it as thumbnail (which dimensions are, by WP default, 150x150 pixels) you're going to get an error message if you run your post's link into the FB debugger like this:
Open Graph Warnings That Should Be Fixed
Small og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.
So I manually enlarged an image into one of my previous posts to the actual 200x200 pixel size and tadadah!!! Facebook shares the proper link and proper image also from WP homepage or single post.
Expanding on #Andy's answer, you can certainly use the Debugger tool to see how facebook views your URL. It will tell you exactly what og:tags are missing/malformed.
One thing to note is that facebook does some caching on og:tags of URL's that have been shared; but using the Debugger tool will refresh facebooks caching of your URL.
I had the same problem with LinkedIn. I added <meta property="og:image" content="https: and so on to my index.html, but LinkedIn kept pulling the wrong picture because it had already cached my site.
Here's the trick to force the embedding app (LinkedIn, Facebook, etc.) to treat your website as never cached before and therefore read it completely from scratch, including your new og:image.
When you input your full link to the social media site, add ?01 at the very end of it. E.g. https://example.com?01 or https://example.com/my_project/?01
Just tried it and it worked like magic!
I'm interested in the way lala.com works. They have a header that remains fixed at the top of the browser and they have a flash music player in it.
You can click on other links in the site and they are displayed below the header but the header is not disrupted and can continue playing music.
If the target is a modern browser say IE8 & FF 3.6, what's the best way to achieve this?
Thanks for any help.
Frames / Iframes
One way to achieve this is to create a frameset or use iframes to show the sub pages. The top (or bottom) frame would be a very tiny one, and containing your music player. The big frame would contain the page that is being browsed. This technique is used e.g. by Google when clicking on an image search result.
This method has its downsides: The user will see your URL in the address bar and not the one of the page being browsed. If the user enters something in the address bar, they will leave your frameset. It is not possible e.g. to write down the URL of the current page.
Ajax
The second, better way is to build a navigation that loads the other pages into the current page through AJAX. See an example implementation here.
This will provide for smooth loading, music will continue to play. If done right, it is even possible to retain a healthy link structure that won't break external references, and have the "back" button work. The tutorial I link to covers both aspects. Just be careful, it's a 3-part tutorial.
It works with JavaScript enabled only, though, but there are solutions that downgrade gracefully (falling back to the "normal" behaviour of switching pages when JavaScript is turned off).
Besides frames, you can do partial page refreshes with ajax. Instead of fully loading a new page on each action, you would do partial page refreshes. You can keep bookmarking and the back button functionality through careful coding. Libraries such as jQuery (and lots of others) make using ajax across different browsers signficantly simpler. EDIT A quick search revealed a Stack Overflow question on back button plugins for jQuery. So, if you use jQuery you can make this approach even easier.
Here's some stub code:
HTML
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="music-header">
<!-- ...Music header content goes here -->
</div>
<div id="content">
<!-- ...Body of different pages goes here -->
</div>
</body>
</html>
Javascript is provided in the link I provided on how to handle bookmarking and the back button.
This specific example lala.com is done using iframes.