آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 17) - آموزش قرار دادن آیکونهای شبکه اجتماعی

- visibility ۰ mode_comment

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

در جلسه قبل در مورد قرار دادن جدول و موقعیت توضیحاتی رو خدمتتون گفتیم. در این جلسه قصد داریم در مورد قرار دادن آیکونهای شبکه اجتماعی با استفاده از تگ mj-social توضیح بدیم.

قرار دادن آیکونهای شبکه اجتماعی با استفاده از تگ mj-social

با استفاده از این تگ میتونین درون ایمیلهای خودتون CTA یا Call To Action هایی رو قرار بدین که با کلیک کردن کاربران بر روی اونا، به آدرس شبکه اجتماعی شما منتقل بشن. کد زیر رو در نظر بگیرید:

میبینید که تگ mj-social رو قرار دادیم و درون ویژگی display اون، دو شبکه google و facebook رو قرار دادیم. با اینکار موتور mjml بصورت اتوماتیک همه کارا رو انجام میده و آیکون شبکه های مورد نظر رو برامون قرار میده. خروجی در مرورگر بصورت زیر خواهد بود:mjml social

میبینید که آیکون دو شبکه اجتماعی Google Plus و Facebook قرار داده شده و بر روی هر کدوم کلیک کنیم، به یک آدرس منتقل میشیم ولی آدرسی نیست که مدنظر ما باشه. شما با استفاده از ویژگی facebook-href و google-href میتونین آدرس مورد نظرتون رو برای این آیکونها قرار بدین. بصورت زیر:

این ویژگی ها این لینک رو برمیدارن و در ادامه لینک مخصوص اون شبکه برای Share کردن یا به اشتراک گذاشتن قرار میدن. با اینکار اگر کاربران بر روی آیکون گوگل کلیک کنید، سایت 7learn رو درون گوگل به اشتراک میزارن و اگر بر روی facebook کلیک کنن، سایت 7learn رو درون facebook به اشتراک میزارن. وقتی روی آیکون گوگل کلیک کنید به آدرس زیر میرید:

و اگر بر روی آیکون facebook کلیک کنید، به آدرس زیر خواهید رفت:

اگر شما قصد به اشتراک گذاری نداشته باشید و بخواید مستقیما آدرس صفحه facebook یا google رو قرار بدین، باید بصورت زیر عمل کنید:

میبینید که درون ویژگی display، بعد از اسامی شبکه ها، : قرار دادیم و بعد از اون کلمه url رو قرار دادیم. با اینکار دقیقا همون چیزی که درون ویژگی facebook-href قرار داده میشه، بعنوان آدرس آیکون قرار داده میشه.

ویژگی هایی که میتونین برای این تگ بکار ببرید، بصورت زیر هستند:

  • facebook-content : متن روبروی آیکون facebook
  • facebook-href : آدرس مربوط به Facebook
  • facebook-icon-color : رنگ مربوط به آیکون facebook
  • font-family : فونت متنها رو مشخص میکنه
  • font-size : سایز متنها رو مشخص میکنه
  • google-content : متن روبروی آیکون google
  • google-href : آدرس مربوط به google
  • google-icon-color : رنگ مربوط به آیکون google
  • icon-size : سایز آیکونها رو مشخص میکنه و پیش فرض اون 20 پیکسل هست
  • instagram-content : متن روبروی آیکون instagram
  • instagram-href : آدرس مربوط به instagram
  • instagram-icon-color : رنگ مربوط به آیکون instagram
  • line-height : مشخص کردن فاصله بین خطوط
  • linkedin-content : متن روبروی آیکون linkedin
  • linkedin-href : آدرس مربوط به linkedin
  • linkedin-icon-color : رنگ مربوط به آیکون linkedin
  • mode : با استفاده از این ویژگی میتونین مشخص کنید که آیکونها افقی قرار بگیرن یا عمودی. اگر vertical بزارید، بصورت عمودی نمایش داده میشن.
  • pinterest-content : متن روبروی آیکون pinterest
  • pinterest-href : آدرس مربوط به pinterest
  • pinterest-icon-color : رنگ مربوط به آیکون pinterest
  • text-mode : اگر اون رو برابر با false قرار بدین، متن مربوط به آیکونها نمایش داده نمیشه
  • twitter-content : متن روبروی آیکون twitter
  • twitter-href : آدرس مربوط به twitter
  • twitter-icon-color : رنگ مربوط به آیکون twitter

همونطور که دیدید 6 شبکه اجتماعی Twitter و Linkedin و Facebook و Google Plus و Instagram و Pinterest رو میتونین قرار بدین. برای بقیه شبکه ها خودتون باید دستی مقادیر مختلف رو مشخص کنید. مثلا کد زیر رو در نظر بگیرید:

در بالا بصورت دستی یک آیکون و متن و ... برای 7learn ساخته شده. خروجی در مرورگر بصورت زیر خواهد بود:mjml social 2

بهمین راحتی.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.