I want to include YouTube thumbnail inside my react app.
I already made enable the YouTube v3 api in developers google
so here is the request I am making
https://youtube.googleapis.com/youtube/v3/search?url=https://www.youtube.com/watch?v=6jypIrxqhXo&key=`HEREISTHEKEY`
The thing is The data coming back doesn't have the thumbsmail image data. What am I missing here , what change I have to make to get the thumbnail data back
You need to add part=snippet as an url parameter:
The snippet object contains basic details about a search result, such as its title or description. For example, if the search result is a video, then the title will be the video's title and the description will be the video's description.
So your url should look like this:
https://youtube.googleapis.com/youtube/v3/search?url=https://www.youtube.com/watch?v=6jypIrxqhXo&part=snippet&key=YOURKEY
Related
I have implemented the my title description and picture in the head section in Nextjs which is coming from api .I have check the title description and picture shows in meta tage .But When I share the link of my page the crawler can't pick the dynamic data on my head section .
on the other hand if I set the static data hen its working perfectly
its shows the dynamic record when I am sharing the link of my URL to anyone on slack
So i have a website which is builded with NextJS and i'm using Next SEO plugin for filling the meta tags necessary for twitter and facebook info...
I have card type option set to summart_large_image
<meta name="twitter:card" content="summary_large_image">
i can see that it's added to the website and it does work for some of the posts ... but something weird is happening , for example two of the tweets will have card with large image and then three of them would be just plain text with the link ...
I have a CMS in Silex where it's implemented automatic posting on twitter with twitter's API... and basicly i'm just posting a string with the link and some additional comment about it ... when i try do debugg with the twitter card validator it does work properly but not on my account ...
here's a screenshot for better explanation, the red ones are cards with large image and the blue ones have only text with link
All the posts have the same structure and equal size provided for the og:image tag.... all of them are equal basicly
Edit:
This is the twitter account in question for more clarity : https://twitter.com/someecards
Edit:
Now i even got a summary card with small image on a post which contains meta tag "summary_large_image" , and when i run the same link throught the link validator i'm getting the desired result
Link validator:
It looks like sometimes Twitter is not able to build the Card Preview (maybe a timeout when fetching the data or image) and, after that, the link is never accessed again, hence the preview is not rebuilt.
You can validate the preview with the Twitter Card Validation tool but it will probably work and show the correct link.
I have explained how the Card Preview works and limitation in a blog post, and created a tool to work around it.
In your case I would make sure the page is built before you post it onto Twitter, to make sure it is ready and served with minimum delay when the Twitter bot access it to generate the preview.
I'am developing a blog website using react.js where users can post and comment ...
so we know that a user can comment with an image ,and let's say he want to upload a local image that stored in his machine,i want to display that image as a comment and save it into postgres database which i'am using for that.
My question is what are the steps that i should follow to achieve my purpose,thanks in advance.
If you have to do in simple steps, you can save the image to base64, its just string representation of an image. So it can be saved in DB directly and when you have to show it just decode the string and display it accordingly.
References :-
https://github.com/dankogai/js-base64#readme
https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript
Alternatively, what you can do when user selects an image, then upload that image to your server and get the path to that(multipart file upload) and from path you can show it where you want to show.
References :-
how to send a multipart/form-data from React.js with an image?
I hope it helps, Thanks :)
I am connecting Active Directory to a platform my company uses. In order to ensure that user's have a profile picture, I will add the URL of the photo to an attribute and connect it that way. However, the URL for the image must take me directly to the image. So far, I have been able to store images on different options but for each one, when I select the URL, it takes me to the webpage that disples other items than just the image (e.g. - https://ibb.co/J2cFfsx ). How can I store photos so that the URL takes me directly to JUST the image ONLY?
right click on the image and click view image. once you have done this you should get something that looks like below. In the URL there should be a new link, if you use that one it should always take you to the image aslong as it exits.
Equally you can right click on the image and select "copy image location" and that will give you the new link. I personally perfer the other method as it gives a proper preview of the image at its full size.
new image view
To link your image to the document go and search for image on google. right click on image -> Create QR code for this image after showing the QR code. Beneath QR code there is a link copy that and paste it in your document where you want. Now just to be sure click on the link and it will show the image only. Try it!!
I'm implementing custom share buttons for LinkedIn, Facebook etc. using Drupal 7 at the following URL:
http://commandpartners.com/blog/5-traits-of-an-entrepreneurial-mindset
After a user clicks on the LinkedIn button, a LinkedIn popup opens, with the correct title and description. However, the wrong image appears. I'm not able to understand why the correct blog image does not appear.
Where is LinkedIn pulling the image from?
It looks like maybe the image being used is an older image capture from your site. Did you have this older image on the site before? (the city skyline illustration)