I've seen many Blogger templates and sites use thumbnails by taking the first image of the post and using that as a thumbnail on the homepage. I'm writing my own Blogger template from scratch (http://test.wwsalmon.com/) and I want to use thumbnails, but I have no idea how to. Also, I want to be able to have mini video players for embedded YouTube videos in the post. Can somebody help me? What code to use?
you can link to and use first image as thumbnail with code below
<img class='' expr:src='data:post.firstImageUrl' alt=""/>
here data:post.firstImageUrl provides the link to first image in post.
make sure to use expr:src="" instead of src=""
Related
Background
Lately, Facebook added a "carousel" ad format, showing multiple slides in a sponsored post. This is now available for non-business users too.
Facebook example of a carousel ad format
Meta annotation
I am looking for a way to "annotate" my website in a way that it will be showing a carousel in a Facebook post when the url is used in a post. Currently I am using Open Graph (og) meta tags for annotation.
HTML share link
Besides that, I'm looking for a way to add multiple "carousel slides" to a Facebook share link. Currently I am using the following html for Facebook share links:
<a
href="http://www.facebook.com/dialog/feed
?app_id=123
&link=http%3A%2F%2Fmy.url.com
&picture=http%3A%2F%2Fmy.url.com/img.jpg
&name=MyTitle
&caption=MyCaption
&description=MyDescription
&redirect_uri=http%3A%2F%2Fmy.url.com"
target="_blank"
>
Share on Facebook
</a>
Both ways result in the default post format. Can anyone help me with Facebook sharing in carousel format?
This is currently a feature that is being tested and it's not possible to apply for it.
Now this feature is live & when posting on a page select Image format and select carousal, you can add about 6 images to carousal & publish.
I am trying to add share button to albums in website created in Laravel. I have used the code for share button that generated using facebook/developer. The albums are not fixed. It is displaying by fetching from database. So I changed code little to change the link of each album automatically as given below.
<div class="fb-share-button" data-href="http://mysite/albumphotos/{{$album->name}}" data-layout="button">
</div>
But if I try to share into my facebook account, it is showing some other images in my website. How can I show images in my particular album as thumbnail while sharing??
Can anyone help?
As mentioned by #CBroe, first things first:
Make sure you have the proper OG Meta Tags
Run one of the albums' link in the debugger and check if the crawler is pulling the right info
If the date from step 2 doesn't match what you are looking for, update your OG meta tags and try again.
I write movie reviews and share them on Facebook. At first the facebook thumbnails would show the pictures I wanted for my reviews, like the movie poster. However, now they only show my blogger profile picture every single time I post a link. It's very frustrating because I want to be taken seriously and I don't want my blogger profile picture showing up every time I post a link. I tried the facebook developers debugging tool and it did nothing. Does anyone have any other suggestions?
Thanks!
I don't know to what extent you can modify the HTML code of a Blogger blog, but you can use Open Graph tags to define the exact image you want Facebook to show, for example the tag you want is the following:
which must have a 100px x 100px size at least. Note that this tag goes into the Head section of the site.
It has taken some time, but I think I have worked out what is happening, thanks to Facebook Debugger. Put the post URL in and then scroll down to "OPen Graph Warnings That Should be Fixed". You may see something like this -
Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook.
Chances are your image is too small and that is why it is grabbing the profile image. I played around with my posts until I got it right, checking it through Debugger each time. It was a pain, but it worked.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Ok guys.. I've researched this thoroughly- I'm at the end of my rope and my supervisor is getting pissed. Any help is appreciated.
facebook opengraph thumbnails do not work when I share pages from my site. I'm sure I have og:image implemented correctly. I have resized the JPG thumbnails to 130x110 pixels. I have even tried hiding another copy of the same thumbnails in the pages with display:none.
example page: http://www.classical917.org/houston_public_radio-arte_publico.php
from that page:
The Facebook debugger (formerly the Linter) picks up the URL of the image, but displays a blank box. When I click on the blank box, the image loads.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.classical917.org%2Fhouston_public_radio-arte_publico.php
When I post a page from my site into a Facebook 'What's on Your Mind?' box, Facebook gets the title and description from my og: tags, thinks for a while about the image, then loads with no image.
Is it because I'm trying to use the same logo image for every page on the site? Is that a no-no? Is there something wrong with my image (although I've tried several versions)? Am I being penalized for using the debugger too often? Does Facebook hate my site?
Thanks for any ideas or pointers on this. I'm desperate to fix it before I get called into my supervisor's office.. : P
Your site has 215 xhtml validation errors according to the w3c validator. Facebook may be having a hard time parsing your page with so many errors. It could also be a caching issue, although the linter tool should clean up the cache, and the linter tool is pulling in the image properly. It may also not like full path URL's. Try a relative path.
As a work-around, you could also try specifying an image the old way:
<link rel="image_src" href="/_images/logo-facebook-130x110-kuha.jpg" />
The rest of your questions are invalid (Facebook isn't penalizing you and they don't care if you are using the same image).
Try removing line break in the og:description meta.
I know it is common that we use the code below to embed a video from you, but how about the facebook itself??
<fb:swf
swfbgcolor="000000" imgstyle="border-width:1px; border-color:white;"
swfsrc='http://www.youtube.com/v/fZRSpjqzTH8&autoplay=1'
imgsrc='http://img.youtube.com/vi/fZRSpjqzTH8/2.jpg' width='259' height='204' />
for instance, I want to embed this video, http://www.facebook.com/video/video.php?v=471202548012&ref=mf
I want it autoplay and find the thumbnail image like I can get it from youtube...
Is it possible for the video on facebook??
thanks,
Lau
go to www.facebook.com/thefanpagefactory they can help you for sure. post it on the wall. Enjoy.