I have a page with a list of items and each has an Addthis share button, I wanted the 1st Facebook thumbnail in teh sharer to be that of the item selected, so I tried many solutions which didn't work, and finally I tried to dynamically write and read from SQL the URL to the thumbnail for og:image and rel="image_src" each time a user clicks the share button to the particular item, this way the Facebook scraper has the details to the selected item at parse-time, but yet it doesn't seem to work, the thumbnail is not even shown among the thumbnail options.
Is there a reliable way to set the main thumbnail when such a page has more than 1 share button?
ShareThis offers the option to select the thumbnail image using the st_image tag, here you can find more info. So basically I had to switch from Addthis to ShareThis.
Related
im using Zend Framework v1, I have implemented the facebook share button on my site. If I click the share button for the first time, the data is fetched (title, description and URL) but not thumbnail. However if I refresh the page, come back and press again the button, the thumbnail is being displayed.
Same thing is when i post a link via fb website - at first time there is no thumbnail but after refreshing fb site and posting link again it is being displayed.
Does anyone know how to make it working?
The meta tags seems to be ok, the fb developer tool shows no errors.
Code in the ZF Controller
$this->view->doctype('XHTML1_RDFA');
$this->view->headMeta()->appendProperty('og:title', 'some value');
$this->view->headMeta()->appendProperty('og:type', 'website');
$this->view->headMeta()->appendProperty('og:url', 'http://mydomain/file?name='.$_GET["name"]);
$this->view->headMeta()->appendProperty('og:description', 'some value');
$this->view->headMeta()->appendProperty('og:image', 'http://mydomain/up/'.$_GET["name"]);
You can either trigger a first scrape via API when you publish a new piece of content, or specify the image dimensions via OG meta tags as well.
https://developers.facebook.com/docs/sharing/best-practices#precaching:
There are two ways to avoid this and have images render on the first Like or Share action:
Pre-cache the image with the URL Debugger
Use og:image:width and og:image:height Open Graph tags
At a page I am showing a Youtube film in a lightbox.
I then want to show only the raw video film - no controls, play/pause buttons, fullscreen option, progress bar etc.
Right now it looks like this:
and I simply need to remove the top and bottom flash bars with icons. I know it slides away while the films is running, but I wish to always have them hidden.
Is this possible to hide from the film?
Update
From the answer from #Sven below I added controls=0&showinfo=0&rel=0 to the URL in the iframe and got the following:
This works fine for the purpose. It seems though that a Youtube logo is visible in the lower right corner instead when this other stuff is removed. This logo is only shown at hover.
Any ideas to hide this last bit?
Depending on how you are inserting the video, there are several configuration options.
https://developers.google.com/youtube/player_parameters
If you insert the link directly as an iframe most of the options work as GET parameters. In your case add controls=0&showinfo=0 to the video url.
I need a way to automatically generate a thumbnail of the target page when the user hover over a URL (hyperlink) on my page.
I've found several examples of people using pre-created .gifs (or other images) to show a thumbnail of the target site while hovering over the link (see example #1), but I need a way to do this dynamically. Is there a way to generate a thumbnail of a page, either on runtime, or an easy way to update the current thumbnail after editing a page?
Simply put; I need to show a thumbnail of the target page when hovering a hyperlink on my page. This thumbnail should not be based on an image that I have to generate myself after each edit, but rather a snapshot of the current page. Much like google does when searching for websites.
Thanks a lot in advance!
Example #1:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
Hover your mouse over "Zoka Coffee"..
Try to study about this library html2canvas
I am making a website gallery page, and in the meta tags I have set an og:image, so when someone clicks like on the page, the image is used as the story's thumbnail on their facebook wall.
When someone shares a link, they only have the option to use the image above as the story's thumbnail. Is there a way to add more images as options for the story's thumbnail so the user can use the arrows and select the image they want?
If I used more than one og:image tags, would they have that option? And if so, how would the like button's thumbnail image be selected?
To get the multi image selector on Facebook, you would need to remove the og:image from the page being requested and just have a bunch of img tags.
Facebook will scrape all the img tags and offer them as choices.
To detect the facebook scraper, and show different content specific for the scrape, just detect the user agent below, and output different content (i.e. only the og tags you want, and a set of img tags):
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.