نوشته های رضا هاشمی https://virgool.io/feed/@reza.hashemi فرانت اند دولوپر :) fa 2026-06-08 01:00:24 https://files.virgool.io/upload/users/22815/avatar/oJEC1Z.jpeg?height=120&width=120 رضا هاشمی https://virgool.io/@reza.hashemi ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی https://virgool.io/Gajino-FrontEnd/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%BE%DB%8C%D8%B4-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D9%84%DB%8C%D9%86%DA%A9-%D8%AF%D8%B1-%D8%B4%D8%A8%DA%A9%D9%87-%D9%87%D8%A7%DB%8C-%D9%85%D8%AC%D8%A7%D8%B2%DB%8C-d0pvuqxbcdh3 ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازیخیلی برام پیش اومده که میخواستم لینک یه پروژه ای که قبلا کار کردم یا در حال توسعه هستم رو برای یه نفر توی تلگرام یا واتساپ یا جاهای دیگه ارسال کنم اما وقتی لینک رو میفرستم اصلا ظاهر جالب و قشنگی نداره. و حتی بعضی وقتا شده که بین چت هامون گم شده و طرف میگه من لینکو پیدا نمی کنم دوباره بفرست.حتما شما هم دیدید که بعضی لینک ها پیش نمایش جالبی داره که همین پیش نمایش باعث جذب مخاطب میشه مثل تصویر پایین.پیش نمایش یک لینکپیش نمایش لینک معمولاً شامل یک تصویر ، عنوان ، توضیحات و نام دامنه است. همه این اطلاعات توسط شما قابل تنظیم است!پروتکل Open Graphاین قطعه کد بخشی از پروتکل Open Graph است که توسط Facebook ایجاد شده.این متا تگ ها نحوه نمایش لینک ها هنگام اشتراک گذاری در شبکه های اجتماعی را کنترل می کنن.برای شروع ایجاد پیش نمایش لینک، باید متا تگ های Open Graph را در قسمت <head> کد HTML وب سایت خودمون اضافه کنیم.Open Graph Protocolمتادیتاهای اجباریچهار property برای پیاده‌سازی و تنظیم پیش‌نمایش لینک اجباری هستند:1: تگ og:titleاین همان متا تگ <title> هست که در تگ <head> صفحه هم هست. اگر متا تگ og: title پیدا نشود ، به جای آن به صورت پیش فرض از متا تگ <title> استفاده می شود که مثل کد پایین نوشته می شود.<meta property=&quotog:title&quot content=&quotاینجا عنوان نوشته می شود&quot />2: تگ og:typeاین تگ نوع محتوای موجود در صفحه را مشخص می کنه که برای دیدن انواعی که میتونید استفاده کنید می تونید به اینجا مراجعه کنید ، سایت های فاقد این متا تگ به عنوان website شناخته می شن.<meta property=&quotog:type&quot content=&quotwebsite&quot />3: تگ og:urlکه آدرس صفحه‌ی وبسایت می باشد و باید توجه داشته باشید که مقدار آن حتما absolute URL باشد:<meta property=&quotog:url&quot content=&quothttps://آدرس وب.com&quot />4: تگog:imageتصویری که در پیش نمایش لینک نمایش داده می شود. این تصویر مانند بنر تبلیغاتی هست که باید محتوای صفحه را ارائه بدهد پس در انتخاب این تصویر خوب دقت کنید.<meta property=&quotog:image&quot content=&quothttps://آدرس عکس.jpeg&quot />به نظر می رسد که این مقدار هم فقط با absolute URL کار می کند.پیشنهاد می شود که وضوح عکس 1200 در 627 پیکسل و نسبت ابعاد 1 به 1.91 باشد و همچنین حجم عکس هم بیشتر از 5 مگابایت نباشد.متادیتاهای اختیاری1: تگ og:description به اندازه یک یا دو جمله برای توضیح عملکرد وبسایتمون به این تگ اضافه می کنیم.<meta property=&quotog:description&quot content=&quotتوضیحات برای وب سایت&quot />2: تگ og:site_nameاگر این صفحه وب سایت ما بخشی از یک وبسایت اصلی باشد این بخش را اضافه می کنیم و نام اصلی وب سایت را قرار میدیم<meta property=&quotog:site_name&quot content=&quotنام وب سایت&quot />متادیتاهای مخصوص توئیتر1: تگ twitter:cardاین متادیتا نوع نمایش کارت را در توئیتر مشخص میکند. چنانچه type , title و description در صفحه موجود باشد توئیتر به صورت پیش فرض نوع summary card را برا پیش نمایش لینک شما انتخاب خواهد کرد.<meta name=&quottwitter:card&quot content=&quotsummary_large_image&quot />2: تگ twitter:siteدر این متادیتا آدرس صفحه توئیتر مربوط به وبسایت خود را قرار دهید.<meta name=&quottwitter:site&quot content=&quot@gajino&quot>3: تگ twitter:creatorدر این متادیتا نام سازنده این صفحه قرار میگیرد. <meta name=&quottwitter:creator&quot content=&quot@rezahashemi&quot>در صورت وجود مشکل یا سوال میتوانید به مستندات توئیتر مراجعه کنید.یا به منبع این مقاله مراجعه کنید. رضا هاشمی رضا هاشمی Tue, 02 Mar 2021 17:36:41 +0330 نحوه نمایش رنگی تصاویر png سفید با کد رنگ دلخواه https://virgool.io/Gajino-FrontEnd/%D9%86%D8%AD%D9%88%D9%87-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D8%B1%D9%86%DA%AF%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-png-%D8%B3%D9%81%DB%8C%D8%AF-%D8%A8%D8%A7-%DA%A9%D8%AF-%D8%B1%D9%86%DA%AF-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-jufvcb6rs6ys خب مشکل من از جایی شروع شد که قرار شد یک لیست از تصاویر png (که همه سفید هستند) به همراه کد رنگ هاشون از API بگیرم و به صورت آیکون های رنگی نمایش بدم.نمونه عکس سفیدکه البته اگر از حالت روز در ویرگول استفاده کنید این عکس رو نخواهید دید چون بک گراند سفیده و عکس هم سفیده و من بک گراند عکس رو تغییر ندادم تا کاملا متوجه مشکل بشوید.خلاصه بعداز کلی کلنجار رفتن با css خیلی کلافه شده بودم و فقط تونسته بودم باfilter: opacity(0.5) drop-shadow(0 0 0 #ff0000);یک مقدار رنگ به آیکون هام بدم اما اصلا قابل قبول نبود. مثلا کد بالا که رنگ عکس رو باید قرمز کنه تبدیل به عکس پایین می کنه:تصویر ایجاد شده با فیلتر cssهمونطور که ملاحضه می کنید تقریبا قرمز شده اما جالب و قابل قبول نیست.وپس از کلی سرچ و امتحان کردن روش های مختلف و فیلترهای مختلف به راهکار استفاده از svg رسیدم که دقیقا همون چیزی بود که من نیاز داشتم به تکه کد پایین دقت کنید.قطعه کد svg که تصویر رو لود میکنه<svg width=&quot40&quot height=&quot40&quot viewBox=&quot0 0 40 40&quot> <defs> <filter id=&quotprefix__a17&quot> <feFlood flood-color=&quot#ff0000&quot result=&quotflood&quot></feFlood> <feComposite in=&quotSourceGraphic&quot in2=&quotflood&quot operator=&quotarithmetic&quot k1=&quot1&quot> </feComposite> </filter> </defs> <image width=&quot100%&quot height=&quot100%&quot xlink:href=&quothttps://link/to&quot filter=&quoturl(#prefix__a17)&quot type=&quotimage&quot> </image> </svg>باید دقت کنید که حتما باید id تگ filter با مقدار پراپرتی filter در image یکسان باشد و باید کد رنگ مورد نظر خودمون رو به پراپرتی flood-color در تگ feFlood تخصیص بدیم.که در نهایت نتیجه کد بالا به صورت عکس پایین نمایش داده می شود.تصویر ایجاد شده با استفاده ازفیلتر svgهمونطور که مشاهده می کنید تصویر دقیقا رنگ مورد نظر رو نمایش داده و این دقیقا همون آیکون مد نظر من هست.در انتها تشکر میکنم که این پست رو مطالعه کردید و اگر راه بهتری به نظرتون رسید بهم اطلاع بدید. رضا هاشمی رضا هاشمی Sun, 21 Feb 2021 09:06:00 +0330